/* =============================================================================
   Porto Guará — Design tokens (css/tokens.css)
   Loaded FIRST by index.html (guarded by tests/design-tokens.test.js).
   Spec: docs/DESIGN_SYSTEM.md.  Namespace: --ds-* only (no collisions with the
   legacy --ms-* / --pg-* / --brand-* / --bg-* layers, which still win for now).

   Three layers:
     1. PRIMITIVES  — Radix Colors v3.0.0 dark scales, copied verbatim (sRGB).
     2. ROLES       — semantic tokens (surface/text/border/accent/status, type,
                      space, radius, elevation, motion, z). Target system; the
                      follow-up units migrate components onto these.
     3. LEGACY PINS — exact literals the current CSS hard-codes, so mechanical
                      substitution is zero-visual-change. Each pin names the
                      role it converges to; re-pointing a pin restyles every
                      consumer at once. Pins are deleted once nothing reads them.

   Colour primitives: Radix Colors — https://github.com/radix-ui/colors
   MIT License. Copyright (c) 2021 Radix
   Permission is hereby granted, free of charge, to any person obtaining a copy
   of this software and associated documentation files (the "Software"), to deal
   in the Software without restriction, including without limitation the rights
   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   copies of the Software, and to permit persons to whom the Software is
   furnished to do so, subject to the following conditions: The above copyright
   notice and this permission notice shall be included in all copies or
   substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS",
   WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
   ============================================================================= */

/* 1. PRIMITIVES — Radix 12-step scales (1–2 app bg · 3–5 component bg ·
      6–8 borders · 9–10 solid fills · 11 low-contrast text · 12 high-contrast) */
:root {
  --ds-slate-1: #111113;  --ds-slate-2: #18191b;  --ds-slate-3: #212225;
  --ds-slate-4: #272a2d;  --ds-slate-5: #2e3135;  --ds-slate-6: #363a3f;
  --ds-slate-7: #43484e;  --ds-slate-8: #5a6169;  --ds-slate-9: #696e77;
  --ds-slate-10: #777b84; --ds-slate-11: #b0b4ba; --ds-slate-12: #edeef0;

  --ds-teal-1: #0d1514;  --ds-teal-2: #111c1b;  --ds-teal-3: #0d2d2a;
  --ds-teal-4: #023b37;  --ds-teal-5: #084843;  --ds-teal-6: #145750;
  --ds-teal-7: #1c6961;  --ds-teal-8: #207e73;  --ds-teal-9: #12a594;
  --ds-teal-10: #0eb39e; --ds-teal-11: #0bd8b6; --ds-teal-12: #adf0dd;

  --ds-amber-1: #16120c;  --ds-amber-2: #1d180f;  --ds-amber-3: #302008;
  --ds-amber-4: #3f2700;  --ds-amber-5: #4d3000;  --ds-amber-6: #5c3d05;
  --ds-amber-7: #714f19;  --ds-amber-8: #8f6424;  --ds-amber-9: #ffc53d;
  --ds-amber-10: #ffd60a; --ds-amber-11: #ffca16; --ds-amber-12: #ffe7b3;

  --ds-red-1: #191111;  --ds-red-2: #201314;  --ds-red-3: #3b1219;
  --ds-red-4: #500f1c;  --ds-red-5: #611623;  --ds-red-6: #72232d;
  --ds-red-7: #8c333a;  --ds-red-8: #b54548;  --ds-red-9: #e5484d;
  --ds-red-10: #ec5d5e; --ds-red-11: #ff9592; --ds-red-12: #ffd1d9;

  --ds-blue-1: #0d1520;  --ds-blue-2: #111927;  --ds-blue-3: #0d2847;
  --ds-blue-4: #003362;  --ds-blue-5: #004074;  --ds-blue-6: #104d87;
  --ds-blue-7: #205d9e;  --ds-blue-8: #2870bd;  --ds-blue-9: #0090ff;
  --ds-blue-10: #3b9eff; --ds-blue-11: #70b8ff; --ds-blue-12: #c2e6ff;

  --ds-green-1: #0e1512;  --ds-green-2: #121b17;  --ds-green-3: #132d21;
  --ds-green-4: #113b29;  --ds-green-5: #174933;  --ds-green-6: #20573e;
  --ds-green-7: #28684a;  --ds-green-8: #2f7c57;  --ds-green-9: #30a46c;
  --ds-green-10: #33b074; --ds-green-11: #3dd68c; --ds-green-12: #b1f1cb;
}

/* 2. ROLES — the target system. Dark is the product default; light below.
      Root font-size is 14px (styles.css html{}), so rem sizes are written as
      calc(<px>rem / 14) to keep the px intent readable. */
