/* ==========================================================================
   Design Tokens (CSS Custom Properties)
   Theme-invariant, Dark Mode (Default), and Light Mode palettes.
   ========================================================================== */

/* Theme-invariant token: text painted on top of a solid accent/positive
   fill (CTA buttons, notification badges) needs to stay white in BOTH
   themes, since those fills don't flip lightness the way canvas/surface
   do — unlike --c-fg-max, which correctly inverts for body text. Defined
   once on bare :root so neither [data-theme="dark"] nor
   [data-theme="light"] need to repeat it. */
:root {
  --c-on-solid: 255 255 255;
  --c-action: 15 118 110;       /* Contrast-safe white CTA text, #0F766E */
  --c-action-hover: 17 94 89;
  --radius-control: 0.625rem;
  --radius-panel: 1rem;
}

/* Motion tokens (manual-assisted-appraisal dashboard flow). Transform/opacity only. */
:root {
  --motion-duration-fast: 160ms;
  --motion-duration-base: 280ms;
  --motion-duration-slow: 340ms;
  --motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-stagger: 70ms;
  --motion-distance: 14px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-distance: 0px;
    --motion-duration-base: 120ms;
    --motion-duration-slow: 120ms;
    --motion-stagger: 0ms;
  }
}

/* Neutral theme tokens (PR1 of web-light-mode). Dark values only for now;
   byte-identical to the previous hardcoded slate utilities. A
   [data-theme="light"] block lands in a follow-up PR. */
