/* Noboru AI — design tokens
 * Extracted 1:1 from sample_design/tokens.js + sample_design/styles.css.
 * All authored at 1920x1080. Do not introduce magic numbers in templates;
 * always reference these variables.
 */

:root {
  /* ── Color ─────────────────────────────────────────────────────── */
  --color-navy:   #0B3B8C;  /* primary blue, headings, logo "Noboru" */
  --color-blue:   #2563EB;  /* interactive / links */
  --color-sky:    #EFF4FD;  /* tinted surface */
  --color-orange: #F97316;  /* accent, logo "AI", single-point emphasis */
  --color-deep:   #0A1F44;  /* deep navy bg (section starters) */
  --color-ink:    #0F172A;  /* body text */
  --color-muted:  #475569;  /* secondary text */
  --color-line:   #E3E8F2;  /* hairline */
  --color-mist:   #F5F7FB;  /* page tint */
  --color-paper:  #FFFFFF;

  /* ── Type scale (px @ 1920x1080) ──────────────────────────────── */
  --type-display-xl: 128px; /* KPI / giant numbers */
  --type-display:    96px;
  --type-title:      64px;
  --type-subtitle:   44px;
  --type-body:       34px;
  --type-small:      28px;
  --type-micro:      22px;  /* captions / footer only */

  /* ── Spacing ──────────────────────────────────────────────────── */
  --space-pad-top:     100px;
  --space-pad-bottom:  80px;
  --space-pad-x:       100px;
  --space-title-gap:   52px;
  --space-item-gap:    28px;
  --space-section-gap: 72px;

  /* ── Radius ───────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-pill: 999px;

  /* ── Font stacks ──────────────────────────────────────────────── */
  --font-jp: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en: 'Inter', 'Noto Sans JP', sans-serif;
}