/*
© 2025 Sharon Aicler (saichler@gmail.com)

Layer 8 Ecosystem is licensed under the Apache License, Version 2.0.
You may obtain a copy of the License at:

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/*
 * Layer8 Theme Token Contract
 * ============================
 * Every theme MUST define values for all tokens listed below.
 * Custom themes are added as [data-theme="xxx"] blocks in this file
 * or in separate CSS files (e.g., layer8d-theme-ocean.css).
 *
 * Color Tokens (theme-dependent — MUST be overridden per theme):
 *   --layer8d-primary          Accent color (buttons, links, focus)
 *   --layer8d-primary-dark     Accent hover/active state
 *   --layer8d-primary-light    Accent subtle backgrounds
 *   --layer8d-bg-white         Page/card background
 *   --layer8d-bg-light         Secondary background
 *   --layer8d-bg-input         Input field background
 *   --layer8d-bg-card          Elevated card background
 *   --layer8d-bg-hover         Hover state background
 *   --layer8d-text-dark        Primary text
 *   --layer8d-text-medium      Secondary text
 *   --layer8d-text-muted       Tertiary/disabled text
 *   --layer8d-text-light       Placeholder text
 *   --layer8d-border           Default borders
 *   --layer8d-border-dark      Emphasis borders
 *   --layer8d-shadow-sm        Subtle shadow
 *   --layer8d-shadow-md        Medium shadow
 *   --layer8d-shadow-lg        Elevated shadow
 *   --layer8d-focus-ring       Focus indicator ring
 *   --layer8d-success          Success/positive status
 *   --layer8d-success-bg       Success background tint
 *   --layer8d-warning          Warning status
 *   --layer8d-warning-bg       Warning background tint
 *   --layer8d-error            Error/negative status
 *   --layer8d-error-bg         Error background tint
 *   --layer8d-info             Info status
 *   --layer8d-info-bg          Info background tint
 *   --layer8d-green-light-bg   Semantic green light bg
 *   --layer8d-green-light-text Semantic green light text
 *   --layer8d-green-bg         Semantic green bg
 *   --layer8d-green-text       Semantic green text
 *   --layer8d-red-bg           Semantic red bg
 *   --layer8d-red-text         Semantic red text
 *   --layer8d-yellow-bg        Semantic yellow bg
 *   --layer8d-yellow-text      Semantic yellow text
 *   --layer8d-orange-bg        Semantic orange bg
 *   --layer8d-orange-text      Semantic orange text
 *   --layer8d-blue-bg          Semantic blue bg
 *   --layer8d-blue-text        Semantic blue text
 *   --layer8d-indigo-bg        Semantic indigo bg
 *   --layer8d-indigo-text      Semantic indigo text
 *   --layer8d-gray-bg          Semantic gray bg
 *   --layer8d-gray-text        Semantic gray text
 *   --layer8d-gray-light-bg    Semantic gray light bg
 *   --layer8d-gray-light-text  Semantic gray light text
 *
 * Layout Tokens (typically same across themes):
 *   --layer8d-font-family      Primary font stack
 *   --layer8d-font-mono        Monospace font stack
 *   --layer8d-font-weight-*    Font weight scale (normal, medium, semibold)
 *   --layer8d-font-xs/sm/base/lg/xl  Font size scale
 *   --layer8d-space-xs/sm/md/lg/xl   Spacing scale (8px baseline)
 *   --layer8d-radius-sm/md/lg  Border radius scale
 */

/* ============================================ */
/* LIGHT THEME (default)                        */
/* ============================================ */

