/* ============================================================
   Etch Design Language — Tokens
   ------------------------------------------------------------
   All colours are stored as fully-formed CSS values so vanilla
   consumers can write `color: var(--ds-foreground)` directly.

   CONTRACT: this is the single source for the viewer; the WPF
   side hand-mirrors these values as Etch* brushes in
   app/Theme.cs — change both together so the FETCH chrome and
   the prepress viewer never drift apart.
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --ds-brand-magenta: #8e3a80;            /* hsl(310 42% 39%) */
  --ds-brand-magenta-on-dark: #c466b3;    /* hsl(310 50% 60%) — for dark nav strips */

  /* ---------- Surface / text (light, default) ---------- */
  --ds-background: hsl(240 5% 96%);
  --ds-foreground: hsl(240 10% 3.9%);

  --ds-card: hsl(0 0% 100%);
  --ds-card-foreground: hsl(240 10% 3.9%);

  --ds-popover: hsl(0 0% 100%);
  --ds-popover-foreground: hsl(240 10% 3.9%);

  --ds-primary: hsl(310 42% 39%);
  --ds-primary-foreground: hsl(0 0% 98%);

  --ds-secondary: hsl(240 4.8% 95.9%);
  --ds-secondary-foreground: hsl(240 5.9% 10%);

  --ds-muted: hsl(240 4.8% 95.9%);
  --ds-muted-foreground: hsl(240 3.8% 46.1%);

  --ds-accent: hsl(240 4.8% 95.9%);
  --ds-accent-foreground: hsl(240 5.9% 10%);

  --ds-destructive: hsl(0 84.2% 60.2%);
  --ds-destructive-foreground: hsl(0 0% 98%);

  --ds-border: hsl(240 5.9% 90%);
  --ds-input: hsl(240 5.9% 90%);
  --ds-ring: hsl(310 42% 39%);

  /* ---------- Status palette (light) ---------- */
  --ds-emerald-bg: #d1fae5;  --ds-emerald-fg: #064e3b;
  --ds-amber-bg:   #fef3c7;  --ds-amber-fg:   #78350f;
  --ds-red-bg:     #fee2e2;  --ds-red-fg:     #7f1d1d;
  --ds-zinc-bg:    #f4f4f5;  --ds-zinc-fg:    #3f3f46;
  --ds-blue-bg:    #dbeafe;  --ds-blue-fg:    #1e3a8a;
  --ds-purple-bg:  #f3e8ff;  --ds-purple-fg:  #581c87;
  --ds-sky-bg:     #e0f2fe;  --ds-sky-fg:     #0c4a6e;

  /* ---------- Shape ---------- */
  --ds-radius: 0.5rem;
  --ds-radius-sm: calc(var(--ds-radius) - 4px);
  --ds-radius-md: calc(var(--ds-radius) - 2px);
  --ds-radius-lg: var(--ds-radius);

  /* ---------- Elevation ---------- */
  --ds-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);

  /* ---------- Typography ---------- */
  --ds-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;
}

/* ============================================================
   Dark
   ============================================================ */
.dark {
  color-scheme: dark;

  --ds-background: hsl(240 10% 3.9%);
  --ds-foreground: hsl(0 0% 98%);

  --ds-card: hsl(240 8% 9%);
  --ds-card-foreground: hsl(0 0% 98%);

  --ds-popover: hsl(240 8% 9%);
  --ds-popover-foreground: hsl(0 0% 98%);

  --ds-primary: hsl(310 50% 60%);
  --ds-primary-foreground: hsl(0 0% 98%);

  --ds-secondary: hsl(240 3.7% 15.9%);
  --ds-secondary-foreground: hsl(0 0% 98%);

  --ds-muted: hsl(240 3.7% 15.9%);
  --ds-muted-foreground: hsl(240 5% 64.9%);

  --ds-accent: hsl(240 3.7% 15.9%);
  --ds-accent-foreground: hsl(0 0% 98%);

  --ds-destructive: hsl(0 62.8% 30.6%);
  --ds-destructive-foreground: hsl(0 0% 98%);

  --ds-border: hsl(240 3.7% 15.9%);
  --ds-input: hsl(240 3.7% 15.9%);
  --ds-ring: hsl(310 50% 60%);

  /* Darker, deeper status surfaces. Foreground stays light-ish. */
  --ds-emerald-bg: hsl(160 60% 12% / 0.6);  --ds-emerald-fg: hsl(152 65% 75%);
  --ds-amber-bg:   hsl(40 80% 12% / 0.6);   --ds-amber-fg:   hsl(45 90% 80%);
  --ds-red-bg:     hsl(0 60% 14% / 0.6);    --ds-red-fg:     hsl(0 85% 85%);
  --ds-zinc-bg:    hsl(240 5% 16%);         --ds-zinc-fg:    hsl(240 5% 80%);
  --ds-blue-bg:    hsl(220 70% 14% / 0.6);  --ds-blue-fg:    hsl(215 90% 85%);
  --ds-purple-bg:  hsl(280 50% 16% / 0.6);  --ds-purple-fg:  hsl(280 85% 85%);
  --ds-sky-bg:     hsl(200 70% 14% / 0.6);  --ds-sky-fg:     hsl(200 90% 85%);
}

/* ============================================================
   Dark Blue — navy cast over dark, brand magenta stays
   ============================================================ */
.dark.theme-blue {
  --ds-background: hsl(220 50% 8%);
  --ds-foreground: hsl(210 20% 96%);

  --ds-card: hsl(220 40% 15%);
  --ds-card-foreground: hsl(210 20% 96%);

  --ds-popover: hsl(220 40% 15%);
  --ds-popover-foreground: hsl(210 20% 96%);

  --ds-secondary: hsl(220 30% 20%);
  --ds-secondary-foreground: hsl(210 20% 96%);

  --ds-muted: hsl(220 30% 20%);
  --ds-muted-foreground: hsl(215 18% 70%);

  --ds-accent: hsl(220 30% 20%);
  --ds-accent-foreground: hsl(210 20% 96%);

  --ds-border: hsl(220 28% 22%);
  --ds-input: hsl(220 28% 22%);
}

/* ============================================================
   High Contrast — pure black/white, brightened brand + borders
   ============================================================ */
.dark.theme-high-contrast {
  --ds-background: hsl(0 0% 0%);
  --ds-foreground: hsl(0 0% 100%);

  --ds-card: hsl(0 0% 10%);
  --ds-card-foreground: hsl(0 0% 100%);

  --ds-popover: hsl(0 0% 12%);
  --ds-popover-foreground: hsl(0 0% 100%);

  --ds-primary: hsl(310 80% 72%);
  --ds-primary-foreground: hsl(0 0% 0%);

  --ds-secondary: hsl(0 0% 14%);
  --ds-secondary-foreground: hsl(0 0% 100%);

  --ds-muted: hsl(0 0% 12%);
  --ds-muted-foreground: hsl(0 0% 85%);

  --ds-accent: hsl(0 0% 18%);
  --ds-accent-foreground: hsl(0 0% 100%);

  --ds-destructive: hsl(0 95% 60%);
  --ds-destructive-foreground: hsl(0 0% 100%);

  --ds-border: hsl(0 0% 40%);
  --ds-input: hsl(0 0% 40%);
  --ds-ring: hsl(310 80% 72%);
}