/* Restorly design tokens — Direction C "Clear", light + dark.
 *
 * Theme selection (in priority order):
 *   <html data-theme="light">   forced light
 *   <html data-theme="dark">    forced dark
 *   no data-theme               follows the OS (prefers-color-scheme)
 * Density:
 *   <html data-density="compact">  denser tables and cards (operator mode)
 *
 * Every colour a component uses must come from a token below. No raw hex in components.
 * Palette: deep navy, light and dark (owner, 2026-10-04; ADR 0079). The
 * --band-* tokens are the navy bands of the website (pricing header,
 * examples) and --group-bg the tinted group rows of tables.
 */

:root {
  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-xs: 12px;   /* labels, table headers */
  --text-sm: 14px;   /* secondary text, table cells */
  --text-md: 15px;   /* default UI text */
  --text-lg: 17px;   /* card titles */
  --text-xl: 20px;   /* section titles, lead paragraphs */
  --text-2xl: 26px;
  --text-3xl: 34px;  /* page headline in the console */
  --text-4xl: 48px;
  --text-5xl: 72px;  /* website hero */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  /* ---- Spacing (4 px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --topbar-height: 72px;
  --content-max: 1440px;
  --side-panel: 320px;
  --touch-target: 44px;

  /* ---- Density (comfortable default) ---- */
  --row-pad-y: 14px;
  --row-pad-x: 20px;
  --card-pad: 20px;
  --gap-grid: 16px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ---- Light theme (default) ---- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EEF2F7;             /* console app background */
  --bg-page: #F2F5F9;        /* website background */
  --surface: #FFFFFF;        /* cards, panels, top bar */
  --surface-2: #EDF1F6;      /* subtle fills, secondary buttons, active nav */
  --border: #DCE3EC;
  --border-strong: #C5CFDC;

  --text: #0F1E33;
  --text-muted: #3A4A60;     /* 9.3:1 on white */
  --text-subtle: #56657A;    /* 6.2:1 on white; labels only */

  --primary: #12355B;        /* deep navy (owner, 2026-10-04, ADR 0079): buttons; white text 12.4:1 */
  --primary-hover: #0B2440;
  --on-primary: #FFFFFF;
  --link: #1F5A96;
  --link-hover: #12355B;

  --highlight: #FFE9A8;      /* announcement pills, avatar, "new" badges */
  --on-highlight: #3D2E00;

  --success-bg: #DDF3E6;
  --success-fg: #11613A;
  --warning-bg: #FFE9A8;
  --warning-fg: #6B4A00;
  --danger-bg: #FCE3DF;
  --danger-fg: #922316;
  --info-bg: #E6EDF5;
  --info-fg: #12355B;
  --neutral-bg: #EDF1F6;
  --neutral-fg: #3A4A60;

  --progress-track: #DCE3EC;
  --progress-fill: #12355B;

  --focus-ring: 0 0 0 3px rgba(31, 90, 150, 0.4);
  --shadow-card: 0 1px 2px rgba(15, 30, 51, 0.05), 0 6px 18px -8px rgba(15, 30, 51, 0.16);
  --shadow-pop: 0 12px 32px -12px rgba(15, 30, 51, 0.25);
  --band-bg: #12355B;
  --band-featured: #1E4C7E;
  --band-fg: #FFFFFF;
  --band-muted: #C9D6E6;
  --band-tint: #E6EDF6;
  --group-bg: #E9EEF5;
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A1322;
  --bg-page: #0A1322;
  --surface: #101C30;
  --surface-2: #16263D;
  --border: #22354F;
  --border-strong: #2F4766;

  --text: #E6EDF5;
  --text-muted: #A9B7C9;     /* 8.7:1 on surface */
  --text-subtle: #8A9AB0;    /* 6.2:1 on surface; labels only */

  --primary: #8FB4E0;        /* button fill; --on-primary text 7.7:1 */
  --primary-hover: #A9C6E9;
  --on-primary: #0B1F38;
  --link: #9DC0EA;           /* links and active nav text on dark, 8.9:1 on surface */
  --link-hover: #C4D9F2;

  --highlight: #3D300B;
  --on-highlight: #FFE08A;

  --success-bg: #123D2A;
  --success-fg: #7FE0A8;
  --warning-bg: #3D300B;
  --warning-fg: #FFD36B;
  --danger-bg: #4A1A17;
  --danger-fg: #FF9C92;
  --info-bg: #15294A;
  --info-fg: #A9C8EC;
  --neutral-bg: #16263D;
  --neutral-fg: #A9B7C9;

  --progress-track: #22354F;
  --progress-fill: #8FB4E0;

  --focus-ring: 0 0 0 3px rgba(143, 180, 224, 0.45);
  --shadow-card: none;
  --shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --band-bg: #13294A;
  --band-featured: #1B3A63;
  --band-fg: #E6EDF5;
  --band-muted: #AFC2D9;
  --band-tint: #132239;
  --group-bg: #0D182A;
}

/* Follow the OS when the user has not chosen a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0A1322;
    --bg-page: #0A1322;
    --surface: #101C30;
    --surface-2: #16263D;
    --border: #22354F;
    --border-strong: #2F4766;
    --text: #E6EDF5;
    --text-muted: #A9B7C9;
    --text-subtle: #8A9AB0;
    --primary: #8FB4E0;
    --primary-hover: #A9C6E9;
    --on-primary: #0B1F38;
    --link: #9DC0EA;
    --link-hover: #C4D9F2;
    --highlight: #3D300B;
    --on-highlight: #FFE08A;
    --success-bg: #123D2A;
    --success-fg: #7FE0A8;
    --warning-bg: #3D300B;
    --warning-fg: #FFD36B;
    --danger-bg: #4A1A17;
    --danger-fg: #FF9C92;
    --info-bg: #15294A;
    --info-fg: #A9C8EC;
    --neutral-bg: #16263D;
    --neutral-fg: #A9B7C9;
    --progress-track: #22354F;
    --progress-fill: #8FB4E0;
    --focus-ring: 0 0 0 3px rgba(143, 180, 224, 0.45);
    --shadow-card: none;
    --shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --band-bg: #13294A;
  --band-featured: #1B3A63;
  --band-fg: #E6EDF5;
  --band-muted: #AFC2D9;
  --band-tint: #132239;
  --group-bg: #0D182A;
}
}

/* ---- Compact density (operator mode, from Direction B) ---- */
:root[data-density="compact"] {
  --row-pad-y: 9px;
  --row-pad-x: 14px;
  --card-pad: 14px;
  --gap-grid: 10px;
  --text-md: 14px;
  --text-sm: 13px;
}

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