/* GENERATED — run pnpm build:components. Source: packages/tokens/src/tokens.css */

/**
 * vcraft design tokens.
 *
 * The single place in the repo where a raw colour, duration or pixel value is
 * allowed to exist. Components read these and never define them.
 *
 * Naming: --vc-<category>-<name>
 * Light values live on :root. Dark overrides only the values that change.
 */

:root {
  /* ── Colour ───────────────────────────────────────────────────────────── */
  --vc-bg: #ffffff;
  --vc-surface: #f4f4f5;
  --vc-ink: #09090b;
  --vc-ink-muted: #71717a;
  --vc-accent: #2563eb;
  --vc-border: #e4e4e7;

  /* ── Space ────────────────────────────────────────────────────────────── */
  --vc-space-1: 0.25rem;
  --vc-space-2: 0.5rem;
  --vc-space-3: 0.75rem;
  --vc-space-4: 1rem;
  --vc-space-5: 1.25rem;
  --vc-space-6: 1.5rem;
  --vc-space-7: 2rem;
  --vc-space-8: 2.5rem;
  --vc-space-9: 3rem;
  --vc-space-10: 4rem;
  --vc-space-11: 6rem;
  --vc-space-12: 8rem;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --vc-radius-sm: 0.25rem;
  --vc-radius-md: 0.5rem;
  --vc-radius-lg: 1rem;
  --vc-radius-full: 9999px;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --vc-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vc-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Headlines only. Defaults to the body face so a template that ships no
     display font still resolves this to something real — point it at a face
     in the template, the way base.css does for --vc-font-sans. */
  --vc-font-display: var(--vc-font-sans);

  --vc-text-xs: 0.75rem;
  --vc-text-sm: 0.875rem;
  --vc-text-base: 1rem;
  --vc-text-lg: 1.125rem;
  --vc-text-xl: 1.25rem;
  --vc-text-2xl: 1.5rem;
  --vc-text-3xl: 1.875rem;
  --vc-text-4xl: 2.25rem;
  --vc-text-5xl: 3rem;

  --vc-leading-tight: 1.15;
  --vc-leading-base: 1.5;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --vc-dur-fast: 120ms;
  --vc-dur-base: 240ms;
  --vc-dur-slow: 480ms;
  --vc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --vc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --vc-shadow-sm: 0 1px 2px rgb(9 9 11 / 0.06);
  --vc-shadow-md: 0 4px 12px rgb(9 9 11 / 0.08);
  --vc-shadow-lg: 0 16px 40px rgb(9 9 11 / 0.12);

  /* ── Z-index ──────────────────────────────────────────────────────────── */
  --vc-z-overlay: 100;
  --vc-z-tooltip: 200;
}

[data-theme="dark"] {
  --vc-bg: #09090b;
  --vc-surface: #18181b;
  --vc-ink: #fafafa;
  --vc-ink-muted: #a1a1aa;
  --vc-accent: #60a5fa;
  --vc-border: #27272a;

  --vc-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --vc-shadow-md: 0 4px 12px rgb(0 0 0 / 0.55);
  --vc-shadow-lg: 0 16px 40px rgb(0 0 0 / 0.65);
}

/**
 * Section surfaces.
 *
 * A page that alternates between a light and a dark band needs to say so per
 * section, not per property. `data-vc-surface` re-points the palette tokens
 * for one subtree, and every component inside it follows without knowing the
 * section exists — they already read --vc-ink and --vc-bg.
 *
 * Absolute, not relative: "dark" is dark in either theme. A section that
 * flipped with the theme would turn an alternating page into a uniform one
 * the moment the theme changed, which is the opposite of the point.
 *
 * Declared here in the default palette so the mechanism exists for every
 * theme; a theme that wants its own two surfaces overrides these, as noir.css
 * does.
 */

[data-vc-surface="light"] {
  --vc-bg: #ffffff;
  --vc-surface: #f4f4f5;
  --vc-ink: #09090b;
  --vc-ink-muted: #71717a;
  --vc-accent: #2563eb;
  --vc-border: #e4e4e7;

  --vc-shadow-sm: 0 1px 2px rgb(9 9 11 / 0.06);
  --vc-shadow-md: 0 4px 12px rgb(9 9 11 / 0.08);
  --vc-shadow-lg: 0 16px 40px rgb(9 9 11 / 0.12);
}

[data-vc-surface="dark"] {
  --vc-bg: #09090b;
  --vc-surface: #18181b;
  --vc-ink: #fafafa;
  --vc-ink-muted: #a1a1aa;
  --vc-accent: #60a5fa;
  --vc-border: #27272a;

  --vc-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --vc-shadow-md: 0 4px 12px rgb(0 0 0 / 0.55);
  --vc-shadow-lg: 0 16px 40px rgb(0 0 0 / 0.65);
}