:root,
[data-theme="dark"] {
  --c-canvas: 11 18 21;        /* #0B1215 */
  --c-chrome: 18 28 32;        /* #121C20 */
  --c-surface: 18 28 32;       /* #121C20 - Panels */
  --c-elevated: 18 28 32;      /* #121C20 - Cards */
  --c-control: 26 38 43;       /* #1A262B - Inputs and table headers */
  --c-elevated-hover: 26 38 43;
  --c-line: 36 52 58;          /* #24343A */
  --c-line-strong: 55 76 85;
  --c-cta: 20 184 166;
  --c-cta-hover: 45 212 191;
  --c-on-cta: 4 47 46;
  --c-subject: 251 191 36;
  --c-on-subject: 15 23 42;
  --c-selection: rgb(45 212 191 / 0.08);
  --c-line-hover: 85 96 108;
  --c-line-focus: 20 184 166;   /* #14B8A6 - Deep Teal Petrol focus */
  --c-fg-max: 230 237 240;     /* #E6EDF0 */
  --c-fg-strong: 230 237 240;
  --c-fg: 203 215 221;
  --c-fg-soft: 174 190 198;
  --c-fg-muted: 138 155 163;   /* #8A9BA3 */
  --c-fg-faint: 138 155 163;   /* Readable placeholders on all surfaces */
  --c-scrim: 0 0 0;
  --c-inverted: 255 255 255;
  --c-inverted-hover: 241 245 249;
  --c-inverted-fg: 24 27 31;

  /* Accent theme tokens (Deep Teal Petrol #14B8A6) */
  --c-accent-fg-max: 204 251 241;       /* teal-100 */
  --c-accent-fg-strong: 153 246 228;    /* teal-200 */
  --c-accent-fg: 94 234 212;           /* teal-300 */
  --c-accent-icon: 45 212 191;          /* teal-400 */
  --c-accent-solid: 20 184 166;         /* teal-500 #14B8A6 */
  --c-accent-solid-strong: 13 148 136;   /* teal-600 #0D9488 */
  --c-accent-wash-400-20: rgb(45 212 191 / 0.2);
  --c-accent-wash-400-30: rgb(45 212 191 / 0.3);
  --c-accent-wash-500-10: rgb(20 184 166 / 0.1);
  --c-accent-wash-500-15: rgb(20 184 166 / 0.15);
  --c-accent-wash-500-20: rgb(20 184 166 / 0.2);
  --c-accent-wash-500-30: rgb(20 184 166 / 0.3);
  --c-accent-wash-500-40: rgb(20 184 166 / 0.4);
  --c-accent-wash-500-50: rgb(20 184 166 / 0.5);
  --c-accent-wash-500-80: rgb(20 184 166 / 0.8);
  --c-accent-wash-600-20: rgb(13 148 136 / 0.2);
  --c-accent-wash-600-30: rgb(13 148 136 / 0.3);
  --c-accent-wash-600-40: rgb(13 148 136 / 0.4);
  --c-accent-wash-600-50: rgb(13 148 136 / 0.5);
  --c-accent-wash-800-50: rgb(17 94 89 / 0.5);
  --c-accent-wash-900-90: rgb(19 78 74 / 0.9);
  --c-accent-wash-950-20: rgb(4 47 46 / 0.2);
  --c-accent-wash-950-40: rgb(4 47 46 / 0.4);
  --c-accent-wash-950-80: rgb(4 47 46 / 0.8);

  --c-positive-fg: 110 231 183;          /* emerald-300 */
  --c-positive-icon: 52 211 153;         /* emerald-400 */
  --c-positive-solid: 16 185 129;        /* emerald-500 */
  --c-positive-solid-strong: 5 150 105;  /* emerald-600 */
  --c-positive-deep: 6 78 59;            /* emerald-900 */
  --c-positive-deepest: 2 44 34;         /* emerald-950 */
  --c-positive-wash-500-10: rgb(16 185 129 / 0.1);
  --c-positive-wash-500-15: rgb(16 185 129 / 0.15);
  --c-positive-wash-500-20: rgb(16 185 129 / 0.2);
  --c-positive-wash-500-30: rgb(16 185 129 / 0.3);
  --c-positive-wash-500-40: rgb(16 185 129 / 0.4);
  --c-positive-wash-500-50: rgb(16 185 129 / 0.5);
  --c-positive-wash-950-80: rgb(2 44 34 / 0.8);
  --c-positive-wash-950-90: rgb(2 44 34 / 0.9);

  --c-warning-fg: 252 211 77;            /* amber-300 */
  --c-warning-icon: 251 191 36;          /* amber-400 */
  --c-warning-solid: 245 158 11;         /* amber-500 */
  --c-warning-deep: 120 53 15;           /* amber-900 */
  --c-warning-wash-400-10: rgb(251 191 36 / 0.1);
  --c-warning-wash-400-20: rgb(251 191 36 / 0.2);
  --c-warning-wash-500-10: rgb(245 158 11 / 0.1);
  --c-warning-wash-500-15: rgb(245 158 11 / 0.15);
  --c-warning-wash-500-20: rgb(245 158 11 / 0.2);
  --c-warning-wash-500-30: rgb(245 158 11 / 0.3);
  --c-warning-wash-500-40: rgb(245 158 11 / 0.4);
  --c-warning-wash-500-50: rgb(245 158 11 / 0.5);
  --c-warning-wash-950-80: rgb(69 26 3 / 0.8);   /* amber-950 */
  --c-warning-wash-950-90: rgb(69 26 3 / 0.9);

  --c-danger-fg: 253 164 175;            /* rose-300 */
  --c-danger-icon: 251 113 133;          /* rose-400 */
  --c-danger-solid: 244 63 94;           /* rose-500 */
  --c-danger-deepest: 76 5 25;           /* rose-950 */
  --c-danger-wash-500-10: rgb(244 63 94 / 0.1);
  --c-danger-wash-500-15: rgb(244 63 94 / 0.15);
  --c-danger-wash-500-20: rgb(244 63 94 / 0.2);
  --c-danger-wash-500-30: rgb(244 63 94 / 0.3);
  --c-danger-wash-500-40: rgb(244 63 94 / 0.4);
  --c-danger-wash-950-60: rgb(76 5 25 / 0.6);
  --c-danger-wash-950-80: rgb(76 5 25 / 0.8);

  /* Decorative-only hue tokens (NOT state tokens). Same dark values as
     positive/warning/danger's emerald/amber/rose hues, decoupled
     semantically for category icons, chart legends, and brand badges
     that carry no success/warning/error meaning. */
  --c-emerald-fg: 110 231 183;           /* emerald-300 */
  --c-emerald-icon: 52 211 153;          /* emerald-400 */
  --c-emerald-solid: 16 185 129;         /* emerald-500 */
  --c-emerald-deep: 6 78 59;             /* emerald-900 */
  --c-emerald-wash-500-10: rgb(16 185 129 / 0.1);
  --c-emerald-wash-500-20: rgb(16 185 129 / 0.2);
  --c-emerald-wash-500-40: rgb(16 185 129 / 0.4);
  --c-emerald-wash-500-50: rgb(16 185 129 / 0.5);
  --c-emerald-wash-950-80: rgb(2 44 34 / 0.8);
  --c-emerald-wash-950-90: rgb(2 44 34 / 0.9);

  --c-amber-fg: 252 211 77;              /* amber-300 */
  --c-amber-icon: 251 191 36;            /* amber-400 */
  --c-amber-solid: 245 158 11;           /* amber-500 */
  --c-amber-deep: 120 53 15;             /* amber-900 */
  --c-amber-wash-500-10: rgb(245 158 11 / 0.1);
  --c-amber-wash-500-20: rgb(245 158 11 / 0.2);
  --c-amber-wash-500-40: rgb(245 158 11 / 0.4);
  --c-amber-wash-500-50: rgb(245 158 11 / 0.5);
  --c-amber-wash-950-80: rgb(69 26 3 / 0.8);
  --c-amber-wash-950-90: rgb(69 26 3 / 0.9);

  --c-rose-icon: 251 113 133;            /* rose-400 */
  --c-rose-wash-500-10: rgb(244 63 94 / 0.1);
  --c-rose-wash-500-20: rgb(244 63 94 / 0.2);

  --c-secondary-fg: 216 180 254;         /* purple-300 */
  --c-secondary-icon: 192 132 252;       /* purple-400 */
  --c-secondary-deep: 88 28 135;         /* purple-900 */
  --c-secondary-wash-500-10: rgb(168 85 247 / 0.1);
  --c-secondary-wash-500-20: rgb(168 85 247 / 0.2);
  --c-secondary-wash-500-40: rgb(168 85 247 / 0.4);
  --c-secondary-wash-500-50: rgb(168 85 247 / 0.5);
  --c-secondary-wash-950-80: rgb(59 7 100 / 0.8);  /* purple-950 */
  --c-secondary-wash-950-90: rgb(59 7 100 / 0.9);

  --c-info-icon: 56 189 248;             /* sky-400 */
  --c-info-wash-500-10: rgb(14 165 233 / 0.1);   /* sky-500 */
  --c-info-wash-500-20: rgb(14 165 233 / 0.2);

  --c-sky-fg: 56 189 248;                /* sky-400 */
  --c-sky-solid: 14 165 233;             /* sky-500 #0EA5E9 */
}