:root {
    /* Primary Colors */
    --layer8d-primary: #0ea5e9;
    --layer8d-primary-dark: #0284c7;
    --layer8d-primary-light: #7dd3fc;

    /* Text Colors */
    --layer8d-text-dark: #2d3748;
    --layer8d-text-label: #2d3748;
    --layer8d-text-medium: #4a5568;
    --layer8d-text-muted: #718096;
    --layer8d-text-light: #a0aec0;

    /* Background Colors */
    --layer8d-bg-white: #fafafa;
    --layer8d-bg-light: #f5f5f3;
    --layer8d-bg-input: #ededeb;
    --layer8d-bg-card: #fbfbfb;
    --layer8d-bg-hover: #e8e8e6;

    /* Section Header */
    --layer8d-header-gradient: linear-gradient(135deg, #f5f1ea 0%, #efe8dd 55%, #e4dbcf 100%);
    --layer8d-header-shadow: 0 8px 24px rgba(123, 95, 63, 0.10);

    /* Border Colors */
    --layer8d-border: #dcdcda;
    --layer8d-border-dark: #c8c8c6;

    /* Status Colors - Core */
    --layer8d-success: #22c55e;
    --layer8d-success-bg: rgba(34, 197, 94, 0.1);
    --layer8d-warning: #f59e0b;
    --layer8d-warning-bg: rgba(245, 158, 11, 0.1);
    --layer8d-error: #ef4444;
    --layer8d-error-bg: rgba(239, 68, 68, 0.1);
    --layer8d-info: #3b82f6;
    --layer8d-info-bg: rgba(14, 165, 233, 0.08);

    /* Semantic Status Colors - Tailwind Palette */
    --layer8d-green-light-bg: #bbf7d0;
    --layer8d-green-light-text: #166534;
    --layer8d-green-bg: #d1fae5;
    --layer8d-green-text: #065f46;
    --layer8d-red-bg: #fecaca;
    --layer8d-red-text: #991b1b;
    --layer8d-yellow-bg: #fef3c7;
    --layer8d-yellow-text: #92400e;
    --layer8d-orange-bg: #fed7aa;
    --layer8d-orange-text: #9a3412;
    --layer8d-blue-bg: #efe8dd;
    --layer8d-blue-text: #7c5f3f;
    --layer8d-indigo-bg: #e0e7ff;
    --layer8d-indigo-text: #3730a3;
    --layer8d-gray-bg: #e5e7eb;
    --layer8d-gray-text: #374151;
    --layer8d-gray-light-bg: #f3f4f6;
    --layer8d-gray-light-text: #6b7280;

    /* Typography */
    --layer8d-font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --layer8d-font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;
    --layer8d-font-weight-normal: 400;
    --layer8d-font-weight-medium: 500;
    --layer8d-font-weight-semibold: 600;
    --layer8d-font-xs: 11px;
    --layer8d-font-sm: 12px;
    --layer8d-font-base: 14px;
    --layer8d-font-lg: 16px;
    --layer8d-font-xl: 18px;

    /* Spacing (8px baseline) */
    --layer8d-space-xs: 4px;
    --layer8d-space-sm: 8px;
    --layer8d-space-md: 16px;
    --layer8d-space-lg: 24px;
    --layer8d-space-xl: 32px;

    /* Border Radius */
    --layer8d-radius-sm: 4px;
    --layer8d-radius-md: 8px;
    --layer8d-radius-lg: 12px;

    /* Shadows */
    --layer8d-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --layer8d-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --layer8d-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Focus Ring */
    --layer8d-focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.15);

    /* Section Header */
    --layer8d-header-grad-start: #f8f8f6;
    --layer8d-header-grad-mid: #f4f4f2;
    --layer8d-header-grad-end: #efefed;
    --layer8d-header-shadow: rgba(0, 0, 0, 0.08);
}

/* ============================================ */
/* DARK THEME                                   */
/* ============================================ */

[data-theme="dark"] {
    /* Backgrounds */
    --layer8d-bg-white: #0f172a;
    --layer8d-bg-light: #1e293b;
    --layer8d-bg-input: #334155;
    --layer8d-bg-card: #1e293b;
    --layer8d-bg-hover: #334155;

    /* Text */
    --layer8d-text-dark: #f1f5f9;
    --layer8d-text-label: #ffffff;
    --layer8d-text-medium: #94a3b8;
    --layer8d-text-muted: #64748b;
    --layer8d-text-light: #64748b;

    /* Section Header */
    --layer8d-header-gradient: linear-gradient(135deg, #1e293b 0%, #1a2332 55%, #162030 100%);
    --layer8d-header-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);

    /* Borders */
    --layer8d-border: #334155;
    --layer8d-border-dark: #475569;

    /* Shadows (stronger for dark backgrounds) */
    --layer8d-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --layer8d-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --layer8d-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* Focus Ring (brighter for dark backgrounds) */
    --layer8d-focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.3);

    /* Status backgrounds (higher opacity for dark backgrounds) */
    --layer8d-success-bg: rgba(34, 197, 94, 0.15);
    --layer8d-warning-bg: rgba(245, 158, 11, 0.15);
    --layer8d-error-bg: rgba(239, 68, 68, 0.15);
    --layer8d-info-bg: rgba(14, 165, 233, 0.12);

    /* Section Header */
    --layer8d-header-grad-start: #1e293b;
    --layer8d-header-grad-mid: #1a2436;
    --layer8d-header-grad-end: #162032;
    --layer8d-header-shadow: rgba(0, 0, 0, 0.3);

    /* Semantic Status Colors (adjusted for dark background contrast) */
    --layer8d-green-light-bg: rgba(34, 197, 94, 0.2);
    --layer8d-green-light-text: #86efac;
    --layer8d-green-bg: rgba(34, 197, 94, 0.15);
    --layer8d-green-text: #6ee7b7;
    --layer8d-red-bg: rgba(239, 68, 68, 0.2);
    --layer8d-red-text: #fca5a5;
    --layer8d-yellow-bg: rgba(245, 158, 11, 0.2);
    --layer8d-yellow-text: #fcd34d;
    --layer8d-orange-bg: rgba(249, 115, 22, 0.2);
    --layer8d-orange-text: #fdba74;
    --layer8d-blue-bg: rgba(59, 130, 246, 0.15);
    --layer8d-blue-text: #93c5fd;
    --layer8d-indigo-bg: rgba(99, 102, 241, 0.2);
    --layer8d-indigo-text: #a5b4fc;
    --layer8d-gray-bg: rgba(107, 114, 128, 0.2);
    --layer8d-gray-text: #d1d5db;
    --layer8d-gray-light-bg: rgba(107, 114, 128, 0.1);
    --layer8d-gray-light-text: #9ca3af;
}