:root {
  /* Surfaces — 4 tiers, never more */
  --ds-bg-canvas: #070b12;          /* page */
  --ds-bg-chrome: #0b1220;          /* sidebar, topbar, bottom-nav */
  --ds-bg-panel: #111a2b;           /* panel, card, table body */
  --ds-bg-raised: #162235;          /* popover, menu, modal, hover row */
  --ds-bg-inset: #0d1524;           /* inputs, code, wells */
  --ds-bg-hover: rgba(230, 237, 247, 0.04);
  --ds-bg-selected: rgba(18, 165, 148, 0.14);
  --ds-overlay: rgba(4, 8, 14, 0.72);

  /* Borders */
  --ds-border-subtle: rgba(230, 237, 247, 0.06);  /* in-panel dividers */
  --ds-border: #243049;                           /* panel edge, input */
  --ds-border-strong: #334466;                    /* hover / emphasis */
  --ds-border-focus: var(--ds-teal-9);

  /* Text — 4 steps, all AA on --ds-bg-panel */
  --ds-text: #e6edf7;
  --ds-text-secondary: #a8b3c7;
  --ds-text-muted: #8b97ad;
  --ds-text-disabled: #5a6680;
  --ds-text-on-accent: #04110f;

  /* Accent — ONE brand accent (harbour teal, Radix teal) */
  --ds-accent: var(--ds-teal-9);
  --ds-accent-rgb: 18, 165, 148;   /* = --ds-teal-9 as r,g,b for rgba(var(--ds-accent-rgb), a) */
  --ds-accent-hover: var(--ds-teal-10);
  --ds-accent-text: var(--ds-teal-11);
  --ds-accent-subtle: var(--ds-teal-3);
  --ds-accent-border: var(--ds-teal-7);

  /* Status — solid / subtle bg / text, from Radix 9 / 3 / 11 */
  --ds-success: var(--ds-green-9);  --ds-success-bg: var(--ds-green-3);  --ds-success-text: var(--ds-green-11);
  --ds-warning: var(--ds-amber-9);  --ds-warning-bg: var(--ds-amber-3);  --ds-warning-text: var(--ds-amber-11);
  --ds-danger: var(--ds-red-9);     --ds-danger-bg: var(--ds-red-3);     --ds-danger-text: var(--ds-red-11);
  --ds-info: var(--ds-blue-9);      --ds-info-bg: var(--ds-blue-3);      --ds-info-text: var(--ds-blue-11);
  --ds-neutral: var(--ds-slate-9);  --ds-neutral-bg: var(--ds-slate-3);  --ds-neutral-text: var(--ds-slate-11);
  /* "-strong" = Radix step 10: solid status colour that is also AA (>=4.5:1) as
     text on every surface (step 9 red is 4.45:1 on --ds-bg-panel). Legacy pins
     and the compatibility aliases use these because they serve text and fills. */
  --ds-success-strong: var(--ds-green-10);
  --ds-danger-strong: var(--ds-red-10);
  --ds-info-strong: var(--ds-blue-10);

  /* Typography — Inter (OFL-1.1, already self-hosted) + DM Mono for figures */
  --ds-font-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --ds-font-mono: 'DM Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, ui-monospace, monospace;
  --ds-text-2xs: calc(11rem / 14);  /* 11px — badges, axis ticks; floor */
  --ds-text-xs: calc(12rem / 14);   /* 12px — labels, table meta */
  --ds-text-sm: calc(13rem / 14);   /* 13px — table body, secondary */
  --ds-text-md: 1rem;               /* 14px — body, inputs, buttons */
  --ds-text-lg: calc(16rem / 14);   /* 16px — panel title */
  --ds-text-xl: calc(20rem / 14);   /* 20px — page title */
  --ds-text-2xl: calc(24rem / 14);  /* 24px — KPI value */
  --ds-text-3xl: calc(32rem / 14);  /* 32px — hero KPI only */
  --ds-leading-tight: 1.25;
  --ds-leading-normal: 1.5;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-tracking-label: 0.04em;      /* uppercase labels only */

  /* Spacing — 4px grid, 10 steps */
  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;

  /* Radius — 4 steps + pill */
  --ds-radius-sm: 4px;    /* badge, chip, checkbox */
  --ds-radius-md: 6px;    /* button, input */
  --ds-radius-lg: 8px;    /* card, panel */
  --ds-radius-xl: 12px;   /* modal, sheet */
  --ds-radius-full: 999px;

  /* Elevation — borders do the work; shadow only for floating layers */
  --ds-shadow-0: none;
  --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32);                                  /* card */
  --ds-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.36), 0 0 0 1px var(--ds-border-subtle); /* popover, menu */
  --ds-shadow-3: 0 16px 40px rgba(0, 0, 0, 0.48), 0 0 0 1px var(--ds-border-subtle); /* modal, sheet */
  --ds-focus-ring: 0 0 0 2px var(--ds-bg-canvas), 0 0 0 4px var(--ds-border-focus);

  /* Motion — 3 durations, 2 curves; reduced-motion zeroes them below */
  --ds-duration-fast: 120ms;
  --ds-duration-base: 180ms;
  --ds-duration-slow: 280ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layering — the ONLY z-index values new code may use */
  --ds-z-base: 0;
  --ds-z-raised: 10;
  --ds-z-sticky: 100;
  --ds-z-chrome: 200;
  --ds-z-dropdown: 300;
  --ds-z-drawer: 1000;
  --ds-z-modal: 1200;
  --ds-z-toast: 1300;
  --ds-z-login: 10000;

  /* Shell metrics */
  --ds-shell-topbar-h: 56px;
  --ds-shell-sidebar-w: 240px;
  --ds-shell-sidebar-w-collapsed: 56px;
  --ds-shell-bottomnav-h: 56px;
  --ds-shell-content-max: 1440px;
  --ds-hit-target: 44px;
}

