/* ==========================================================================
   Broker AI — design tokens
   Derived from DESIGN_SYSTEM.md. Components consume these only.
   No component may contain a raw hex, px size, or radius.
   ========================================================================== */

:root {
  /* Native chrome (scrollbars, form controls) follows the theme. */
  color-scheme: light;
  /* ---------- 1. Raw colour ramp (never used directly by components) ------- */
  --grey-000: #ffffff;
  --grey-050: #fafafa;
  --grey-100: #f4f4f5;
  --grey-150: #ececee;
  --grey-200: #e8e8ea;
  --grey-300: #d9d9dc;
  --grey-400: #c4c4c8;
  --grey-500: #a1a1a6;
  --grey-600: #6e6e73;
  --grey-800: #232326;
  --grey-900: #0a0a0a;

  --blue-500: #3d8bf7;
  --blue-600: #1f7aec;
  --green-500: #1a9c62;
  --amber-500: #9a6700;
  --red-500: #b3261e;

  /* ---------- 2. Semantic colour ------------------------------------------ */
  --color-page: var(--grey-100);
  --color-surface: var(--grey-000);
  --color-surface-sunk: var(--grey-100);
  --color-surface-raised: var(--grey-000);

  --color-border: var(--grey-200);
  --color-border-strong: var(--grey-300);

  --color-text-primary: var(--grey-900);
  --color-text-secondary: var(--grey-600);
  --color-text-muted: var(--grey-500);
  --color-text-inverse: var(--grey-000);

  /* Black is the action colour. Blue is identity only — never UI chrome. */
  --color-action: var(--grey-900);
  --color-action-hover: var(--grey-800);
  --color-action-label: var(--color-text-inverse);
  --color-accent: var(--blue-500);
  --color-accent-deep: var(--blue-600);

  /* Focus. Their system shows none; this is ours. */
  --color-focus: var(--blue-500);

  /* Status. Extrapolated — see DESIGN_SYSTEM.md §9. Kept low-saturation
     so they sit in the same world as the observed green. */
  --color-success: var(--green-500);
  --color-success-bg: #e9f5ef;
  --color-warn: var(--amber-500);
  --color-warn-bg: #f8f0dd;
  --color-crit: var(--red-500);
  --color-crit-bg: #fbeae8;

  /* ---------- 3. Type ------------------------------------------------------ */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-display: 64px;
  --text-title: 30px;
  --text-section: 20px;
  --text-card: 18px;
  --text-body: 15px;
  --text-secondary: 14px;
  --text-micro: 12px;
  --text-label: 11px;

  --weight-regular: 400;
  --weight-medium: 450;
  --weight-strong: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Tracking tightens only above 18px; positive only on uppercase labels. */
  --track-display: -0.035em;
  --track-title: -0.025em;
  --track-section: -0.015em;
  --track-flat: 0;
  --track-label: 0.08em;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  /* ---------- 4. Space (base 4px) ----------------------------------------- */
  --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. Shape ---------------------------------------------------- */
  --radius-input: 10px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --border-width: 1px;

  /* Two shadows only. Border carries structure; shadow means "floating". */
  --shadow-pill: 0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-float: 0 8px 28px rgba(10, 10, 10, 0.1);

  /* ---------- 6. Sizing --------------------------------------------------- */
  --size-control: 40px;
  --size-control-lg: 48px;
  --size-control-sm: 32px;
  --size-input: 48px;
  --size-nav-item: 38px;
  --size-icon-tile: 40px;

  --width-sidebar: 280px;
  --width-rail: 72px;
  --width-content: 900px;
  --width-nav: 248px; /* our deviation: 280 is generous for a workspace shell */
  --measure: 58ch;
  --size-row: 40px; /* compact table row — see DESIGN_SYSTEM.md §9 */

  /* Scannable surfaces stay light in both themes. A QR on a dark ground will
     not read. Theme-invariant by requirement, not by oversight. */
  --color-scan-paper: var(--grey-000);
  --color-scan-ink: var(--grey-900);

  /* ---------- 7. Motion --------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ==========================================================================
   Dark theme — authored from the light rules, not inverted from them.
   No dark screen was supplied; see DESIGN_SYSTEM.md §1.
   Held constant: three text greys, one border weight, black-as-action
   becomes white-as-action, blue stays identity-only.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-page: #000000;
    --color-surface: #131314;
    --color-surface-sunk: #1c1c1e;
    --color-surface-raised: #1c1c1e;

    --color-border: #2a2a2d;
    --color-border-strong: #3a3a3e;

    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-text-muted: #6e6e73;
    --color-text-inverse: #0a0a0a;

    --color-action: #f5f5f7;
    --color-action-hover: #e2e2e5;
    --color-action-label: #0a0a0a;
    --color-accent: #5a9ef8;
    --color-focus: #5a9ef8;

    --color-success: #4bbb8a;
    --color-success-bg: #14261e;
    --color-warn: #d4a03c;
    --color-warn-bg: #2a2213;
    --color-crit: #e8796d;
    --color-crit-bg: #2c1917;

    --shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #000000;
  --color-surface: #131314;
  --color-surface-sunk: #1c1c1e;
  --color-surface-raised: #1c1c1e;

  --color-border: #2a2a2d;
  --color-border-strong: #3a3a3e;

  --color-text-primary: #f5f5f7;
  --color-text-secondary: #a1a1a6;
  --color-text-muted: #6e6e73;
  --color-text-inverse: #0a0a0a;

  --color-action: #f5f5f7;
  --color-action-hover: #e2e2e5;
  --color-action-label: #0a0a0a;
  --color-accent: #5a9ef8;
  --color-focus: #5a9ef8;

  --color-success: #4bbb8a;
  --color-success-bg: #14261e;
  --color-warn: #d4a03c;
  --color-warn-bg: #2a2213;
  --color-crit: #e8796d;
  --color-crit-bg: #2c1917;

  --shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.55);
}

/* Scrollbars — follow the theme via tokens. Firefox first, then WebKit. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-muted);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}