/* ============================================================
   AEMS Design Tokens v2.0 (v3.5.2 — WCAG contrast fix)
   Mint Emerald / Matte Navy System
   ARCTHEON — Autonomous Employee Management Suite
   ============================================================ */

/* ---- 1. Typography ---- */
:root {
    --font-sans:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.8125rem; /* 13px */
    --text-base: 0.9375rem; /* 15px */
    --text-md:   1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.375rem;  /* 22px */
    --text-2xl:  1.75rem;   /* 28px */
    --text-3xl:  2.25rem;   /* 36px */
    --text-4xl:  3rem;      /* 48px */
    --text-5xl:  3.75rem;   /* 60px */

    --leading-tight:   1.15;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-wider: 0.08em;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extrabold:800;
}

/* ---- 2. Spacing ---- */
:root {
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  28px;
    --space-8:  36px;
    --space-10: 48px;
    --space-12: 64px;
    --space-16: 80px;
    --space-20: 96px;
    --space-24: 120px;
    --space-32: 160px;
}

/* ---- 3. Radii ---- */
:root {
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
}

/* ---- 4. Elevation (shadows) ---- */
:root {
    /* Light mode shadows */
    --shadow-xs:   0 1px 2px  rgba(149,157,165,0.08);
    --shadow-sm:   0 2px 8px  rgba(149,157,165,0.10);
    --shadow-md:   0 8px 24px rgba(149,157,165,0.12);
    --shadow-lg:   0 16px 48px rgba(149,157,165,0.15);
    --shadow-xl:   0 24px 64px rgba(149,157,165,0.18);

    /* Dark mode shadows */
    --shadow-dark-xs:  0 1px 2px  rgba(0,0,0,0.30);
    --shadow-dark-sm:  0 2px 8px  rgba(0,0,0,0.35);
    --shadow-dark-md:  0 8px 24px rgba(0,0,0,0.40);
    --shadow-dark-lg:  0 16px 48px rgba(0,0,0,0.45);

    /* Card-specific shadows */
    --shadow-card:       var(--shadow-sm);
    --shadow-card-hover: 0 12px 32px rgba(149,157,165,0.18), 0 0 30px rgba(20,184,137,0.06);
    --shadow-modal:      var(--shadow-lg);
    --shadow-dropdown:   var(--shadow-md);
    --shadow-tooltip:    var(--shadow-sm);
}

/* ---- 5. Ambient Gradients ---- */
:root {
    --gradient-accent:    linear-gradient(135deg, var(--clr-accent), var(--clr-accent-hover));
    --gradient-accent-sub: linear-gradient(135deg, var(--clr-accent-tertiary), var(--clr-accent));
    --gradient-surface:   linear-gradient(180deg, var(--clr-surface) 0%, var(--clr-surface-raised) 100%);
    --gradient-hero:      radial-gradient(ellipse at top, var(--clr-accent-muted) 0%, transparent 60%);
    --gradient-card:      linear-gradient(145deg, var(--clr-surface) 0%, var(--clr-surface-raised) 100%);
    --gradient-shimmer:   linear-gradient(90deg, var(--clr-surface-raised) 25%, var(--clr-surface-hover) 50%, var(--clr-surface-raised) 75%);
}

/* ---- 6. Animation Tokens ---- */
:root {
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:    0.075s;
    --duration-normal:  0.25s;
    --duration-slow:    0.4s;
    --duration-slower:  0.6s;

    --transition-hover:  color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    --transition-focus:  border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
    --transition-toggle: background var(--duration-normal) var(--ease-spring), color var(--duration-normal) var(--ease-spring);
}

/* ---- 5. Z-Index ---- */
:root {
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-topbar:     300;
    --z-sidebar:    350;
    --z-drawer:     380;
    --z-modal:      400;
    --z-toast:      1100;
    --z-confirm:    1200;
    --z-tooltip:    700;
    --z-walkthrough: 10000;
}

/* ---- 6. Transitions (extended durations) ---- */
:root {
    --duration-75:   75ms;
    --duration-100:  100ms;
    --duration-150:  150ms;
    --duration-200:  200ms;
    --duration-250:  250ms;
    --duration-300:  300ms;
    --duration-400:  400ms;
    --duration-500:  500ms;
    --duration-600:  600ms;
}