/* ============================================ */
/* OCEAN THEME                                  */
/* ============================================ */

[data-theme="ocean"] {
    /* Primary Colors */
    --layer8d-primary: #06b6d4;
    --layer8d-primary-dark: #0891b2;
    --layer8d-primary-light: #67e8f9;

    /* Backgrounds */
    --layer8d-bg-white: #0c1929;
    --layer8d-bg-light: #132337;
    --layer8d-bg-input: #1a3048;
    --layer8d-bg-card: #132337;
    --layer8d-bg-hover: #1a3048;

    /* Text */
    --layer8d-text-dark: #e0f2fe;
    --layer8d-text-label: #ffffff;
    --layer8d-text-medium: #7dd3fc;
    --layer8d-text-muted: #38bdf8;
    --layer8d-text-light: #0284c7;

    /* Borders */
    --layer8d-border: #1e3a5f;
    --layer8d-border-dark: #2563eb;

    /* Shadows */
    --layer8d-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --layer8d-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --layer8d-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* Focus Ring */
    --layer8d-focus-ring: 0 0 0 3px rgba(6, 182, 212, 0.3);

    /* Status backgrounds */
    --layer8d-success-bg: rgba(34, 197, 94, 0.15);
    --layer8d-warning-bg: rgba(245, 158, 11, 0.15);
    --layer8d-error-bg: rgba(239, 68, 68, 0.15);
    --layer8d-info-bg: rgba(6, 182, 212, 0.12);

    /* Section Header */
    --layer8d-header-grad-start: #132337;
    --layer8d-header-grad-mid: #0f1f33;
    --layer8d-header-grad-end: #0c1929;
    --layer8d-header-shadow: rgba(0, 0, 0, 0.3);

    /* Semantic Status Colors */
    --layer8d-green-light-bg: rgba(34, 197, 94, 0.2);
    --layer8d-green-light-text: #86efac;
    --layer8d-green-bg: rgba(34, 197, 94, 0.15);
    --layer8d-green-text: #6ee7b7;
    --layer8d-red-bg: rgba(239, 68, 68, 0.2);
    --layer8d-red-text: #fca5a5;
    --layer8d-yellow-bg: rgba(245, 158, 11, 0.2);
    --layer8d-yellow-text: #fcd34d;
    --layer8d-orange-bg: rgba(249, 115, 22, 0.2);
    --layer8d-orange-text: #fdba74;
    --layer8d-blue-bg: rgba(6, 182, 212, 0.15);
    --layer8d-blue-text: #67e8f9;
    --layer8d-indigo-bg: rgba(99, 102, 241, 0.2);
    --layer8d-indigo-text: #a5b4fc;
    --layer8d-gray-bg: rgba(107, 114, 128, 0.2);
    --layer8d-gray-text: #d1d5db;
    --layer8d-gray-light-bg: rgba(107, 114, 128, 0.1);
    --layer8d-gray-light-text: #9ca3af;
}

/* ============================================ */
/* SUNSET THEME                                 */
/* ============================================ */

