/* Design tokens: the only place colours, spacing, type, radii, shadows and motion are defined.
   One token set, two themes. The theme follows prefers-color-scheme unless <html data-theme>
   pins it (web/theme.js). Values come from the design prototype (docs/design/design-system.md
   maps its names to these); contrast pairs are checked there too. Neutrals lean slightly toward
   the indigo accent (hue 270). */

:root {
  color-scheme: light;

  /* --- colour: surfaces */
  --bg: oklch(0.992 0.002 270);           /* page */
  --bg-subtle: oklch(0.975 0.004 270);    /* sidebar, table header */
  --bg-raised: oklch(1 0 0);              /* card, dialog, popover */
  --bg-muted: oklch(0.955 0.006 270);     /* hover, skeleton, tag */
  --bg-emphasis: oklch(0.94 0.02 270);    /* current nav item, selected row, palette item */
  --bg-overlay: oklch(0.2 0.02 270 / 0.32);
  --code-bg: oklch(0.97 0.004 270);

  /* --- colour: lines */
  --border: oklch(0.93 0.005 270);        /* hairlines between rows and sections */
  --border-strong: oklch(0.86 0.008 270); /* card and panel edges, secondary buttons */
  --border-control: oklch(0.64 0.012 270);/* input and checkbox edges: 3:1 on --bg (WCAG 1.4.11) */

  /* --- colour: text */
  --fg: oklch(0.22 0.015 270);
  --fg-muted: oklch(0.47 0.015 270);      /* secondary text */
  --fg-subtle: oklch(0.53 0.012 270);     /* metadata, placeholders: 4.5:1 on --bg-muted */
  --fg-on-accent: oklch(0.99 0 0);

  /* --- colour: the one accent (indigo) */
  --accent: oklch(0.52 0.17 272);
  --accent-hover: oklch(0.47 0.17 272);
  --accent-text: oklch(0.52 0.17 272);    /* links and accent text */
  --accent-subtle: oklch(0.95 0.03 272);
  --focus: oklch(0.62 0.17 272);

  /* --- colour: state. The bare name is the solid colour (dots, icons); -text is for words. */
  --success: oklch(0.55 0.13 155);
  --success-text: oklch(0.5 0.13 155);
  --success-subtle: oklch(0.95 0.04 155);
  --warn: oklch(0.58 0.13 70);
  --warn-text: oklch(0.52 0.12 65);
  --warn-subtle: oklch(0.96 0.05 85);
  --danger: oklch(0.55 0.19 25);
  --danger-hover: oklch(0.5 0.19 25);
  --danger-text: oklch(0.55 0.19 25);
  --danger-subtle: oklch(0.96 0.03 25);
  --plan: oklch(0.52 0.12 300);           /* "planned" badges */
  --plan-subtle: oklch(0.96 0.025 300);
  --success-border: color-mix(in oklch, var(--success) 40%, transparent);
  --warn-border: color-mix(in oklch, var(--warn) 40%, transparent);
  --danger-border: color-mix(in oklch, var(--danger) 40%, transparent);

  /* --- colour: identity (the two tools, avatar fills in six hues) */
  --tool-cc: oklch(0.62 0.14 45);
  --tool-cx: oklch(0.55 0.1 200);
  --av-l: 0.9;
  --av-c: 0.06;
  --av-fg-l: 0.38;

  /* --- type (system fonts only: no download, no CDN) */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;     /* 12px: badges, kbd, uppercase labels */
  --text-sm: 0.8125rem;   /* 13px: metadata, hints */
  --text-base: 0.875rem;  /* 14px: body, controls, rows */
  --text-md: 1rem;        /* 16px: lead text, inputs on phones (no iOS zoom) */
  --text-lg: 1.125rem;    /* 18px: h2 */
  --text-xl: 1.375rem;    /* 22px: h1 */
  --text-2xl: 1.75rem;    /* 28px: figures, display */
  --text-title: 1.75rem;  /* 28px: the page h1 (20px on phones) */
  --measure: 65ch;        /* reading width for running text (subtitles, summaries) */
  --leading-tight: 1.25;
  --leading: 1.5;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-label: 0.04em; /* uppercase labels: section heads, table heads, stat labels */

  /* --- space (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- sizes */
  --row-height: 3.5rem;           /* 56px list rows: title over a sub line */
  --row-height-table: 2.75rem;    /* 44px table rows */
  --control-height: 2.25rem;      /* 36px buttons and inputs */
  --control-height-sm: 1.75rem;   /* 28px compact buttons */
  --search-height: 2.75rem;       /* 44px search field */
  --sidebar-width: 15rem;
  --rail-width: 20rem;
  --tabbar-height: 3.5rem;
  --content-max: 100rem;          /* a cap for very wide screens only: pages are full width */
  --page-pad: 3rem;               /* 48px desktop; 24px under 1100px, 16px on phones */
  --gap-page: 1.5rem;             /* 24px between the blocks of a page */
  --gap-section: 2.5rem;          /* 40px between sections inside a main column */
  --gap-split: 3rem;              /* 48px between the main column and the rail */
  --panel-pad: 1.5rem;            /* 24px inside cards and panels */
  --content-narrow: 30rem;        /* sign-in, claim */

  /* --- radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* --- elevation (cards use a hairline, not a shadow; shadows only for things that float) */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 270 / 0.06);
  --shadow-md: 0 1px 2px oklch(0.2 0.02 270 / 0.06), 0 8px 28px oklch(0.2 0.02 270 / 0.12);
  --shadow-lg: 0 2px 4px oklch(0.2 0.02 270 / 0.08), 0 16px 48px oklch(0.2 0.02 270 / 0.18);

  /* --- motion */
  --duration-fast: 80ms;
  --duration: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- layers */
  --z-sticky: 10;
  --z-nav: 20;
  --z-popover: 30;
  --z-dialog: 40;
  --z-toast: 50;
}