/* ---- 7. Layout ---- */
:root {
    --topbar-h:    56px;
    --sidebar-w:   250px;
    --content-max: 1400px;
    --text-max:    720px;
}

/* ============================================================
   DARK THEME — Matte Navy-Charcoal (DEFAULT)
   MUST come BEFORE light theme so light can override
   ============================================================ */
:root {
    color-scheme: dark;
    background-color: var(--clr-bg);
    /* Backgrounds — Deep Void (matched from reference image pixels) */
    --clr-bg:           #0A0E14;
    --clr-bg-raised:    #101820;
    --clr-bg-alt:       var(--clr-bg-raised); /* alternate panel background — subtle raised surface */
    --clr-surface:      #141B26;
    --clr-surface-raised:#182028;
    --clr-surface-glass: rgba(10,14,20,0.92);
    --clr-surface-input:#101820;
    --clr-surface-hover:#1E2838;

    /* Text */
    --clr-text:           #E8ECF0;
    --clr-text-secondary: #8A9BB0;
    --clr-text-muted:     #7A8B9F;
    --clr-text-inverse:   #0A0E14;
    --clr-text-link:      #14B889;
    --clr-text-link-hover:#1DD49A;

    /* Accent — Teal Emerald (matched from reference image #189870 range) */
    --clr-accent:           #14B889;
    --rgb-accent:           20,184,137; /* RGB for rgba() usage */
    --clr-on-accent:        #0A0E14; /* Dark text/icons on green accent — WCAG AA 7.6:1 (white only 2.55:1) */
    --clr-accent-hover:     #1DD49A;
    --clr-accent-active:    #0F9E70;
    --clr-accent-secondary: #F5A623;  /* Warm amber — secondary accent for visual variety */
    --clr-accent-tertiary: #4A90D9;  /* Cool blue — tertiary accent for data viz */
    --clr-accent-muted:     rgba(20,184,137,0.12);
    --clr-accent-muted-strong: rgba(20,184,137,0.18);
    --clr-accent-glow:      rgba(20,184,137,0.06);
    --clr-accent-secondary-glow: rgba(245,166,35,0.08);
    --clr-accent-contrast:  #0A0E14;

    /* Borders */
    --clr-border:       #1E2838;
    --clr-border-hover: #2A3A50;
    --clr-card-border:  #1E2838;
    --clr-divider:      #1E2838;

    /* Status */
    --clr-success:  #14B889;
    --rgb-success:  20,184,137; /* RGB for rgba() usage */
    --clr-warning:  #F5A623;
    --rgb-warning:  245,166,35; /* RGB for rgba() usage */
    --clr-danger:   #E74C3C;
    --rgb-danger:   231,76,60; /* RGB for rgba() usage */
    --clr-info:     #4A90D9;
    --rgb-info:     74,144,217; /* RGB for rgba() usage */

    /* Surface RGB */
    --clr-surface-rgb: 20,27,38; /* RGB for rgba() usage — matches --clr-surface: #141B26 */

    /* Shadows — visible depth for premium card float */
    --shadow-xs:         0 1px 3px rgba(0,0,0,0.12);
    --shadow-sm:         0 2px 8px rgba(0,0,0,0.18);
    --shadow-md:         0 8px 24px rgba(0,0,0,0.25);
    --shadow-lg:         0 16px 48px rgba(0,0,0,0.32);
    --shadow-xl:         0 24px 64px rgba(0,0,0,0.40);

    /* Card-specific shadows — layered for depth */
    --shadow-card:       0 2px 8px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.10);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.12);
    --shadow-modal:      0 24px 64px rgba(0,0,0,0.40);
    --shadow-dropdown:   0 8px 24px rgba(0,0,0,0.24);
    --shadow-tooltip:    0 4px 12px rgba(0,0,0,0.20);

    /* Status backgrounds (dark) — parity with light theme so status tints render in dark mode */
    --clr-success-muted: rgba(20,184,137,0.16);
    --clr-success-soft:  rgba(20,184,137,0.10);
    --clr-warning-muted: rgba(245,166,35,0.16);
    --clr-warning-soft:  rgba(245,166,35,0.10);
    --clr-danger-muted:  rgba(231,76,60,0.16);
    --clr-danger-soft:   rgba(231,76,60,0.10);
    --clr-error:         #E74C3C;
    --clr-error-muted:   rgba(231,76,60,0.16);
    --clr-error-soft:    rgba(231,76,60,0.10);
    --clr-info-muted:    rgba(74,144,217,0.16);

    /* Icon fills (dark) — parity with light theme so SVG icon backplates render in dark mode */
    --icon-fill-bg:        var(--clr-surface);
    --icon-fill-bg-alt:    var(--clr-bg-raised);
    --icon-fill-light:     var(--clr-surface-raised);
    --icon-fill-mid:       var(--clr-surface-hover);
    --icon-fill-stroke:    var(--clr-card-border);
    --icon-fill-accent-alt:var(--clr-accent-secondary);

    /* Text / border variants (dark) */
    --clr-text-faint:        var(--clr-text-muted);
    --clr-border-active:     var(--clr-accent);
    --clr-card-border-hover: var(--clr-border-hover);

    /* Glass + glow + texture (dark) */
    --glass-border:      var(--clr-card-border);
    --clr-glass-border:   var(--clr-card-border);
    --glass-blur:        12px;
    --shadow-glow:       0 0 30px var(--clr-accent-glow);
    --clr-accent-glow-lg:rgba(20,184,137,0.20);
    --bg-grid:           radial-gradient(circle, rgba(255,255,255,0.015) 1px, transparent 1px);
    --texture-fabric:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23000' fill-opacity='0.02'/%3E%3Crect width='2' height='2' fill='%23000' fill-opacity='0.015'/%3E%3C/svg%3E");
    --bg-cross:          url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    /* Overlay + shadow (dark) */
    --clr-overlay:        rgba(0,0,0,0.65);
    --clr-shadow-modal:   0 20px 60px rgba(0,0,0,0.3);
    --clr-shadow-card:    0 4px 12px rgba(0,0,0,0.15);
}