/* Light theme tokens (PR3 of web-light-mode). Opt-in only — [data-theme="light"],
   never :root, since dark remains the default until the user toggles. Neutral
   values are the WCAG-verified design-doc values; color-role values follow the
   "flip the tier" methodology: dark uses LIGHT hue tiers (300/400) readable on a
   near-black backdrop, light uses DARK hue tiers (600/700/800) readable on a
   near-white backdrop. -solid/-solid-strong fills keep their dark-mode tier since
   they're literal shape fills, not text. -deep/-deepest/high-alpha wash badge
   backgrounds are inverted to pale hue-50 tints so their paired -fg/-icon text
   (now dark) still has strong contrast on top. See apply-progress report for the
   full per-token contrast-ratio table. */
[data-theme="light"] {
  --c-control: 241 245 249;
  --c-cta: 15 118 110;
  --c-cta-hover: 17 94 89;
  --c-on-cta: 255 255 255;
  --c-subject: 245 158 11;
  --c-on-subject: 15 23 42;
  --c-selection: rgb(240 253 250);
  --c-canvas: 248 250 252;       /* #F8FAFC - Crisp light desk canvas */
  --c-chrome: 255 255 255;       /* #FFFFFF */
  --c-surface: 248 250 252;      /* #F8FAFC - Subtle nested containers */
  --c-elevated: 255 255 255;     /* #FFFFFF - Pure white floating cards */
  --c-elevated-hover: 241 245 249;
  --c-line: 226 232 240;         /* #E2E8F0 - slate-200 */
  --c-line-strong: 203 213 225;   /* #CBD5E1 - slate-300 clean crisp borders */
  --c-line-hover: 148 163 184;
  --c-line-focus: 13 148 136;      /* #0D9488 - Teal focus */
  --c-fg-max: 15 23 42;          /* #0F172A - Slate-900 */
  --c-fg-strong: 30 41 59;       /* #1E293B - Slate-800 */
  --c-fg: 51 65 85;             /* #334155 - Slate-700 */
  --c-fg-soft: 71 85 105;        /* #475569 - Slate-600 */
  --c-fg-muted: 100 116 139;     /* #64748B - Slate-500 */
  --c-fg-faint: 71 85 105;      /* #475569 - Readable input placeholders */
  --c-scrim: 15 23 42;
  --c-inverted: 15 23 42;
  --c-inverted-hover: 30 41 59;
  --c-inverted-fg: 248 250 252;

  --c-accent-fg-max: 19 78 74;    /* teal-900 */
  --c-accent-fg-strong: 17 94 89;  /* teal-800 */
  --c-accent-fg: 15 118 110;       /* teal-700 */
  --c-accent-icon: 13 148 136;    /* teal-600 */
  --c-accent-solid: 20 184 166;  /* teal-500 #14B8A6 */
  --c-accent-solid-strong: 13 148 136; /* teal-600 #0D9488 */
  --c-accent-wash-400-20: rgb(45 212 191 / 0.1);
  --c-accent-wash-400-30: rgb(45 212 191 / 0.15);
  --c-accent-wash-500-10: rgb(20 184 166 / 0.05);
  --c-accent-wash-500-15: rgb(20 184 166 / 0.08);
  --c-accent-wash-500-20: rgb(20 184 166 / 0.1);
  --c-accent-wash-500-30: rgb(20 184 166 / 0.15);
  --c-accent-wash-500-40: rgb(20 184 166 / 0.4);  /* border-role */
  --c-accent-wash-500-50: rgb(20 184 166 / 0.5);  /* border-role */
  --c-accent-wash-500-80: rgb(20 184 166 / 0.8);  /* border-role */
  --c-accent-wash-600-20: rgb(13 148 136 / 0.1);
  --c-accent-wash-600-30: rgb(13 148 136 / 0.15);
  --c-accent-wash-600-40: rgb(240 253 250 / 0.85);  /* inverted badge/hover-bg */
  --c-accent-wash-600-50: rgb(240 253 250 / 0.9);   /* inverted badge/hover-bg */
  --c-accent-wash-800-50: rgb(94 234 212 / 0.5);   /* border framing */
  --c-accent-wash-900-90: rgb(240 253 250 / 0.9);   /* inverted decorative gradient */
  --c-accent-wash-950-20: rgb(4 47 46 / 0.12);
  --c-accent-wash-950-40: rgb(240 253 250 / 0.7);
  --c-accent-wash-950-80: rgb(240 253 250 / 0.9);

  --c-positive-fg: 6 95 70;  /* emerald-800 */
  --c-positive-icon: 5 150 105;  /* emerald-600 */
  --c-positive-solid: 16 185 129;  /* unchanged (fill) */
  --c-positive-solid-strong: 5 150 105;  /* unchanged (fill) */
  --c-positive-deep: 209 250 229;  /* inverted, unused token */
  --c-positive-deepest: 236 253 245;  /* inverted, badge bg (paired w/ positive-icon) */
  --c-positive-wash-500-10: rgb(16 185 129 / 0.05);
  --c-positive-wash-500-15: rgb(16 185 129 / 0.08);
  --c-positive-wash-500-20: rgb(16 185 129 / 0.1);
  --c-positive-wash-500-30: rgb(16 185 129 / 0.15);
  --c-positive-wash-500-40: rgb(16 185 129 / 0.4);  /* border-role, unchanged */
  --c-positive-wash-500-50: rgb(16 185 129 / 0.5);  /* border-role, unchanged */
  --c-positive-wash-950-80: rgb(236 253 245 / 0.8);  /* inverted, badge bg */
  --c-positive-wash-950-90: rgb(236 253 245 / 0.9);  /* inverted, badge bg */

  --c-warning-fg: 146 64 14;  /* amber-800 */
  --c-warning-icon: 180 83 9;  /* amber-700, bumped from 600 for margin */
  --c-warning-solid: 245 158 11;  /* unchanged (fill) */
  --c-warning-deep: 255 251 235;  /* inverted, unused token */
  --c-warning-wash-400-10: rgb(251 191 36 / 0.05);
  --c-warning-wash-400-20: rgb(251 191 36 / 0.1);
  --c-warning-wash-500-10: rgb(245 158 11 / 0.05);
  --c-warning-wash-500-15: rgb(245 158 11 / 0.08);
  --c-warning-wash-500-20: rgb(245 158 11 / 0.1);
  --c-warning-wash-500-30: rgb(245 158 11 / 0.15);
  --c-warning-wash-500-40: rgb(245 158 11 / 0.4);  /* border-role, unchanged */
  --c-warning-wash-500-50: rgb(245 158 11 / 0.5);  /* border-role, unchanged */
  --c-warning-wash-950-80: rgb(255 251 235 / 0.8);  /* inverted, badge bg */
  --c-warning-wash-950-90: rgb(255 251 235 / 0.9);  /* inverted, badge bg */

  --c-danger-fg: 190 18 60;  /* rose-700 */
  --c-danger-icon: 225 29 72;  /* rose-600 */
  --c-danger-solid: 244 63 94;  /* unchanged (fill) */
  --c-danger-deepest: 255 241 242;  /* inverted, badge bg (paired w/ danger-icon) */
  --c-danger-wash-500-10: rgb(244 63 94 / 0.05);
  --c-danger-wash-500-15: rgb(244 63 94 / 0.08);
  --c-danger-wash-500-20: rgb(244 63 94 / 0.1);
  --c-danger-wash-500-30: rgb(244 63 94 / 0.15);
  --c-danger-wash-500-40: rgb(244 63 94 / 0.4);  /* border-role, unchanged */
  --c-danger-wash-950-60: rgb(255 241 242 / 0.6);  /* inverted, hover/badge bg */
  --c-danger-wash-950-80: rgb(255 241 242 / 0.8);  /* inverted, badge bg */

  --c-emerald-fg: 6 95 70;
  --c-emerald-icon: 5 150 105;
  --c-emerald-solid: 16 185 129;  /* unchanged (fill) */
  --c-emerald-deep: 236 253 245;  /* inverted, unused token */
  --c-emerald-wash-500-10: rgb(16 185 129 / 0.05);
  --c-emerald-wash-500-20: rgb(16 185 129 / 0.1);
  --c-emerald-wash-500-40: rgb(16 185 129 / 0.4);  /* border-role, unchanged */
  --c-emerald-wash-500-50: rgb(16 185 129 / 0.5);  /* border-role, unchanged */
  --c-emerald-wash-950-80: rgb(236 253 245 / 0.8);  /* inverted, badge bg */
  --c-emerald-wash-950-90: rgb(236 253 245 / 0.9);  /* inverted, badge bg */

  --c-amber-fg: 146 64 14;
  --c-amber-icon: 180 83 9;  /* amber-700, bumped from 600 for margin */
  --c-amber-solid: 245 158 11;  /* unchanged (fill) */
  --c-amber-deep: 255 251 235;  /* inverted, unused token */
  --c-amber-wash-500-10: rgb(245 158 11 / 0.05);
  --c-amber-wash-500-20: rgb(245 158 11 / 0.1);
  --c-amber-wash-500-40: rgb(245 158 11 / 0.4);  /* border-role, unchanged */
  --c-amber-wash-500-50: rgb(245 158 11 / 0.5);  /* border-role, unchanged */
  --c-amber-wash-950-80: rgb(255 251 235 / 0.8);  /* inverted, badge bg */
  --c-amber-wash-950-90: rgb(255 251 235 / 0.9);  /* inverted, badge bg */

  --c-rose-icon: 225 29 72;
  --c-rose-wash-500-10: rgb(244 63 94 / 0.05);
  --c-rose-wash-500-20: rgb(244 63 94 / 0.1);

  --c-secondary-fg: 126 34 206;
  --c-secondary-icon: 147 51 234;
  --c-secondary-deep: 243 232 255;  /* inverted, unused token */
  --c-secondary-wash-500-10: rgb(168 85 247 / 0.05);
  --c-secondary-wash-500-20: rgb(168 85 247 / 0.1);
  --c-secondary-wash-500-40: rgb(168 85 247 / 0.4);  /* border-role default, unchanged */
  --c-secondary-wash-500-50: rgb(168 85 247 / 0.5);  /* border-role, unchanged (confirmed usage) */
  --c-secondary-wash-950-80: rgb(250 245 255 / 0.8);  /* inverted, badge bg */
  --c-secondary-wash-950-90: rgb(250 245 255 / 0.9);  /* inverted, badge bg (confirmed usage) */

  --c-info-icon: 2 132 199;
  --c-info-wash-500-10: rgb(14 165 233 / 0.05);
  --c-info-wash-500-20: rgb(14 165 233 / 0.1);

  --c-sky-fg: 2 132 199;                 /* sky-600 */
  --c-sky-solid: 14 165 233;             /* sky-500 #0EA5E9 */
}