/* GENERATED by @vf/design scripts/sync-vendor.sh — DO NOT EDIT.
   source: tokens.css  ·  wovels/design-system  ·  v1.6.1
   Edit it upstream and re-run the script, or your change is lost on
   the next sync and the app silently drifts from the design system. */
/* --- end @vf/design vendor header --- */
/* ============================================================================
   @vf/design — design tokens (tier 1)
   ----------------------------------------------------------------------------
   Derived from BRAND.md (Visual Feeder), adapted from a print/deck palette to a
   sustained-use screen tool. Decisions and their rationale:

   - GROUND: "Graphite" — floor lifted off pure #000 and ceiling dropped off pure
     #FFF. Body text lands at ~15:1 (comfortable) instead of #000/#FFF's 21:1,
     which causes halation over an 8-hour reading session.
   - ACCENT: "Atlantic" — the CEO's Brand Blue (#5496E6) made legible. White
     button labels need 4.5:1, and #5496E6 only scores 3.05, so the *fill* is the
     same blue 14% darker (#2F76C2 -> 4.68:1). The CEO's exact blue survives
     unchanged as the text/link step on dark (6.03:1).
   - TYPE: Plus Jakarta Sans headings, Inter for all UI + numbers (tabular figures
     keep money aligned), IBM Plex Mono for Site IDs only (an ID is a code). The
     families and the scale live here as --vf-font-* / --vf-text-*, so a
     server-rendered consumer gets them without a Tailwind build.
   - SEMANTIC colors are per-mode and each verified >= 4.5:1 on its badge tint.
   - RADIUS: sharp (1-2px), per the mark's tapered geometry.

   This file is Tailwind-free: it only DEFINES the raw --vf-* runtime values,
   LIGHT as the default and dark behind `.dark` / [data-theme="dark"]. The
   Tailwind utility mapping lives in tailwind.css; the self-hosted @fontsource
   faces live in fonts.css. Any stack can consume this file directly, no build
   step required.
   ============================================================================ */

/* --- Runtime values: LIGHT is the default (matches the current app) --- */
:root {
  --vf-bg-base: #FFFFFF;
  --vf-surface: #F7F8FA;
  --vf-surface-2: #EFF1F4;
  --vf-hover: #F2F4F7;

  --vf-fg: #1B1D23;
  --vf-fg-muted: #5F6675;
  --vf-fg-subtle: #8A91A0;

  --vf-line: #E3E6EB;
  --vf-line-strong: #C7CCD6;

  --vf-accent: #2F76C2;
  --vf-accent-hover: #2A6AAF;  /* darker fill for hover; same in both modes */
  --vf-accent-fg: #FFFFFF;
  --vf-accent-text: #2468A8;   /* Brand Blue darkened for a white ground */
  --vf-accent-text-hover: #1B5183; /* link hover — steps toward the ground */

  /* Solid green for save/confirm buttons (fill mode-independent, white label 6.16:1).
     Distinct from the semantic --vf-ok (which is status-badge weight). */
  --vf-success: #2C6E3F;
  --vf-success-hover: #245732;
  --vf-success-fg: #FFFFFF;

  /* Solid red for confirm-destroy buttons — the mirror of --vf-success, and
     likewise mode-independent so the white label stays legible on dark, where
     the semantic --vf-bad lightens to a salmon that white can't sit on. */
  --vf-danger: #A33330;
  --vf-danger-hover: #862825;
  --vf-danger-fg: #FFFFFF;

  /* Gold "primary image" star. Sits on top of a photo rather than on a theme
     ground, so it is mode-independent like the overlay chrome below. */
  --vf-star: #E0A020;

  /* Floating overlay chrome (selection bar). It always CONTRASTS the content it
     floats over: LIGHT mode = a dark bar with white text; DARK mode inverts to a
     light bar with dark text (see the .dark override). The inverse-surface
     pattern — and the dark values are all existing light-palette tones, not a
     bespoke gray. Foreground is tokenized so the text flips with the bar. */
  --vf-overlay: #1B1D23;
  --vf-overlay-2: #2A2D35;        /* inner control fill (the board <select>) */
  --vf-overlay-fg: #FFFFFF;       /* primary text/label on the bar */
  --vf-overlay-fg-muted: #A9AFBC; /* secondary text (Clear, Map Preview, ...) */
  --vf-overlay-line: #454A55;     /* edge of the floating bar; see dark override */

  --vf-ok: #2C6E3F;
  --vf-warn: #755614;
  --vf-bad: #A33330;
  --vf-bad-hover: #862825;     /* destructive hover, text or fill */
  --vf-info: #1E5D97;
  /* Category hue. Carries no good/bad valence, unlike ok/warn/bad — for label
     axes (contact roles) that must not read as a status. Violet because every
     other tone in the ramp is blue, green, amber or red. */
  --vf-cat: #5B3FA8;
  --vf-neutral: #565C6A;

  /* --- TYPE. Mode-independent, so declared once here and never in the dark
     block. These are the runtime source of truth: tailwind.css re-references
     them via `@theme inline`, so a Tailwind app and a server-rendered app that
     reads this file directly can never drift apart. The faces themselves are
     declared in fonts.css; keep the "Variable" suffix — `font-family: "Inter"`
     does not match the variable face. --- */
  --vf-font-heading: "Plus Jakarta Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --vf-font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --vf-font-code: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Type scale — base X = 14px (0.875rem), deck multipliers. */
  --vf-text-caption: 0.75rem;    /* 12 */
  --vf-text-body: 0.875rem;      /* 14  (X) */
  --vf-text-sub: 1rem;           /* 16 */
  --vf-text-h5: 1.125rem;        /* 18  (X x 1.3) */
  --vf-text-h4: 1.375rem;        /* 22  (X x 1.6) */
  --vf-text-h3: 1.75rem;         /* 28  (X x 2.0) */
  --vf-text-h2: 2.1875rem;       /* 35  (X x 2.5) */
  --vf-text-h1: 3.0625rem;       /* 49  (X x 3.5) */

  /* Spacing rhythm — one framework-neutral 4px scale for layouts and patterns.
     Tailwind consumers use the equivalent standard utilities; vanilla consumers
     use these values directly so the two stacks keep the same rhythm. */
  --vf-space-1: 0.25rem;         /* 4 */
  --vf-space-2: 0.5rem;          /* 8 */
  --vf-space-3: 0.75rem;         /* 12 */
  --vf-space-4: 1rem;            /* 16 */
  --vf-space-5: 1.25rem;         /* 20 */
  --vf-space-6: 1.5rem;          /* 24 */
  --vf-space-8: 2rem;            /* 32 */
  --vf-space-12: 3rem;           /* 48 */
  --vf-space-16: 4rem;           /* 64 */

  /* Sharp radii, per the mark. Kept as --vf-* so Tailwind's rounded-* defaults
     (which the current components use) are untouched. */
  --vf-radius-xs: 1px;
  --vf-radius: 2px;
  --vf-radius-lg: 4px;

  /* --- Derived tokens. Custom-property var() references resolve where the
     derived property is declared, so mode-dependent mixes are repeated in the
     dark block below. Keep the recipes identical; only their inputs change. --- */
  --vf-ok-surface: color-mix(in oklab, var(--vf-ok) 14%, var(--vf-surface));
  --vf-warn-surface: color-mix(in oklab, var(--vf-warn) 14%, var(--vf-surface));
  --vf-bad-surface: color-mix(in oklab, var(--vf-bad) 14%, var(--vf-surface));
  --vf-info-surface: color-mix(in oklab, var(--vf-info) 14%, var(--vf-surface));
  --vf-cat-surface: color-mix(in oklab, var(--vf-cat) 14%, var(--vf-surface));

  /* Selection tint + hairline for the accent (mix into the row's surface). */
  --vf-accent-quiet: color-mix(in oklab, var(--vf-accent-text) 13%, var(--vf-surface));
  --vf-accent-line: color-mix(in oklab, var(--vf-accent-text) 42%, var(--vf-surface));

  /* Elevation — added in extraction. master-sheet was border-only; onbrbr and
     future dropdown/modal chrome need depth. Mode-aware (see dark override). */
  --vf-shadow: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .1);
  --vf-shadow-lg: 0 10px 30px rgb(16 24 40 / .18);

  /* Table row height — both table-first tools share this. */
  --vf-row-h: 38px;
}

