/* tokens/colors.css */
:root{
  /* ── Ink & neutrals (the whole system lives here) ───────────── */
  --black:#000000;            /* tx1 — primary text, primary accent */
  --ink:#2C2427;              /* logo ink; warm near-black */
  --gray-900:#494949;         /* secondary text */
  --gray-500:#8A8A8A;         /* placeholder, disabled text */
  --gray-400:#B0B0B0;         /* hairlines on gray, tertiary text */
  --gray-200:#D6D6D6;         /* borders */
  --gray-100:#E6E6E6;         /* surface: cards, panels, slide blocks */
  --gray-50:#F4F4F4;          /* subtle fill, table zebra */
  --white:#FFFFFF;

  /* ── Brand dots (logo only; never UI chrome) ────────────────── */
  --dot-green:#334137;
  --dot-orange:#FF6038;
  --dot-maroon:#743635;

  /* ── Semantic: text ────────────────────────────────────────── */
  --text-primary:var(--black);
  --text-secondary:var(--gray-900);
  --text-tertiary:var(--gray-400);
  --text-disabled:var(--gray-500);
  --text-inverse:var(--white);
  --text-link:var(--black);
  --text-link-hover:var(--gray-900);

  /* ── Semantic: surface ─────────────────────────────────────── */
  --surface-page:var(--white);
  --surface-card:var(--gray-100);
  --surface-subtle:var(--gray-50);
  --surface-inverse:var(--black);
  --surface-hover:var(--gray-50);
  --surface-active:var(--gray-200);

  /* ── Semantic: border ──────────────────────────────────────── */
  --border-hairline:var(--gray-200);
  --border-strong:var(--black);
  --border-muted:var(--gray-400);

  /* ── Semantic: interactive (accent IS black) ───────────────── */
  --action-fill:var(--black);
  --action-fill-hover:var(--gray-900);
  --action-fill-active:var(--ink);
  --action-fg:var(--white);
  --focus-ring:var(--black);

  /* ── Status: monochrome by default, with a single warm alert ── */
  --status-neutral:var(--gray-900);
  --status-positive:var(--dot-green);
  --status-attention:var(--dot-orange);
  --status-critical:var(--dot-maroon);
}

/* tokens/typography.css */
:root{
  /* ── Families ──────────────────────────────────────────────── */
  --font-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-serif-display:"EB Garamond","Garamond","Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* ── Weights (Inter) ───────────────────────────────────────── */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* ── Size scale — derived from the source deck at 1280x720 ── */
  --text-display:80px;   /* VLS serif mark, cover */
  --text-h1:36px;        /* platform / section headline */
  --text-h2:32px;        /* slide title */
  --text-h3:20px;        /* cover subtitle */
  --text-lg:16px;        /* card title, lede */
  --text-body:14px;      /* body, process columns */
  --text-sm:12px;        /* label, column heading */
  --text-xs:11px;        /* caption, supporting copy */
  --text-2xs:10px;       /* legal, source note */

  /* ── Line heights ──────────────────────────────────────────── */
  --leading-tight:1.05;  /* display */
  --leading-snug:1.2;    /* headlines */
  --leading-normal:1.4;  /* body */
  --leading-relaxed:1.55;/* long paragraphs */

  /* ── Tracking ──────────────────────────────────────────────── */
  --tracking-display:-0.02em;
  --tracking-heading:-0.015em;
  --tracking-normal:0em;
  --tracking-label:0.08em;  /* uppercase eyebrow labels */

  /* ── Semantic roles ───────────────────────────────────────── */
  --type-display-family:var(--font-serif-display);
  --type-display-weight:var(--weight-bold);
  --type-heading-family:var(--font-sans);
  --type-heading-weight:var(--weight-bold);
  --type-body-family:var(--font-sans);
  --type-body-weight:var(--weight-regular);
  --type-label-weight:var(--weight-semibold);
}

/* tokens/spacing.css */
:root{
  /* 4px base; 2px allowed for hairline-tight UI */
  --space-0:0px;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:96px;

  /* Slide geometry, measured from the source deck (1280x720) */
  --slide-margin:38px;      /* 360000 EMU */
  --slide-gutter:14px;      /* gap between card columns */
  --slide-card-pad:12px;    /* 108000 EMU inset */
  --slide-title-top:38px;

  /* Component density */
  --control-h-sm:28px;
  --control-h-md:36px;
  --control-h-lg:44px;
  --control-pad-x:14px;
}

/* tokens/border.css */
:root{
  /* The deck is built entirely from square rectangles. Radius is
     a UI affordance only, and stays near zero. */
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-pill:999px;

  --border-width-hairline:1px;
  --border-width-strong:2px;
  --border-hairline-rule:1px solid var(--border-hairline);
  --border-strong-rule:1px solid var(--border-strong);

  --divider:1px solid var(--gray-200);
  --divider-inverse:1px solid rgba(255,255,255,.24); /* @kind other */
}