/* Dark: the same names, different values. Two blocks so "system" follows the OS and an explicit
   choice wins either way. Keep them identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: oklch(0.17 0.008 270);
    --bg-subtle: oklch(0.155 0.008 270);
    --bg-raised: oklch(0.2 0.009 270);
    --bg-muted: oklch(0.235 0.01 270);
    --bg-emphasis: oklch(0.27 0.03 272);
    --bg-overlay: oklch(0 0 0 / 0.5);
    --code-bg: oklch(0.15 0.008 270);
    --border: oklch(0.25 0.008 270);
    --border-strong: oklch(0.32 0.01 270);
    --border-control: oklch(0.52 0.012 270);
    --fg: oklch(0.93 0.006 270);
    --fg-muted: oklch(0.72 0.01 270);
    --fg-subtle: oklch(0.64 0.01 270);
    --fg-on-accent: oklch(0.17 0.02 272);
    --accent: oklch(0.7 0.14 272);
    --accent-hover: oklch(0.76 0.13 272);
    --accent-text: oklch(0.7 0.14 272);
    --accent-subtle: oklch(0.28 0.05 272);
    --focus: oklch(0.72 0.14 272);
    --success: oklch(0.74 0.13 155);
    --success-text: oklch(0.74 0.13 155);
    --success-subtle: oklch(0.27 0.04 155);
    --warn: oklch(0.8 0.12 80);
    --warn-text: oklch(0.8 0.12 80);
    --warn-subtle: oklch(0.29 0.045 75);
    --danger: oklch(0.72 0.15 25);
    --danger-hover: oklch(0.77 0.13 25);
    --danger-text: oklch(0.72 0.15 25);
    --danger-subtle: oklch(0.28 0.05 25);
    --plan: oklch(0.76 0.1 300);
    --plan-subtle: oklch(0.28 0.04 300);
    --tool-cc: oklch(0.74 0.12 50);
    --tool-cx: oklch(0.74 0.09 200);
    --av-l: 0.34;
    --av-c: 0.06;
    --av-fg-l: 0.9;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
    --shadow-md: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 32px oklch(0 0 0 / 0.45);
    --shadow-lg: 0 2px 4px oklch(0 0 0 / 0.35), 0 16px 48px oklch(0 0 0 / 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(0.17 0.008 270);
  --bg-subtle: oklch(0.155 0.008 270);
  --bg-raised: oklch(0.2 0.009 270);
  --bg-muted: oklch(0.235 0.01 270);
  --bg-emphasis: oklch(0.27 0.03 272);
  --bg-overlay: oklch(0 0 0 / 0.5);
  --code-bg: oklch(0.15 0.008 270);
  --border: oklch(0.25 0.008 270);
  --border-strong: oklch(0.32 0.01 270);
  --border-control: oklch(0.52 0.012 270);
  --fg: oklch(0.93 0.006 270);
  --fg-muted: oklch(0.72 0.01 270);
  --fg-subtle: oklch(0.64 0.01 270);
  --fg-on-accent: oklch(0.17 0.02 272);
  --accent: oklch(0.7 0.14 272);
  --accent-hover: oklch(0.76 0.13 272);
  --accent-text: oklch(0.7 0.14 272);
  --accent-subtle: oklch(0.28 0.05 272);
  --focus: oklch(0.72 0.14 272);
  --success: oklch(0.74 0.13 155);
  --success-text: oklch(0.74 0.13 155);
  --success-subtle: oklch(0.27 0.04 155);
  --warn: oklch(0.8 0.12 80);
  --warn-text: oklch(0.8 0.12 80);
  --warn-subtle: oklch(0.29 0.045 75);
  --danger: oklch(0.72 0.15 25);
  --danger-hover: oklch(0.77 0.13 25);
  --danger-text: oklch(0.72 0.15 25);
  --danger-subtle: oklch(0.28 0.05 25);
  --plan: oklch(0.76 0.1 300);
  --plan-subtle: oklch(0.28 0.04 300);
  --tool-cc: oklch(0.74 0.12 50);
  --tool-cx: oklch(0.74 0.09 200);
  --av-l: 0.34;
  --av-c: 0.06;
  --av-fg-l: 0.9;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 32px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 2px 4px oklch(0 0 0 / 0.35), 0 16px 48px oklch(0 0 0 / 0.55);
}

@media (max-width: 1100px) { :root { --page-pad: 1.5rem; } }
@media (max-width: 719.98px) { :root { --page-pad: 1rem; --gap-section: 2rem; --panel-pad: 1rem; --text-title: 1.25rem; } }

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