[data-theme="sunset"] {
    /* Primary Colors */
    --layer8d-primary: #f59e0b;
    --layer8d-primary-dark: #d97706;
    --layer8d-primary-light: #fcd34d;

    /* Backgrounds */
    --layer8d-bg-white: #1c1412;
    --layer8d-bg-light: #2a1f1b;
    --layer8d-bg-input: #3d2e28;
    --layer8d-bg-card: #2a1f1b;
    --layer8d-bg-hover: #3d2e28;

    /* Text */
    --layer8d-text-dark: #fef3c7;
    --layer8d-text-label: #ffffff;
    --layer8d-text-medium: #fbbf24;
    --layer8d-text-muted: #b45309;
    --layer8d-text-light: #92400e;

    /* Borders */
    --layer8d-border: #4a3228;
    --layer8d-border-dark: #78350f;

    /* Shadows */
    --layer8d-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --layer8d-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --layer8d-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* Focus Ring */
    --layer8d-focus-ring: 0 0 0 3px rgba(245, 158, 11, 0.3);

    /* Status backgrounds */
    --layer8d-success-bg: rgba(34, 197, 94, 0.15);
    --layer8d-warning-bg: rgba(245, 158, 11, 0.15);
    --layer8d-error-bg: rgba(239, 68, 68, 0.15);
    --layer8d-info-bg: rgba(245, 158, 11, 0.12);

    /* Section Header */
    --layer8d-header-grad-start: #2a1f1b;
    --layer8d-header-grad-mid: #241a16;
    --layer8d-header-grad-end: #1c1412;
    --layer8d-header-shadow: rgba(0, 0, 0, 0.3);

    /* Semantic Status Colors */
    --layer8d-green-light-bg: rgba(34, 197, 94, 0.2);
    --layer8d-green-light-text: #86efac;
    --layer8d-green-bg: rgba(34, 197, 94, 0.15);
    --layer8d-green-text: #6ee7b7;
    --layer8d-red-bg: rgba(239, 68, 68, 0.2);
    --layer8d-red-text: #fca5a5;
    --layer8d-yellow-bg: rgba(245, 158, 11, 0.2);
    --layer8d-yellow-text: #fcd34d;
    --layer8d-orange-bg: rgba(249, 115, 22, 0.2);
    --layer8d-orange-text: #fdba74;
    --layer8d-blue-bg: rgba(59, 130, 246, 0.15);
    --layer8d-blue-text: #93c5fd;
    --layer8d-indigo-bg: rgba(99, 102, 241, 0.2);
    --layer8d-indigo-text: #a5b4fc;
    --layer8d-gray-bg: rgba(107, 114, 128, 0.2);
    --layer8d-gray-text: #d1d5db;
    --layer8d-gray-light-bg: rgba(107, 114, 128, 0.1);
    --layer8d-gray-light-text: #9ca3af;
}

/* ============================================ */
/* FOREST THEME                                 */
/* ============================================ */

[data-theme="forest"] {
    /* Primary Colors */
    --layer8d-primary: #22c55e;
    --layer8d-primary-dark: #16a34a;
    --layer8d-primary-light: #86efac;

    /* Backgrounds */
    --layer8d-bg-white: #0f1a14;
    --layer8d-bg-light: #162920;
    --layer8d-bg-input: #1e3a2c;
    --layer8d-bg-card: #162920;
    --layer8d-bg-hover: #1e3a2c;

    /* Text */
    --layer8d-text-dark: #dcfce7;
    --layer8d-text-label: #ffffff;
    --layer8d-text-medium: #86efac;
    --layer8d-text-muted: #4ade80;
    --layer8d-text-light: #166534;

    /* Borders */
    --layer8d-border: #1e4a30;
    --layer8d-border-dark: #15803d;

    /* Shadows */
    --layer8d-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --layer8d-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --layer8d-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* Focus Ring */
    --layer8d-focus-ring: 0 0 0 3px rgba(34, 197, 94, 0.3);

    /* Status backgrounds */
    --layer8d-success-bg: rgba(34, 197, 94, 0.15);
    --layer8d-warning-bg: rgba(245, 158, 11, 0.15);
    --layer8d-error-bg: rgba(239, 68, 68, 0.15);
    --layer8d-info-bg: rgba(34, 197, 94, 0.12);

    /* Section Header */
    --layer8d-header-grad-start: #162920;
    --layer8d-header-grad-mid: #12231a;
    --layer8d-header-grad-end: #0f1a14;
    --layer8d-header-shadow: rgba(0, 0, 0, 0.3);

    /* Semantic Status Colors */
    --layer8d-green-light-bg: rgba(34, 197, 94, 0.2);
    --layer8d-green-light-text: #86efac;
    --layer8d-green-bg: rgba(34, 197, 94, 0.15);
    --layer8d-green-text: #6ee7b7;
    --layer8d-red-bg: rgba(239, 68, 68, 0.2);
    --layer8d-red-text: #fca5a5;
    --layer8d-yellow-bg: rgba(245, 158, 11, 0.2);
    --layer8d-yellow-text: #fcd34d;
    --layer8d-orange-bg: rgba(249, 115, 22, 0.2);
    --layer8d-orange-text: #fdba74;
    --layer8d-blue-bg: rgba(59, 130, 246, 0.15);
    --layer8d-blue-text: #93c5fd;
    --layer8d-indigo-bg: rgba(99, 102, 241, 0.2);
    --layer8d-indigo-text: #a5b4fc;
    --layer8d-gray-bg: rgba(107, 114, 128, 0.2);
    --layer8d-gray-text: #d1d5db;
    --layer8d-gray-light-bg: rgba(107, 114, 128, 0.1);
    --layer8d-gray-light-text: #9ca3af;
}

