/*
 * Juxtapose Tailwind v4 theme.
 *
 * Primer-derived design tokens. We sample GitHub Primer's published values
 * (light theme) and re-publish them under shorter names. Every token has a
 * comment citing the Primer name it derives from. NO @primer/primitives
 * runtime dep — the values are stable, our surface is small, and the
 * indirection costs more than it saves.
 *
 * The brand mandate: "extension of GitHub." Surfaces, borders, type,
 * density, motion, and component vocabulary all defer to Primer. The
 * wordmark (Inter Tight, kerned-emphasis variant C) is the only deliberate
 * divergence — it's the brand mark, and brand marks should be distinct
 * from the platform they live next to.
 *
 * Consumed by apps/dashboard/src/app.css via:
 *   @import "tailwindcss";
 *   @import "@juxtapose/shared/theme.css";
 *
 * IMPORTANT: design-tokens.ts is the JS-side mirror. When tokens change here,
 * mirror them in design-tokens.ts in the same commit. A generator that
 * derives one from the other is deferred; for v1, hand-mirror and keep
 * both in sync.
 *
 * Source of truth for the brief: keel/ui/style.md (U0).
 */

:root {
  /* ── Neutral / grey scale ────────────────────────────────────────────────
     Primer's `gray` scale, sampled from primer/primitives light theme.
     We re-name `gray-N` → `neutral-N` to keep the var namespace short. */
  --color-neutral-0: #ffffff;   /* Primer scale.gray.0 — canvas */
  --color-neutral-50: #f6f8fa;  /* Primer scale.gray.1 — bgColor-muted */
  --color-neutral-100: #eaeef2; /* Primer scale.gray.2 — border-muted bg */
  --color-neutral-200: #d1d9e0; /* Primer scale.gray.3 — borderColor-default */
  --color-neutral-300: #afb8c1; /* Primer scale.gray.4 — borderColor-muted text */
  --color-neutral-400: #818b98; /* Primer scale.gray.5 — fgColor-disabled */
  --color-neutral-500: #6e7781; /* Primer scale.gray.6 — fgColor-muted alt */
  --color-neutral-600: #59636e; /* Primer scale.gray.7 — fgColor-muted */
  --color-neutral-700: #424a53; /* Primer scale.gray.8 — fgColor-default alt */
  --color-neutral-800: #32383f; /* Primer scale.gray.9 — emphasis bg */
  --color-neutral-900: #24292f; /* Primer scale.gray.9.alt — inverse emphasis */
  --color-neutral-950: #1f2328; /* Primer fgColor-default */

  /* ── Accent (blue) — primary actions, links, focus ring ──────────────── */
  --color-accent-50: #ddf4ff;   /* Primer scale.blue.0 — bgColor-accent-muted-bg */
  --color-accent-100: #b6e3ff;  /* Primer scale.blue.1 */
  --color-accent-200: #80ccff;  /* Primer scale.blue.2 */
  --color-accent-300: #54aeff;  /* Primer scale.blue.3 */
  --color-accent-400: #218bff;  /* Primer scale.blue.4 */
  --color-accent-500: #0969da;  /* Primer scale.blue.5 — bgColor-accent-emphasis */
  --color-accent-600: #0550ae;  /* Primer scale.blue.6 — bgColor-accent-emphasis hover */
  --color-accent-700: #033d8b;  /* Primer scale.blue.7 */
  --color-accent-800: #0a3069;  /* Primer scale.blue.8 */
  --color-accent-900: #002155;  /* Primer scale.blue.9 */

  /* ── Success (green) — pass, approve ─────────────────────────────────── */
  --color-success-50: #dafbe1;   /* Primer scale.green.0 */
  --color-success-100: #aceebb;  /* Primer scale.green.1 */
  --color-success-500: #1f883d;  /* Primer scale.green.5 — bgColor-success-emphasis */
  --color-success-600: #1a7f37;  /* Primer scale.green.6 — bgColor-success-emphasis hover */
  --color-success-700: #116329;  /* Primer scale.green.7 */

  /* ── Danger (red) — fail, deny, destructive ──────────────────────────── */
  --color-danger-50: #ffebe9;    /* Primer scale.red.0 */
  --color-danger-100: #ffcecb;   /* Primer scale.red.1 */
  --color-danger-500: #d1242f;   /* Primer scale.red.5 — bgColor-danger-emphasis */
  --color-danger-600: #cf222e;   /* Primer scale.red.6 — bgColor-danger-emphasis hover */
  --color-danger-700: #a40e26;   /* Primer scale.red.7 */

  /* ── Attention (yellow) — warning, skip, pending review ──────────────── */
  --color-attention-50: #fff8c5;   /* Primer scale.yellow.0 */
  --color-attention-100: #fae17d;  /* Primer scale.yellow.1 */
  --color-attention-500: #9a6700;  /* Primer scale.yellow.5 — bgColor-attention-emphasis */
  --color-attention-600: #7d4e00;  /* Primer scale.yellow.6 */
  --color-attention-700: #633c01;  /* Primer scale.yellow.7 */

  /* ── Semantic surface aliases ────────────────────────────────────────────
     Short names for the surfaces components actually use. These map to the
     scales above so consumer files don't need to know which numeric step
     corresponds to "default page background." */
  --color-bg-default: var(--color-neutral-0);     /* Primer bgColor-default */
  --color-bg-subtle: var(--color-neutral-50);     /* Primer bgColor-muted */
  --color-bg-inset: var(--color-neutral-100);     /* Primer bgColor-inset — slightly recessed */
  --color-bg-emphasis: var(--color-neutral-900);  /* Primer bgColor-emphasis — inverse */

  --color-fg-default: var(--color-neutral-950);   /* Primer fgColor-default */
  --color-fg-muted: var(--color-neutral-600);     /* Primer fgColor-muted */
  --color-fg-subtle: var(--color-neutral-500);    /* Primer fgColor-subtle */
  --color-fg-on-emphasis: var(--color-neutral-0); /* Primer fgColor-onEmphasis */

  --color-border-default: var(--color-neutral-200); /* Primer borderColor-default */
  --color-border-muted: var(--color-neutral-100);   /* Primer borderColor-muted */

  /* Status aliases — what the domain calls things, mapped to semantic colors */
  --color-status-pass: var(--color-success-500);
  --color-status-fail: var(--color-danger-500);
  --color-status-deny: var(--color-danger-700);    /* deeper red than fail */
  --color-status-new: var(--color-accent-500);     /* blue — awaiting review */
  --color-status-skip: var(--color-neutral-400);   /* muted grey */

  /* ── Type families ───────────────────────────────────────────────────────
     Body, UI, and display all use GitHub's system stack. The brand wordmark
     is the only place we would diverge — and it's rendered as outlined SVG
     paths (see apps/dashboard/src/lib/components/Wordmark.svelte), so no
     additional font load is required. */
  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-display: var(--font-sans);
  --font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

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

  /* ── Radius — Primer uses 6px for buttons/inputs, 12px for cards ─────── */
  --radius-sm: 4px;
  --radius-md: 6px;    /* Primer default — buttons, inputs, labels */
  --radius-lg: 12px;   /* Primer overlay — cards, dialogs */
  --radius-full: 9999px;

  /* Letter spacing — wordmark uses tight tracking (brand-locked) */
  --tracking-wordmark: -0.04em;

  /* ── Motion — minimal. One curve, one duration. ──────────────────────────
     Applied to color/background-color/border-color on hover/focus. No
     reveal staggers, no spring physics. Higher values exist in CSS theory
     but the keel forbids using them. */
  --motion: 120ms ease;

  /* ── Elevation — Primer uses 1px borders, NOT shadows, for elevation.
     We keep one shadow token for the rare overlay case (dropdown, dialog)
     where 1px borders aren't enough to visually float over a busy page.  */
  --shadow-overlay: 0 8px 24px rgba(31, 35, 40, 0.12);
}

