/* ==========================================================================
   Cadence — Design Tokens  (v0.4)
   Every color, font, spacing, radius, shadow and motion value comes from here.
   Rule: components reference SEMANTIC tokens only (--color-*, --role-*, --space-*, …),
   never the raw palette.
   v0.4: Warehouse blue (one accent, no yellow) + Inter as the only typeface.
   ========================================================================== */

:root {
  /* ---------- 1. Primitives ---------- */
  /* Brand: Warehouse blue. The single accent color of the system. */
  --blue-50:  #EEF5FE;
  --blue-100: #DDEAFD;
  --blue-200: #BCD6FA;
  --blue-300: #8FB9F5;
  --blue-400: #69A2F3;
  --blue-500: #458EF1;   /* Brand identity: logo, charts, highlight fills. Not for text (3.29:1 on white) */
  --blue-600: #3A7EDD;   /* Graphics on the grey page (≥3:1) */
  --blue-700: #2D6BC9;   /* UI primary: buttons, links, focus (5.17:1 with white, 4.63:1 on the page grey) */
  --blue-800: #25579F;
  --blue-900: #1F467D;
  --blue-950: #152E52;

  /* Neutrals: cool warehouse grey */
  --ink-0:   #FFFFFF;
  --ink-25:  #F7F9FA;
  --ink-50:  #EFF3F4;   /* Page background */
  --ink-100: #E7EBEC;   /* Secondary surface */
  --ink-200: #DDE3E5;   /* Borders */
  --ink-300: #C5CDD0;
  --ink-400: #98A1A7;
  --ink-500: #60686F;   /* Hints: ≥4.7:1 on white, page grey and secondary surface */
  --ink-600: #58616A;   /* Secondary text */
  --ink-700: #40474E;
  --ink-800: #33383E;
  --ink-900: #292D32;   /* Body text (12.4:1 on the page grey) */
  --ink-950: #1B1E22;

  /* Functional colors. The 500s are for fills and icons; the -text values pass AA as text */
  --green-500: #2FA35A;  --green-50: #E8F6EE;  --green-text: #1B7A42;
  --orange-500:#F07A1A;  --orange-50:#FFF1E6;  --orange-text:#A0520A;
  --amber-500: #E59A0B;  --amber-50: #FEF6E4;
  --red-500:   #E5484D;  --red-50:   #FDECEC;  --red-text:   #BD2E34;
  --violet-500:#8B5CF6;  --violet-50:#F3EEFF;

  /* ---------- 2. Semantic tokens (Light) ---------- */
  --color-bg:            var(--ink-50);
  --color-surface:       var(--ink-0);
  --color-surface-2:     var(--ink-100);   /* Secondary panels, board columns, quad tiles */
  --color-surface-hover: var(--ink-25);
  --color-surface-sunken:var(--ink-100);
  --color-sidebar:       #E9EEF0;

  --color-border:        var(--ink-200);
  --color-border-subtle: #E8EDEF;
  --color-border-strong: var(--ink-300);

  --color-text:          var(--ink-900);
  --color-text-2:        var(--ink-600);
  --color-text-3:        var(--ink-500);
  --color-text-inverse:  var(--ink-0);

  --color-primary:        var(--blue-700);
  --color-primary-hover:  var(--blue-800);
  --color-primary-soft:   var(--blue-50);
  --color-primary-soft-2: var(--blue-100);
  --color-primary-text:   var(--blue-700);
  --color-on-primary:     #FFFFFF;
  --color-brand:          var(--blue-500);

  /* Accent = the brand blue (one-accent system). Fills and graphics only; text uses --color-accent-text */
  --color-accent:       var(--blue-500);
  --color-accent-soft:  var(--blue-50);
  --color-accent-text:  var(--blue-700);
  --color-on-accent:    var(--ink-950);      /* Only for large or bold text on --color-accent */

  /* Color roles: every color has exactly one job */
  --role-critical:    var(--red-500);      /* Blocked, urgent, overdue, destructive */
  --role-attention:   var(--orange-500);   /* At risk, due soon, high priority */
  --role-operational: var(--green-500);    /* Done, on track, healthy */
  --role-info:        var(--blue-600);     /* Neutral information, in progress */

  --color-success: var(--role-operational); --color-success-soft: var(--green-50);  --color-success-text: var(--green-text);
  --color-warning: var(--role-attention);   --color-warning-soft: var(--orange-50); --color-warning-text: var(--orange-text);
  --color-danger:  var(--role-critical);    --color-danger-soft:  var(--red-50);    --color-danger-text:  var(--red-text);
  --color-info:    var(--role-info);        --color-info-soft:    var(--blue-50);   --color-info-text:    var(--blue-700);

  --color-focus-ring: rgba(45, 107, 201, .4);
  --color-overlay:    rgba(27, 30, 34, .45);

  /* Task status: fixed across the product, do not override */
  --status-backlog:  var(--ink-400);
  --status-todo:     var(--ink-500);
  --status-progress: var(--role-info);
  --status-review:   var(--violet-500);
  --status-done:     var(--role-operational);
  --status-blocked:  var(--role-critical);

  /* Priority */
  --priority-urgent: var(--role-critical);
  --priority-high:   var(--role-attention);
  --priority-medium: var(--amber-500);
  --priority-low:    var(--ink-400);

  /* Project colors (user-selectable, 8 total) */
  --project-1: #12B08C;
  --project-2: #458EF1;
  --project-3: #8B5CF6;
  --project-4: #FF6B57;
  --project-5: #E59A0B;
  --project-6: #E0448F;
  --project-7: #0EA5C4;
  --project-8: #60686F;

  /* ---------- 3. Typography ---------- */
  /* One family: Inter for everything. Display type gets tight tracking instead of a second face. */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Type scale: UI base is 14px */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;   /* Default body */
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  --weight-regular: 400;   /* Body, large numerals */
  --weight-medium:  500;
  --weight-semibold:600;   /* Headings, buttons, labels */
  --weight-bold:    700;
  --weight-numeral: 400;   /* Big numbers stay Regular with tight tracking */

  --leading-tight:  1.15;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-display: -0.035em;   /* ≥28px */
  --tracking-heading: -0.02em;    /* 16–22px */

  /* ---------- 4. Spacing (4px grid) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- 5. Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;    /* Quad tiles */
  --radius-md: 8px;    /* Buttons, inputs, verdict chips */
  --radius-lg: 12px;   /* Cards */
  --radius-xl: 20px;   /* Hero (stacked goal) cards, modals */
  --radius-full: 999px;

  /* ---------- 6. Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(41, 45, 50, .06);
  --shadow-sm: 0 1px 3px rgba(41, 45, 50, .08), 0 1px 2px rgba(41, 45, 50, .04);
  --shadow-md: 0 4px 12px rgba(41, 45, 50, .08), 0 2px 4px rgba(41, 45, 50, .04);
  --shadow-lg: 0 10px 30px rgba(41, 45, 50, .10), 0 4px 8px rgba(41, 45, 50, .04);
  --shadow-xl: 0 24px 64px rgba(41, 45, 50, .18);

  /* ---------- 7. Motion ---------- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(.3, 0, 0, 1.2);
  --duration-fast: 120ms;   /* Hover, press */
  --duration-base: 200ms;   /* Expand, toggle */
  --duration-slow: 320ms;   /* Modals, drawers */

  /* ---------- 8. Layout ---------- */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 56px;
  --content-max: 1280px;
  --board-column-width: 296px;

  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    500;

  color-scheme: light;
}