/* ============================================ */
/* SLATE THEME (light, blue-gray corporate)     */
/* ============================================ */

[data-theme="slate"] {
    /* Primary Colors */
    --layer8d-primary: #4299e1;
    --layer8d-primary-dark: #3182ce;
    --layer8d-primary-light: #90cdf4;

    /* Backgrounds */
    --layer8d-bg-white: #ffffff;
    --layer8d-bg-light: #edf2f7;
    --layer8d-bg-input: #e2e8f0;
    --layer8d-bg-card: #ffffff;
    --layer8d-bg-hover: #e2e8f0;

    /* Text */
    --layer8d-text-dark: #1a202c;
    --layer8d-text-label: #1a202c;
    --layer8d-text-medium: #4a5568;
    --layer8d-text-muted: #718096;
    --layer8d-text-light: #a0aec0;

    /* Borders */
    --layer8d-border: #cbd5e0;
    --layer8d-border-dark: #a0aec0;

    /* Shadows */
    --layer8d-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --layer8d-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --layer8d-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Focus Ring */
    --layer8d-focus-ring: 0 0 0 3px rgba(66, 153, 225, 0.25);

    /* Status backgrounds */
    --layer8d-success: #38a169;
    --layer8d-success-bg: rgba(56, 161, 105, 0.1);
    --layer8d-warning: #dd6b20;
    --layer8d-warning-bg: rgba(221, 107, 32, 0.1);
    --layer8d-error: #e53e3e;
    --layer8d-error-bg: rgba(229, 62, 62, 0.1);
    --layer8d-info: #4299e1;
    --layer8d-info-bg: rgba(66, 153, 225, 0.08);

    /* Section Header */
    --layer8d-header-grad-start: #edf2f7;
    --layer8d-header-grad-mid: #e2e8f0;
    --layer8d-header-grad-end: #cbd5e0;
    --layer8d-header-shadow: rgba(0, 0, 0, 0.06);

    /* Semantic Status Colors */
    --layer8d-green-light-bg: #c6f6d5;
    --layer8d-green-light-text: #22543d;
    --layer8d-green-bg: #c6f6d5;
    --layer8d-green-text: #276749;
    --layer8d-red-bg: #fed7d7;
    --layer8d-red-text: #9b2c2c;
    --layer8d-yellow-bg: #fefcbf;
    --layer8d-yellow-text: #975a16;
    --layer8d-orange-bg: #feebc8;
    --layer8d-orange-text: #9c4221;
    --layer8d-blue-bg: #bee3f8;
    --layer8d-blue-text: #2a4365;
    --layer8d-indigo-bg: #c3dafe;
    --layer8d-indigo-text: #3c366b;
    --layer8d-gray-bg: #e2e8f0;
    --layer8d-gray-text: #2d3748;
    --layer8d-gray-light-bg: #edf2f7;
    --layer8d-gray-light-text: #4a5568;
}

/* ============================================ */
/* DARK-S THEME (Shakudo-inspired dark)         */
/* ============================================ */