/* tokens/elevation.css */
:root{
  /* Shadows are effectively absent. Separation comes from a flat
     gray fill or a hairline. These exist only for overlays. */
  --shadow-none:none;
  --shadow-overlay:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.10);
  --shadow-popover:0 1px 2px rgba(0,0,0,.08);
  --scrim:rgba(0,0,0,.40);
  --backdrop-blur:blur(2px); /* @kind other */
}

/* tokens/motion.css */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:180ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard);
}

/* tokens/shadcn-compat.css */
/* ──────────────────────────────────────────────────────────────────────────
   shadcn compatibility layer

   Maps shadcn/ui's fixed token contract onto VLS values, so a component
   pasted from shadcn renders black, square and flat instead of falling back
   to shadcn's default slate-and-rounded theme.

   This project does NOT use Tailwind, so the canonical names below are
   declared as DIRECT CSS colors — `color: var(--foreground)` just works.
   The `*-hsl` triplets at the bottom exist for markup copied verbatim from
   shadcn docs, which wraps everything in `hsl(var(--foreground))`.

   Never author new VLS work against these names. They are an import shim —
   use the semantic tokens in tokens/colors.css instead.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  /* ── Base ────────────────────────────────────────────────────── */
  --background:var(--white);
  --foreground:var(--black);

  /* ── Surfaces. shadcn separates card and popover; VLS does not:
        a card is the flat gray block, a popover is white + shadow. ── */
  --card:var(--surface-card);
  --card-foreground:var(--black);
  --popover:var(--white);
  --popover-foreground:var(--black);

  /* ── Interactive. The accent IS black, so primary and accent
        collapse onto the same value — that is intentional. ──────── */
  --primary:var(--black);
  --primary-foreground:var(--white);
  --secondary:var(--gray-100);
  --secondary-foreground:var(--black);
  --accent:var(--gray-100);
  --accent-foreground:var(--black);

  /* ── Muted ───────────────────────────────────────────────────── */
  --muted:var(--gray-50);
  --muted-foreground:var(--gray-900);

  /* ── Destructive. The one place a dot color leaves the logo. ─── */
  --destructive:var(--dot-maroon);
  --destructive-foreground:var(--white);

  /* ── Lines. shadcn's --ring is a colored glow; VLS focus is
        simply a black border, so ring resolves to black. ───────── */
  --border:var(--border-hairline);
  --input:var(--border-hairline);
  --ring:var(--black);

  /* ── Geometry. Zero, and it must stay zero: shadcn derives
        rounded-lg/md/sm from this single value. ──────────────────── */
  --radius:0px;

  /* ── Charts. No chart language is defined yet (see readme
        "Gaps"). Series run down the neutral ramp; the dot colors
        are a last resort for categorical emphasis only. ─────────── */
  --chart-1:var(--black);
  --chart-2:var(--gray-900);
  --chart-3:var(--gray-400);
  --chart-4:var(--gray-200);
  --chart-5:var(--dot-orange);

  /* ── Sidebar (shadcn 0.9+ block tokens) ──────────────────────── */
  --sidebar:var(--white);
  --sidebar-foreground:var(--black);
  --sidebar-primary:var(--black);
  --sidebar-primary-foreground:var(--white);
  --sidebar-accent:var(--surface-card);
  --sidebar-accent-foreground:var(--black);
  --sidebar-border:var(--border-hairline);
  --sidebar-ring:var(--black);

  /* ── HSL channel triplets, for markup copied from shadcn docs
        that expects `hsl(var(--token))`. Same values as above. ──── */
  --background-hsl:0 0% 100%; /* @kind other */
  --foreground-hsl:0 0% 0%; /* @kind other */
  --card-hsl:0 0% 90%; /* @kind other */
  --card-foreground-hsl:0 0% 0%; /* @kind other */
  --popover-hsl:0 0% 100%; /* @kind other */
  --popover-foreground-hsl:0 0% 0%; /* @kind other */
  --primary-hsl:0 0% 0%; /* @kind other */
  --primary-foreground-hsl:0 0% 100%; /* @kind other */
  --secondary-hsl:0 0% 90%; /* @kind other */
  --secondary-foreground-hsl:0 0% 0%; /* @kind other */
  --accent-hsl:0 0% 90%; /* @kind other */
  --accent-foreground-hsl:0 0% 0%; /* @kind other */
  --muted-hsl:0 0% 96%; /* @kind other */
  --muted-foreground-hsl:0 0% 29%; /* @kind other */
  --destructive-hsl:1 36% 33%; /* @kind other */
  --destructive-foreground-hsl:0 0% 100%; /* @kind other */
  --border-hsl:0 0% 84%; /* @kind other */
  --input-hsl:0 0% 84%; /* @kind other */
  --ring-hsl:0 0% 0%; /* @kind other */
}

/* styles.css */