/* ============================================================
   LIGHT THEME — Soft Off-White
   MUST come AFTER dark so it overrides when data-theme="light"
   ============================================================ */
:root[data-theme="light"] {
    color-scheme: light;
    /* Backgrounds — Cool Blue-Gray Off-White */
    --clr-bg:           #EDF0F4;
    --clr-bg-raised:    #F2F5F9;
    --clr-bg-alt:       var(--clr-bg-raised); /* alternate panel background — subtle raised surface */
    --clr-surface:      #F8FAFC;
    --clr-surface-raised:#EEF1F5;
    --clr-surface-glass: rgba(237,240,244,0.92);
    --clr-surface-input:#FFFFFF;
    --clr-surface-hover:#EEF3F8;

    /* Text */
    --clr-text:           #0F1419;
    --clr-text-secondary: #55636F;
    --clr-text-muted:     #5A6A78;
    --clr-text-inverse:   #FFFFFF;
    --clr-text-link:      #14B889;
    --clr-text-link-hover:#0F9E70;

    /* Accent — Teal Emerald (matched from reference image) */
    --clr-accent:           #14B889;
    --rgb-accent:           20,184,137; /* RGB for rgba() usage */
    --clr-on-accent:        #0A0E14; /* Dark text on green accent — WCAG AA 7.6:1 (white only 2.55:1) */
    --clr-accent-hover:     #0F9E70;
    --clr-accent-active:    #0B7A56;
    --clr-accent-secondary: #E8930F;  /* Warm amber — secondary accent (slightly darker for light mode legibility) */
    --clr-accent-tertiary: #2E7DD0;  /* Cool blue — tertiary accent */
    --clr-accent-muted:     #E8F7F2;
    --clr-accent-muted-strong: rgba(20,184,137,0.10);
    --clr-accent-glow:      rgba(20,184,137,0.045);
    --clr-accent-secondary-glow: rgba(245,166,35,0.06);
    --clr-accent-contrast:  #0A0E14; /* Dark text on accent bg — WCAG AA compliant in light theme */

    /* Borders */
    --clr-border:       #B0B8C2;
    --clr-border-hover: #8A929E;
    --clr-card-border:  #C0C8D2;
    --clr-divider:      #C0C8D2;

    /* Status */
    --clr-success:  #14B889;
    --rgb-success:  20,184,137; /* RGB for rgba() usage */
    --clr-warning:  #F5A623;
    --rgb-warning:  245,166,35; /* RGB for rgba() usage */
    --clr-danger:   #2563EB;
    --rgb-danger:   37,99,235; /* RGB for rgba() usage */
    --clr-info:     #4A90D9;
    --rgb-info:     74,144,217; /* RGB for rgba() usage */

    /* Surface RGB */
    --clr-surface-rgb: 255,255,255; /* RGB for rgba() usage */

    /* Status backgrounds */
    --clr-success-muted: rgba(20,184,137,0.10);
    --clr-success-soft: rgba(20,184,137,0.06);
    --clr-warning:  #F5A623;
    --clr-warning-text: #B8740A;
    --clr-warning-muted: rgba(245,166,35,0.10);
    --clr-warning-soft: rgba(245,166,35,0.06);
    --clr-danger:   #2563EB;
    --clr-danger-muted: rgba(37,99,235,0.10);
    --clr-danger-soft: rgba(37,99,235,0.06);
    --clr-error:    #2563EB;
    --clr-error-muted: rgba(37,99,235,0.10);
    --clr-error-soft: rgba(37,99,235,0.06);
    --clr-info:     #4A90D9;
    --rgb-info:     74,144,217; /* RGB for rgba() usage */
    --clr-info-muted: rgba(74,144,217,0.10);

    /* Icon fills */
    --icon-fill-bg:      var(--clr-surface);
    --icon-fill-bg-alt:  var(--clr-bg-raised);
    --icon-fill-light:   var(--clr-bg);
    --icon-fill-mid:     var(--clr-surface-raised);
    --icon-fill-stroke:  var(--clr-card-border);
    --icon-fill-accent-alt: var(--clr-accent-secondary);

    /* Text variants */
    --clr-text-faint: var(--clr-text-muted);

    /* Border variants */
    --clr-border-active: var(--clr-accent);
    --clr-card-border-hover: var(--clr-border-hover);

    /* Glass effect */
    --glass-border: var(--clr-card-border);
    --clr-glass-border: var(--clr-card-border);
    --glass-blur: 12px;

    /* Glow */
    --shadow-glow: 0 0 30px var(--clr-accent-glow);
    --clr-accent-glow-lg: rgba(20,184,137,0.15);

    /* Texture — visible but subtle on light backgrounds */
    --bg-grid: radial-gradient(circle, rgba(37,99,235,0.05) 1px, transparent 1px);
    --texture-fabric: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%232563EB' fill-opacity='0.025'/%3E%3Crect width='2' height='2' fill='%232563EB' fill-opacity='0.015'/%3E%3C/svg%3E");
    --bg-cross: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563EB' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    /* Shadows */
    --shadow-xs:   0 1px 3px  rgba(0,0,0,0.08);
    --shadow-sm:   0 2px 8px  rgba(0,0,0,0.10);
    --shadow-md:   0 8px 20px rgba(0,0,0,0.14);
    --shadow-lg:   0 16px 40px rgba(0,0,0,0.18);
    --shadow-xl:   0 24px 56px rgba(0,0,0,0.22);

    /* Card-specific shadows */
    --shadow-card:       0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 6px 20px rgba(0,0,0,0.10), 0 0 24px rgba(20,184,137,0.08);
    --shadow-modal:      0 12px 40px rgba(0,0,0,0.14);
    --shadow-dropdown:   0 4px 14px rgba(0,0,0,0.10);
    --shadow-tooltip:    0 2px 8px rgba(0,0,0,0.08);

    /* Overlay + shadow (light) */
    --clr-overlay:        rgba(0,0,0,0.55);
    --clr-shadow-modal:   0 20px 60px rgba(0,0,0,0.2);
    --clr-shadow-card:    0 4px 12px rgba(0,0,0,0.08);
}

/* C-007: Theme parity comment — both themes define identical variable sets */

/* ---- FOUC PREVENTION (moved from aems.css to ensure it loads in <head>) ---- */
/* Hide entire page until shell is ready. app-shell.js removes the
   .aems-preload class from <html> after building sidebar/topbar/layout. */
html.aems-preload body { display: none !important; }