/* Design tokens (PRD §11). Every component reads colors/radii through these
 * variables — no hard-coded values inside component CSS.
 *
 * Dark mode (PRD §20): an explicit `data-theme="dark"|"light"` on <html>
 * always wins; with no explicit choice, `prefers-color-scheme` decides.
 * Both paths are defined here so JS-less visitors still get a correct theme.
 */

:root {
  --ui-background: #ffffff;
  --ui-foreground: #18181b;

  --ui-primary: #18181b;
  --ui-primary-foreground: #fafafa;

  --ui-secondary: #f4f4f5;
  --ui-secondary-foreground: #18181b;

  --ui-muted: #f4f4f5;
  --ui-muted-foreground: #71717a;

  --ui-accent: #f4f4f5;
  --ui-accent-foreground: #18181b;

  --ui-danger: #dc2626;
  --ui-danger-foreground: #fafafa;

  --ui-success: #16a34a;
  --ui-success-foreground: #fafafa;

  --ui-warning: #d97706;
  --ui-warning-foreground: #fafafa;

  --ui-border: #e4e4e7;
  --ui-input: #e4e4e7;
  --ui-ring: #18181b;

  --ui-radius-sm: 0.375rem;
  --ui-radius-md: 0.5rem;
  --ui-radius-lg: 0.75rem;

  /* Elevation. Light-mode shadows read as soft ambient occlusion; dark-mode
   * shadows need higher alpha (a shadow at light-mode strength is invisible
   * against a near-black background) plus a thin inset highlight is not
   * attempted here — shadcn achieves dark-mode elevation with alpha alone. */
  --ui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --ui-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  --ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);

  /* Reference values for JS (matchMedia) — the actual breakpoints are the
   * literal px figures below, since @media cannot consume custom properties. */
  --ui-breakpoint-tablet: 640px;
  --ui-breakpoint-desktop: 1024px;
  --ui-breakpoint-wide: 1280px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-background: #09090b;
    --ui-foreground: #fafafa;

    --ui-primary: #fafafa;
    --ui-primary-foreground: #18181b;

    --ui-secondary: #27272a;
    --ui-secondary-foreground: #fafafa;

    --ui-muted: #27272a;
    --ui-muted-foreground: #a1a1aa;

    --ui-accent: #27272a;
    --ui-accent-foreground: #fafafa;

    --ui-danger: #ef4444;
    --ui-danger-foreground: #18181b;

    --ui-success: #22c55e;
    --ui-success-foreground: #18181b;

    --ui-warning: #f59e0b;
    --ui-warning-foreground: #18181b;

    --ui-border: #27272a;
    --ui-input: #27272a;
    --ui-ring: #d4d4d8;

    --ui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 30%);
    --ui-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 40%);
    --ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 40%), 0 2px 4px -2px rgb(0 0 0 / 40%);
    --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 45%), 0 4px 6px -4px rgb(0 0 0 / 45%);
  }
}

:root[data-theme="dark"] {
  --ui-background: #09090b;
  --ui-foreground: #fafafa;

  --ui-primary: #fafafa;
  --ui-primary-foreground: #18181b;

  --ui-secondary: #27272a;
  --ui-secondary-foreground: #fafafa;

  --ui-muted: #27272a;
  --ui-muted-foreground: #a1a1aa;

  --ui-accent: #27272a;
  --ui-accent-foreground: #fafafa;

  --ui-danger: #ef4444;
  --ui-danger-foreground: #18181b;

  --ui-success: #22c55e;
  --ui-success-foreground: #18181b;

  --ui-warning: #f59e0b;
  --ui-warning-foreground: #18181b;

  --ui-border: #27272a;
  --ui-input: #27272a;
  --ui-ring: #d4d4d8;

  --ui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 30%);
  --ui-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 40%);
  --ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 40%), 0 2px 4px -2px rgb(0 0 0 / 40%);
  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 45%), 0 4px 6px -4px rgb(0 0 0 / 45%);
}