/* ---------- Dark mode ----------
   The site script sets data-theme on load: user choice > system preference. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:            #0F1215;
  --color-surface:       #171A1E;
  --color-surface-2:     #1D2126;
  --color-surface-hover: #22272C;
  --color-surface-sunken:#0B0D10;
  --color-sidebar:       #13161A;

  --color-border:        #2A3036;
  --color-border-subtle: #22272C;
  --color-border-strong: #3A4148;

  --color-text:          #EEF1F3;
  --color-text-2:        #A9B1B8;
  --color-text-3:        #858E96;
  --color-text-inverse:  var(--ink-950);

  --color-primary:        var(--blue-400);
  --color-primary-hover:  var(--blue-300);
  --color-primary-soft:   rgba(105, 162, 243, .14);
  --color-primary-soft-2: rgba(105, 162, 243, .24);
  --color-primary-text:   var(--blue-300);
  --color-on-primary:     var(--blue-950);
  --color-focus-ring:     rgba(143, 185, 245, .45);

  --color-accent:       var(--blue-400);
  --color-accent-soft:  rgba(105, 162, 243, .14);
  --color-accent-text:  var(--blue-300);
  --color-on-accent:    var(--blue-950);

  --color-success-soft: rgba(47, 163, 90, .16);   --color-success-text: #4CC57F;
  --color-warning-soft: rgba(240, 122, 26, .16);  --color-warning-text: #F2A33A;
  --color-danger-soft:  rgba(229, 72, 77, .16);   --color-danger-text:  #F26B6F;
  --color-info-soft:    rgba(105, 162, 243, .16); --color-info-text:    var(--blue-300);
  --role-info:          var(--blue-400);

  --color-overlay: rgba(0, 0, 0, .6);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}