/* Body-level type defaults: tabular numerals so timestamps and counts
   don't shimmy when the rendered digit-widths differ. */
:root {
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* ── Back-compat aliases ────────────────────────────────────────────────────
   The previous direction (warm cream / ink / terracotta) shipped tokens
   that are still referenced by ~13 consumer files. We alias them here so
   those files render against the new palette without per-file edits, then
   migrate consumers one PR at a time. Once the last consumer is migrated,
   these aliases get deleted.

   Mapping intent: cream-50 (the page background) was warm white →
   maps to neutral-0 (white). Cream-100/200 (subtle surfaces) → neutral-50/100.
   Cream-900/950 (dark surfaces) → neutral-900/950. Ink-* (text) → fg-*.
   Brand-* (terracotta accent) → accent-* (Primer blue). This will look
   visually wrong on some pages (any tight terracotta hover state will look
   blue); that's the point — migration is fast, not invisible. */
:root {
  --color-cream-50: var(--color-neutral-0);
  --color-cream-100: var(--color-neutral-50);
  --color-cream-200: var(--color-neutral-100);
  --color-cream-300: var(--color-neutral-200);
  --color-cream-400: var(--color-neutral-300);
  --color-cream-500: var(--color-neutral-400);
  --color-cream-600: var(--color-neutral-500);
  --color-cream-700: var(--color-neutral-600);
  --color-cream-800: var(--color-neutral-800);
  --color-cream-900: var(--color-neutral-900);
  --color-cream-950: var(--color-neutral-950);

  --color-ink-base: var(--color-fg-default);
  --color-ink-paper: var(--color-fg-default);
  --color-ink-soft: var(--color-fg-muted);
  --color-ink-muted: var(--color-fg-muted);
  --color-ink-faint: var(--color-fg-subtle);

  --color-brand-50: var(--color-accent-50);
  --color-brand-100: var(--color-accent-100);
  --color-brand-200: var(--color-accent-200);
  --color-brand-300: var(--color-accent-300);
  --color-brand-400: var(--color-accent-400);
  --color-brand-500: var(--color-accent-500);
  --color-brand-600: var(--color-accent-600);
  --color-brand-700: var(--color-accent-700);
  --color-brand-800: var(--color-accent-800);
  --color-brand-900: var(--color-accent-900);

  /* Old motion vars — flatten to one. The C-direction's --motion-slow
     reveal animations are deleted; any remaining consumer falls back to
     the same 120ms curve. */
  --motion-slow: var(--motion);

  /* Old shadow tokens. The Primer aesthetic uses 1px borders instead of
     hairline shadows for card elevation, so these collapse to no-ops or
     to a minimal border style. Consumers using them will look flatter,
     which is correct — that's the migration. */
  --shadow-hairline: inset 0 0 0 1px var(--color-border-default);
  --shadow-card: inset 0 0 0 1px var(--color-border-default);
  --shadow-card-hover: inset 0 0 0 1px var(--color-border-muted);
}