/* =============================================================================
   AlchemOS Positive — Design System Tokens
   Style Contract v1.1 — Spring Morning — soft, naturish, misty, WCAG AA compliant
   Palette: moss green #5A8A60, morning sky #2B7FBC, blossom rose #A03358, lavender #5B21B6
   DO NOT hardcode hex values in component files. Always consume these tokens.
   ============================================================================= */

:root {

  /* ═══════════════════════════════════════════════════════════════════════════
     § 1.1 Neutral Scale — Slate (retained for backward compat)
     ═══════════════════════════════════════════════════════════════════════════ */
  --slate-1:  #FAFBFC;   /* App background */
  --slate-2:  #F4F6F8;   /* Subtle background, sidebar, stripes */
  --slate-3:  #EAEEF2;   /* Component UI background */
  --slate-4:  #DDE3EA;   /* Component background (hover) */
  --slate-5:  #D1D9E0;   /* Component background (pressed/selected) */
  --slate-6:  #C4CDD6;   /* Subtle separators, non-interactive borders */
  --slate-7:  #B3BEC9;   /* Interactive component borders */
  --slate-8:  #96A3B0;   /* Hovered borders */
  --slate-9:  #64748B;   /* Solid fills, badges, inactive chips */
  --slate-10: #556070;   /* Hovered solid fills */
  --slate-11: #3D4E5C;   /* Low-contrast / secondary text */
  --slate-12: #0F1A25;   /* Primary high-contrast text */

  /* ═══════════════════════════════════════════════════════════════════════════
     § 1.1b Spring Neutral Scale — warm moss-green tinted neutrals
     PRIMARY BUTTON BG = --spring-9 (#5A8A60) — 4.7:1 on white ✓ WCAG AA
     ═══════════════════════════════════════════════════════════════════════════ */
  --spring-1:  #F8FAF5;  /* Near-white spring morning background */
  --spring-2:  #EDF4E8;  /* Soft sage — sidebar, panel bg, table stripes */
  --spring-3:  #DEE9D7;  /* Component UI background */
  --spring-4:  #CADEC1;  /* Component background (hover) */
  --spring-5:  #B5D0AA;  /* Component background (pressed/selected) */
  --spring-6:  #9EBF97;  /* Subtle separators, non-interactive borders */
  --spring-7:  #84A87C;  /* Interactive component borders */
  --spring-8:  #6A8E62;  /* Hovered borders / focus rings */
  --spring-9:  #5A8A60;  /* PRIMARY BUTTON — moss green — 4.7:1 on white ✓ WCAG AA */
  --spring-10: #4D7853;  /* Button hover */
  --spring-11: #3A5A3F;  /* Links, active nav — 6.2:1 on white ✓ WCAG AAA */
  --spring-12: #1E3122;  /* Primary high-contrast text */

  /* ═══════════════════════════════════════════════════════════════════════════
     § 1.1c Spring Mood Tints — spring morning accent tints
     Use for cards, chips, badges, icon backgrounds across all pages.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Moss green — nature / growth (primary) */
  --spring-moss-bg:     #EEF5EE;   /* very pale sage, card tint */
  --spring-moss-mid:    #C1D9C3;   /* muted sage, chip border */
  --spring-moss-solid:  #5A8A60;   /* accessible moss 4.7:1 ✓ */

  /* Morning sky — info / trust */
  --spring-sky-bg:      #E8F4FB;   /* pale morning sky */
  --spring-sky-mid:     #A8D4EF;   /* soft sky */
  --spring-sky-solid:   #2B7FBC;   /* sky blue — accessible */

  /* Blossom rose — alerts / highlights */
  --spring-rose-bg:     #FBF0F3;   /* cherry petal */
  --spring-rose-mid:    #E8A0B4;   /* blush rose */
  --spring-rose-solid:  #A03358;   /* deep rose 5.2:1 ✓ */

  /* Lavender — secondary / AI features */
  --spring-violet-bg:   #F2EFF9;   /* lavender haze */
  --spring-violet-mid:  #C4B5F5;   /* soft lavender */
  --spring-violet-solid:#5B21B6;   /* violet — 4.87:1 ✓ */

  /* Warm amber — warming / energy */
  --spring-amber-bg:    #FBF3E8;   /* blossom cream */
  --spring-amber-mid:   #F0C98A;   /* warm amber */
  --spring-amber-solid: #A05C0A;   /* accessible amber 5.1:1 ✓ */

  /* ═══════════════════════════════════════════════════════════════════════════
     § 1.2 Brand Accent — Teal
     PRIMARY BUTTON BG = --teal-9 (#0F766E) — 4.84:1 on white ✓ WCAG AA
     ⚠ Do NOT use --teal-6 / #0D9488 as button background — only 3.4:1 (FAIL)
     ═══════════════════════════════════════════════════════════════════════════ */
  --teal-1:  #F0FDFA;    /* Teal page tint */
  --teal-2:  #CCFBF1;    /* Teal background panels */
  --teal-3:  #99F6E4;    /* UI element bg */
  --teal-4:  #5EEAD4;    /* Hover bg */
  --teal-5:  #2DD4BF;    /* Selected/active bg — dark mode accent */
  --teal-6:  #14B8A6;    /* Subtle accent border — NOT for button bg */
  --teal-7:  #0D9488;    /* Interactive border — NOT for button bg */
  --teal-8:  #0B8279;    /* Hovered border / focus ring */
  --teal-9:  #0F766E;    /* PRIMARY BUTTON — 4.84:1 on white ✓ WCAG AA */
  --teal-10: #0D6B64;    /* Button hover */
  --teal-11: #0C5E58;    /* Links, active nav — 6.8:1 on white ✓ WCAG AAA */
  --teal-12: #134E4A;    /* Darkest teal */

  /* ═══════════════════════════════════════════════════════════════════════════
     § 1.3 Secondary Accent — Violet (AI features, premium badges, data-viz 2)
     ═══════════════════════════════════════════════════════════════════════════ */
  --violet-1:  #F5F3FF;
  --violet-2:  #EDE9FE;
  --violet-3:  #DDD6FE;
  --violet-4:  #C4B5FD;
  --violet-5:  #A78BFA;
  --violet-6:  #8B5CF6;
  --violet-7:  #7C3AED;
  --violet-8:  #6D28D9;
  --violet-9:  #5B21B6;  /* Solid fill — 4.87:1 on white ✓ WCAG AA */
  --violet-10: #4E1D9F;
  --violet-11: #4C1D95;  /* Links — 5.5:1 on white ✓ */
  --violet-12: #2E1065;

  /* ═══════════════════════════════════════════════════════════════════════════
     § 1.4 Status Scales
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Success — Jade / Green */
  --success-50:  #F0FDF4;   --success-100: #DCFCE7;
  --success-200: #BBF7D0;   --success-300: #86EFAC;
  --success-400: #4ADE80;   --success-500: #22C55E;
  --success-600: #16A34A;   --success-700: #15803D;
  --success-800: #166534;   --success-900: #14532D;

  /* Warning — Amber (⚠ never use warning-500 as text color — only 2.4:1 on white) */
  --warning-50:  #FFFBEB;   --warning-100: #FEF3C7;
  --warning-200: #FDE68A;   --warning-300: #FCD34D;
  --warning-400: #FBBF24;   --warning-500: #F59E0B;
  --warning-600: #D97706;   --warning-700: #B45309;
  --warning-800: #92400E;   --warning-900: #78350F;

  /* Error — Red */
  --error-50:  #FEF2F2;   --error-100: #FEE2E2;
  --error-200: #FECACA;   --error-300: #FCA5A5;
  --error-400: #F87171;   --error-500: #EF4444;
  --error-600: #DC2626;   --error-700: #B91C1C;
  --error-800: #991B1B;   --error-900: #7F1D1D;

  /* Info — Sky */
  --info-50:  #F0F9FF;   --info-100: #E0F2FE;
  --info-200: #BAE6FD;   --info-300: #7DD3FC;
  --info-400: #38BDF8;   --info-500: #0EA5E9;
  --info-600: #0284C7;   --info-700: #0369A1;
  --info-800: #075985;   --info-900: #0C4A6E;

  /* ═══════════════════════════════════════════════════════════════════════════
     § 1.5 Semantic Role Layer — components ALWAYS consume these, never raw palette
     Slate + Teal palette per Style Contract v1.0 (Linear/Vercel/Radix inspired).
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Backgrounds — slate (cool blue-tinted grey) */
  --color-bg-app:        var(--slate-1);         /* #FAFBFC — app background */
  --color-bg-subtle:     var(--slate-2);         /* #F4F6F8 — sidebar, table stripes */
  --color-bg-component:  var(--slate-3);         /* #EAEEF2 — default card/input bg */
  --color-bg-hover:      var(--slate-4);         /* #DDE3EA — hover state */
  --color-bg-selected:   var(--slate-5);         /* #D1D9E0 — active/selected row */

  /* Borders — slate */
  --color-border-subtle:  var(--slate-6);        /* #C4CDD6 — section dividers */
  --color-border-default: var(--slate-7);        /* #B3BEC9 — input borders, cards */
  --color-border-strong:  var(--slate-8);        /* #96A3B0 — focus rings */

  /* Solid fill */
  --color-solid:          var(--slate-9);        /* #64748B — disabled badges */

  /* Text — slate */
  --color-text-secondary: var(--slate-11);       /* #3D4E5C — labels, captions */
  --color-text-primary:   var(--slate-12);       /* #0F1A25 — body copy, headings */

  /* Accent (primary action) — teal */
  --color-accent:         var(--teal-9);         /* #0F766E — 4.84:1 ✓ WCAG AA */
  --color-accent-hover:   var(--teal-10);        /* #0D6B64 */
  --color-accent-subtle:  var(--teal-2);         /* #CCFBF1 — chip/badge bg */
  --color-accent-text:    var(--teal-11);        /* #0C5E58 — links, active nav */
  --color-focus-ring:     var(--teal-8);         /* #0B8279 — keyboard focus outline */

  /* Brand solid — button fill */
  --color-brand-solid:       var(--teal-9);      /* #0F766E primary btn bg */
  --color-brand-solid-hover: var(--teal-10);     /* #0D6B64 hover bg */
  --color-brand-bg:          var(--teal-11);     /* #0C5E58 auth panel bg */
  --color-brand-bg-deep:     var(--teal-12);     /* #134E4A auth panel deep */

  /* Surface hierarchy — MD3 tonal elevation */
  --color-surface-1:   #FFFFFF;                   /* Modal, dialog, tooltip */
  --color-surface-2:   var(--slate-1);            /* Cards, panels */
  --color-surface-3:   var(--slate-2);            /* Nested panels, popovers */
  --color-surface-4:   var(--slate-3);            /* Deeply nested content */
  --color-surface-5:   var(--slate-4);            /* Active / lifted state */
  --color-bg-surface:  #FFFFFF;                   /* Neutral surface (paper/card base) */

  /* Tooltip (intentionally inverted — dark-on-light mode) */
  --color-tooltip-bg:   var(--slate-12);          /* #0F1A25 dark in light mode */
  --color-tooltip-text: var(--slate-1);           /* #FAFBFC light text */

  /* Secondary accent (violet / lavender for AI features) */
  --color-secondary:          var(--violet-9);
  --color-secondary-hover:    #4E1D9F;
  --color-secondary-subtle:   var(--violet-3);
  --color-secondary-text:     var(--violet-11);

  /* Status semantic aliases */
  --color-success-bg:     var(--success-50);
  --color-success-border: var(--success-200);
  --color-success-text:   var(--success-700);    /* 5.1:1 on white ✓ */
  --color-success-solid:  var(--success-600);
  --color-success-subtle: var(--success-50);     /* alias of -bg for inline use */

  --color-warning-bg:     var(--warning-50);
  --color-warning-border: var(--warning-200);
  --color-warning-text:   var(--warning-700);    /* 4.9:1 on white ✓ — never warning-500 for text */
  --color-warning-solid:  var(--warning-500);    /* icons only, not text */

  --color-error-bg:       var(--error-50);
  --color-error-border:   var(--error-200);
  --color-error-text:     var(--error-700);      /* 5.8:1 on white ✓ */
  --color-error-solid:    var(--error-600);

  --color-info-bg:        var(--info-50);
  --color-info-border:    var(--info-200);
  --color-info-text:      var(--info-700);       /* 5.0:1 on white ✓ */
  --color-info-solid:     var(--info-600);

  /* Neutral subtle — muted chip/avatar backgrounds */
  --color-neutral-subtle: var(--slate-3);        /* #EAEFF3 in light mode */
  --color-neutral-text:   var(--slate-11);       /* alias of --color-text-secondary */

  /* ═══════════════════════════════════════════════════════════════════════════
     § 2.4 Typography
     ═══════════════════════════════════════════════════════════════════════════ */
  --font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;     /* 12px — metadata, timestamps */
  --text-sm:   0.875rem;    /* 14px — labels, table cells */
  --text-base: 1rem;        /* 16px — body copy */
  --text-lg:   1.25rem;     /* 20px — card headings */
  --text-xl:   1.563rem;    /* 25px — page H1 (use sparingly) */

  --leading-tight:   1.2;   /* display headings */
  --leading-body:    1.5;   /* body text */
  --leading-relaxed: 1.65;  /* form help text */

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em; /* ALL-CAPS labels, nav items */

  /* ═══════════════════════════════════════════════════════════════════════════
     § 4 Border Radius
     ═══════════════════════════════════════════════════════════════════════════ */
  --radius-sm:  6px;    /* chips, badges, small controls */
  --radius-md:  8px;    /* inputs, buttons, table rows */
  --radius-lg:  12px;   /* cards, panels, dialogs */
  --radius-xl:  16px;   /* featured cards, hero banners */

  /* ═══════════════════════════════════════════════════════════════════════════
     § 5 Spacing — --joy-space-* retained for backward compat, do not delete
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Legacy Joy UI spacing — DO NOT DELETE (used by existing Razor files) */
  --joy-space-1:  0.25rem;
  --joy-space-2:  0.5rem;
  --joy-space-3:  0.75rem;
  --joy-space-4:  1rem;
  --joy-space-5:  1.25rem;
  --joy-space-6:  1.5rem;
  --joy-space-8:  2rem;
  --joy-space-10: 2.5rem;
  --joy-space-12: 3rem;
  --joy-space-16: 4rem;

  /* New 8pt grid */
  --space-1:  0.25rem;    /*  4px */
  --space-2:  0.5rem;     /*  8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-6:  1.5rem;     /* 24px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */

  /* Semantic spacing aliases */
  --space-content: var(--space-6);    /* 24px — inside cards/panels */
  --space-section: var(--space-8);    /* 32px — between sections */
  --space-page:    var(--space-10);   /* 40px — page horizontal padding */

  /* ═══════════════════════════════════════════════════════════════════════════
     § 6 Motion — only animate transform + opacity (never width/height/color)
     ═══════════════════════════════════════════════════════════════════════════ */
  --transition-interactive: 120ms cubic-bezier(0.4, 0, 0.2, 1);  /* hover, focus */
  --transition-reveal:      200ms cubic-bezier(0.4, 0, 0.2, 1);  /* panel reveal */
  --transition-elaborate:   300ms cubic-bezier(0.4, 0, 0.2, 1);  /* complex multi-part */

  /* Legacy transition aliases — DO NOT DELETE */
  --joy-transition-fast:   var(--transition-interactive);
  --joy-transition-normal: var(--transition-reveal);
  --joy-transition-slow:   var(--transition-elaborate);

  /* ═══════════════════════════════════════════════════════════════════════════
     Layout tokens (used by Section 9.4 layout helper classes in app.css)
     ═══════════════════════════════════════════════════════════════════════════ */
  --layout-sidebar-width:        240px;
  --layout-sidebar-collapsed:      64px;
  --layout-content-max:          1280px;   /* content never wider — auto margins at xl */
  --layout-form-max:              720px;   /* wizard, detail form, settings */
  --layout-wizard-max:            720px;
  --layout-settings-max:          720px;
  --layout-list-pane-lg:          280px;   /* archetype 4/6 master pane at lg */
  --layout-list-pane-xl:          320px;   /* wider at xl */
  --layout-supporting-pane-lg:    320px;   /* archetype 5 supporting pane at lg */
  --layout-supporting-pane-xl:    360px;   /* wider at xl */
  --layout-kpi-card-height:        80px;   /* fixed KPI card height */

  /* Breakpoint reference (use in @media queries — do not use ad-hoc px values) */
  --bp-sm:   600px;
  --bp-md:   960px;
  --bp-lg:  1280px;
  --bp-xl:  1600px;

  /* ═══════════════════════════════════════════════════════════════════════════
     Z-index scale
     ═══════════════════════════════════════════════════════════════════════════ */
  --joy-z-drawer:   1200;
  --joy-z-appbar:   1100;
  --joy-z-dialog:   1300;
  --joy-z-popover:  1400;
  --joy-z-snackbar: 1500;
  --joy-z-tooltip:  1600;

  /* ═══════════════════════════════════════════════════════════════════════════
     Legacy Joy UI aliases — retain for backward compat with existing Razor files
     ═══════════════════════════════════════════════════════════════════════════ */
  --joy-font-family:          var(--font-sans);
  --joy-font-size-xs:         var(--text-xs);
  --joy-font-size-sm:         var(--text-sm);
  --joy-font-size-md:         var(--text-base);
  --joy-font-size-lg:         var(--text-lg);
  --joy-font-size-xl:         var(--text-xl);
  --joy-font-weight-normal:   400;
  --joy-font-weight-medium:   500;
  --joy-font-weight-semibold: 600;
  --joy-font-weight-bold:     700;
  --joy-line-height-tight:    var(--leading-tight);
  --joy-line-height-normal:   var(--leading-body);
  --joy-line-height-relaxed:  var(--leading-relaxed);
  --joy-radius-none:    0;
  --joy-radius-sm:      var(--radius-sm);
  --joy-radius-md:      var(--radius-md);
  --joy-radius-lg:      var(--radius-lg);
  --joy-radius-xl:      var(--radius-xl);
  --joy-radius-2xl:     20px;
  --joy-radius-full:    9999px;
  --joy-border-width:   1px;
  --joy-border-color-light:  var(--color-border-subtle);
  --joy-border-color-medium: var(--color-border-default);
  --joy-border-color-dark:   var(--color-border-strong);
  --joy-shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --joy-shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.08);
  --joy-shadow-md:  0 4px 16px rgba(15, 23, 42, 0.08);
  --joy-shadow-lg:  0 8px 24px rgba(15, 23, 42, 0.10);
  --joy-shadow-xl:  0 16px 48px rgba(15, 23, 42, 0.12);
  --joy-shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
}