[data-theme="dark-s"] {
    /* Primary Colors — Shakudo orange */
    --layer8d-primary: #FF9E42;
    --layer8d-primary-dark: #E8872B;
    --layer8d-primary-light: #FFB870;

    /* Backgrounds — near-black neutrals */
    --layer8d-bg-white: #141414;
    --layer8d-bg-light: #1c1c1c;
    --layer8d-bg-input: #2a2a2a;
    --layer8d-bg-card: #1c1c1c;
    --layer8d-bg-hover: #2a2a2a;

    /* Text — warm whites and grays */
    --layer8d-text-dark: #f0ece8;
    --layer8d-text-label: #ffffff;
    --layer8d-text-medium: #a8a099;
    --layer8d-text-muted: #706860;
    --layer8d-text-light: #504840;

    /* Borders — warm dark grays */
    --layer8d-border: #332e2a;
    --layer8d-border-dark: #4a4340;

    /* Shadows */
    --layer8d-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --layer8d-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --layer8d-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    /* Focus Ring — orange glow */
    --layer8d-focus-ring: 0 0 0 3px rgba(255, 158, 66, 0.3);

    /* Status backgrounds */
    --layer8d-success-bg: rgba(34, 197, 94, 0.15);
    --layer8d-warning-bg: rgba(255, 158, 66, 0.15);
    --layer8d-error-bg: rgba(239, 68, 68, 0.15);
    --layer8d-info-bg: rgba(255, 158, 66, 0.12);

    /* Section Header — subtle warm gradient */
    --layer8d-header-grad-start: #1c1c1c;
    --layer8d-header-grad-mid: #191917;
    --layer8d-header-grad-end: #141414;
    --layer8d-header-shadow: rgba(0, 0, 0, 0.4);

    /* Semantic Status Colors */
    --layer8d-green-light-bg: rgba(34, 197, 94, 0.2);
    --layer8d-green-light-text: #86efac;
    --layer8d-green-bg: rgba(34, 197, 94, 0.15);
    --layer8d-green-text: #6ee7b7;
    --layer8d-red-bg: rgba(239, 68, 68, 0.2);
    --layer8d-red-text: #fca5a5;
    --layer8d-yellow-bg: rgba(245, 158, 11, 0.2);
    --layer8d-yellow-text: #fcd34d;
    --layer8d-orange-bg: rgba(255, 158, 66, 0.2);
    --layer8d-orange-text: #FFB870;
    --layer8d-blue-bg: rgba(59, 130, 246, 0.15);
    --layer8d-blue-text: #93c5fd;
    --layer8d-indigo-bg: rgba(99, 102, 241, 0.2);
    --layer8d-indigo-text: #a5b4fc;
    --layer8d-gray-bg: rgba(107, 114, 128, 0.2);
    --layer8d-gray-text: #d1d5db;
    --layer8d-gray-light-bg: rgba(107, 114, 128, 0.1);
    --layer8d-gray-light-text: #9ca3af;
}

/*
 * Theme Token Aliases
 *
 * Maps short CSS variable names (used by mobile components) to the
 * canonical --layer8d-* tokens defined in layer8d-theme.css.
 *
 * This file should be upstreamed to ../l8ui once stabilized.
 */
:root {
    /* Backgrounds */
    --bg-primary: var(--layer8d-bg-white);
    --bg-secondary: var(--layer8d-bg-light);
    --bg-tertiary: var(--layer8d-bg-input);
    --bg-card: var(--layer8d-bg-card, var(--layer8d-bg-white));

    /* Text */
    --text-primary: var(--layer8d-text-dark);
    --text-secondary: var(--layer8d-text-medium);
    --text-muted: var(--layer8d-text-muted);

    /* Borders */
    --border-light: var(--layer8d-border);
    --border-color: var(--layer8d-border);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;

    /* Font sizes */
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: var(--layer8d-radius-md, 8px);

    /* Shadows */
    --shadow-sm: var(--layer8d-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));

    /* Touch */
    --touch-target: 44px;

    /* Transitions */
    --transition-fast: 0.15s ease;

    /* Status aliases */
    --status-terminated: var(--layer8d-error);
    --status-terminated-bg: var(--layer8d-error-bg);
}

/* Dark mode aliases */
[data-theme="dark"] {
    --bg-primary: var(--layer8d-bg-white);
    --bg-secondary: var(--layer8d-bg-light);
    --bg-tertiary: var(--layer8d-bg-input);
    --bg-card: var(--layer8d-bg-card, var(--layer8d-bg-white));
    --text-primary: var(--layer8d-text-dark);
    --text-secondary: var(--layer8d-text-medium);
    --text-muted: var(--layer8d-text-muted);
    --border-light: var(--layer8d-border);
}