/* --- DARK: Graphite ground. Opt-in via `.dark` or [data-theme="dark"] on <html>;
   nothing sets it yet, so the app renders light exactly as before. --- */
.dark,
[data-theme="dark"] {
  --vf-bg-base: #141416;
  --vf-surface: #1B1B1E;
  --vf-surface-2: #242428;
  --vf-hover: #212125;

  --vf-fg: #E9E9EB;
  --vf-fg-muted: #A1A1A8;
  --vf-fg-subtle: #75757D;

  --vf-line: #2B2B30;
  --vf-line-strong: #3D3D44;

  --vf-accent: #2F76C2;
  --vf-accent-fg: #FFFFFF;
  --vf-accent-text: #5496E6;   /* the CEO's Brand Blue, unchanged, on dark */
  --vf-accent-text-hover: #7CB0EE; /* on dark, hover brightens instead */

  --vf-ok: #5BB06E;
  --vf-warn: #D2A24E;
  --vf-bad: #E8867F;
  --vf-bad-hover: #F0A49E;
  --vf-info: #6FA8EE;
  --vf-cat: #B197E8;

  /* Floating overlay INVERTS in dark: a light bar with dark text, so it still
     contrasts the dark content it floats over (same intent as the dark bar on
     light content). Every value here is an existing light-palette tone —
     surface / surface-2 / fg / fg-muted / line-strong — so the bar introduces
     no new gray. */
  --vf-overlay: #F7F8FA;          /* = light --vf-surface */
  --vf-overlay-2: #EFF1F4;        /* = light --vf-surface-2 */
  --vf-overlay-fg: #1B1D23;       /* dark text on the light bar */
  --vf-overlay-fg-muted: #5F6675; /* = light --vf-fg-muted */
  --vf-overlay-line: #C7CCD6;     /* = light --vf-line-strong */
  --vf-neutral: #A1A1A8;

  /* Re-declare mode-dependent recipes so their var() inputs resolve against
     the dark foregrounds and surface instead of the inherited light values. */
  --vf-ok-surface: color-mix(in oklab, var(--vf-ok) 14%, var(--vf-surface));
  --vf-warn-surface: color-mix(in oklab, var(--vf-warn) 14%, var(--vf-surface));
  --vf-bad-surface: color-mix(in oklab, var(--vf-bad) 14%, var(--vf-surface));
  --vf-info-surface: color-mix(in oklab, var(--vf-info) 14%, var(--vf-surface));
  --vf-cat-surface: color-mix(in oklab, var(--vf-cat) 14%, var(--vf-surface));
  --vf-accent-quiet: color-mix(in oklab, var(--vf-accent-text) 13%, var(--vf-surface));
  --vf-accent-line: color-mix(in oklab, var(--vf-accent-text) 42%, var(--vf-surface));

  /* Shadows go deeper and less diffuse on a dark ground. */
  --vf-shadow: 0 1px 2px rgb(0 0 0 / .4);
  --vf-shadow-lg: 0 12px 34px rgb(0 0 0 / .55);
}