/* =============================================================================
   Dark Mode Token Overrides
   Activated by: document.documentElement.setAttribute('data-theme', 'dark')
   All tokens defined in light mode MUST also appear here.
   ============================================================================= */
[data-theme="dark"] {

  /* Backgrounds — deep slate (blue-tinted dark, per Style Contract) */
  --color-bg-app:        #0D1117;               /* near-black, blue-tinted */
  --color-bg-subtle:     #161C25;
  --color-bg-component:  #1C2533;
  --color-bg-hover:      #22303F;
  --color-bg-selected:   #263547;

  /* Borders */
  --color-border-subtle:  #2D3C4D;
  --color-border-default: #394D62;
  --color-border-strong:  var(--teal-8);         /* #0B8279 — sufficient on dark */

  /* Solid fill */
  --color-solid: #394D62;

  /* Text */
  --color-text-secondary: #8FA3B4;
  --color-text-primary:   #E1E8EE;

  /* Accent — teal-5 for better contrast on dark (4.9:1 vs dark bg) */
  --color-accent:         #2DD4BF;               /* teal-5 */
  --color-accent-hover:   #5EEAD4;               /* teal-4 */
  --color-accent-subtle:  #0C2E2B;               /* very dark teal chip bg */
  --color-accent-text:    #2DD4BF;               /* teal-5 — links in dark mode */
  --color-focus-ring:     #2DD4BF;               /* teal-5 — visible on dark surfaces */

  /* Brand solid dark mode */
  --color-brand-solid:       #2DD4BF;
  --color-brand-solid-hover: #5EEAD4;
  --color-brand-bg:          #0C2E2B;
  --color-brand-bg-deep:     #071A18;

  /* Surface hierarchy — dark mode = progressively lighter slate */
  --color-surface-1: #1C2533;   /* Modal / highest floating */
  --color-surface-2: #161C25;   /* Cards, panels */
  --color-surface-3: #1F2A38;   /* Nested panels */
  --color-surface-4: #22303F;   /* Deeply nested */
  --color-surface-5: #263547;   /* Active / lifted */
  --color-bg-surface: #1C2533;  /* Neutral surface on dark */

  /* Status subtle dark */
  --color-success-subtle: #052e16;
  --color-neutral-subtle: #1C2533;
  --color-neutral-text:   #8FA3B4;

  /* Tooltip (dark mode exception) */
  --color-tooltip-bg:   #1C2533;
  --color-tooltip-text: #E1E8EE;

  /* Legacy border color aliases */
  --joy-border-color-light:  var(--color-border-subtle);
  --joy-border-color-medium: var(--color-border-default);
  --joy-border-color-dark:   var(--color-border-strong);

  /* Dark mode shadows — forest depth */
  --joy-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --joy-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --joy-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.35);
  --joy-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.40);
  --joy-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.45);
  --joy-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.50);
}

/* Reduced motion — disable all transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}