[data-theme='light'] {
  --ds-bg-canvas: #f4f7fb;
  --ds-bg-chrome: #ffffff;
  --ds-bg-panel: #ffffff;
  --ds-bg-raised: #ffffff;
  --ds-bg-inset: #f0f4fa;
  --ds-bg-hover: rgba(11, 18, 32, 0.04);
  --ds-overlay: rgba(11, 18, 32, 0.40);
  --ds-border-subtle: rgba(11, 18, 32, 0.06);
  --ds-border: #d5dde8;
  --ds-border-strong: #9aabc2;
  --ds-text: #0b1220;
  --ds-text-secondary: #3d4d66;
  --ds-text-muted: #5a6b84;
  --ds-text-disabled: #8a97ab;
  --ds-text-on-accent: #ffffff;
  --ds-accent: #0d9b8a;          /* Radix teal-10 (light) */
  --ds-accent-rgb: 13, 155, 138;  /* = light --ds-accent as r,g,b */
  --ds-accent-hover: #008573;    /* Radix teal-11 (light) */
  --ds-accent-text: #008573;
  --ds-accent-subtle: #e0f8f3;   /* Radix teal-3 (light) */
  --ds-shadow-1: 0 1px 2px rgba(11, 18, 32, 0.08);
  --ds-shadow-2: 0 4px 12px rgba(11, 18, 32, 0.10), 0 0 0 1px var(--ds-border-subtle);
  --ds-shadow-3: 0 16px 40px rgba(11, 18, 32, 0.16), 0 0 0 1px var(--ds-border-subtle);
}

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

/* 3. LEGACY PINS — U2 (2026-10-14) re-pointed every pin at its role, so the
      720+ pinned declarations in styles.css now follow the design system: one
      accent (teal), Radix status scales. Foundation (U1) had them byte-identical
      to the old literals. Each pin is deleted once its consumers are inlined to
      the role (U3-U5). Do not add new consumers; use the roles above. */
:root {
  --ds-legacy-emerald: var(--ds-accent);                     /* → --ds-accent */
  --ds-legacy-amber: var(--ds-warning);                       /* → --ds-warning */
  --ds-legacy-yellow: var(--ds-warning);                      /* → --ds-warning */
  --ds-legacy-red: var(--ds-danger-strong);  /* → --ds-danger-strong */
  --ds-legacy-sky: var(--ds-info-strong);  /* → --ds-info-strong */
  --ds-legacy-blue: var(--ds-info-strong);  /* → --ds-info-strong */
  --ds-legacy-green: var(--ds-success-strong);  /* → --ds-success-strong */
  --ds-legacy-gray: var(--ds-text-muted);                        /* → --ds-text-muted */

  --ds-legacy-white-a02: var(--ds-bg-hover); /* → --ds-bg-hover */
  --ds-legacy-white-a03: var(--ds-bg-hover); /* → --ds-bg-hover */
  --ds-legacy-white-a04: var(--ds-bg-hover); /* → --ds-bg-hover */
  --ds-legacy-white-a05: var(--ds-border-subtle); /* → --ds-border-subtle */
  --ds-legacy-white-a06: var(--ds-border-subtle); /* → --ds-border-subtle */
  --ds-legacy-white-a08: var(--ds-border); /* → --ds-border-subtle */
  --ds-legacy-white-a10: var(--ds-border);  /* → --ds-border */

  --ds-legacy-emerald-a06: var(--ds-accent-subtle); /* → --ds-accent-subtle */
  --ds-legacy-emerald-a08: var(--ds-accent-subtle); /* → --ds-accent-subtle */
  --ds-legacy-emerald-a12: var(--ds-bg-selected); /* → --ds-bg-selected */
  --ds-legacy-emerald-a15: var(--ds-bg-selected); /* → --ds-bg-selected */
  --ds-legacy-emerald-a20: var(--ds-accent-border);  /* → --ds-accent-border */
  --ds-legacy-emerald-a28: var(--ds-accent-border); /* → --ds-accent-border */
  --ds-legacy-emerald-a30: var(--ds-accent-border);  /* → --ds-accent-border */

  --ds-legacy-black-a20: var(--ds-overlay);        /* → --ds-shadow-1 */
  --ds-legacy-black-a30: var(--ds-overlay);        /* → --ds-shadow-2 */
  --ds-legacy-black-a40: var(--ds-overlay);        /* → --ds-shadow-3 */
}