/* G7 Brand Tokens — generated 2026-07-21 from reference/brand/guidelines.json (brand v0.2.0).
   DO NOT EDIT BY HAND — run: node scripts/generate-tokens.cjs · Layers: primitive → semantic → component. */

:root {
  /* ── Primitive (raw brand values) ── */
  --mint-300: #E6F4F1;
  --mint-500: #3FB8AF;
  --mint-600: #2E8C84;
  --mint-700: #0C2421;
  --white: #FFFFFF;
  --canvas-light: #FFFFFF;
  --surface-light: #F4F9F8;
  --ink-900: #15302C;
  --ink-600: #5C6E6A;
  --line-light: #DFEBE8;

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-h1-size: 48px;
  --text-h1-weight: 700;
  --text-h1-line: 1.1;
  --text-h1-tracking: -0.02em;
  --text-h2-size: 32px;
  --text-h2-weight: 700;
  --text-h2-line: 1.15;
  --text-h2-tracking: -0.01em;
  --text-h3-size: 22px;
  --text-h3-weight: 600;
  --text-h3-line: 1.25;
  --text-h3-tracking: -0.005em;
  --text-lead-size: 19px;
  --text-lead-weight: 400;
  --text-lead-line: 1.55;
  --text-body-size: 16px;
  --text-body-weight: 400;
  --text-body-line: 1.6;
  --text-label-size: 12px;
  --text-label-weight: 600;
  --text-label-tracking: 0.08em;

  /* ── Radius ── */
  --radius-card: 14px;
  --radius-button: 14px;
  --radius-input: 10px;
  --radius-pill: 999px;

  /* ── Spacing (8px base grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Layout ── */
  --container-read: 720px;
  --container-section: 1120px;
  --border-hairline: 1px;

  /* ── Shadow ── */
  --shadow-sm: 0 1px 3px rgba(21,48,44,0.06);

  /* ── Semantic (role → primitive) ── */
  --color-canvas: var(--canvas-light);
  --color-surface: var(--surface-light);
  --color-accent: var(--mint-500);
  --color-accent-deep: var(--mint-600);
  --color-accent-soft: var(--mint-300);
  --color-on-accent: var(--mint-700);
  --color-text: var(--ink-900);
  --color-text-soft: var(--ink-600);
  --color-line: var(--line-light);
  --font-body: var(--font-sans);

  /* ── Component (scoped → semantic) ── */
  --button-bg: var(--color-accent);
  --button-bg-hover: var(--color-accent-deep);
  --button-color: var(--color-on-accent);
  --button-radius: var(--radius-button);
  --card-radius: var(--radius-card);
  --card-bg: var(--color-surface);
  --input-radius: var(--radius-input);
  --input-border: var(--color-line);
  --link-color: var(--color-accent-deep);
}

/* ── Dark mode (opt-in: [data-theme="dark"]) — premium/contrast contexts only ── */
[data-theme="dark"] {
  --color-canvas: #0F1A18;
  --color-surface: #16241F;
  --color-accent: #4FC9BF;
  --color-accent-deep: #3FB8AF;
  --color-accent-soft: #1E342F;
  --color-on-accent: #0C2421;
  --color-text: #F4F9F8;
  --color-text-soft: #9DB5AF;
  --color-line: #243933;
}