/* Hallmark · macrostructure: Marquee Hero · tone: warm-educational · anchor hue: coral 35°
 * theme: custom (vibe: "三十年の信頼、家から通える塾")
 * paper: oklch(97% .012 65) · accent: oklch(58% .18 35) coral-terracotta
 * axes: light / roman-serif / warm
 * display: Noto Serif JP · body: Noto Sans JP
 */

:root {
  /* ── Color ───────────────────────────────────────────── */
  --color-paper:         oklch(97% .012 65);
  --color-paper-2:       oklch(93% .018 65);
  --color-paper-3:       oklch(89% .026 65);
  --color-paper-inv:     oklch(22% .025 65);
  --color-ink:           oklch(18% .02  65);
  --color-ink-muted:     oklch(44% .02  65);
  --color-ink-faint:     oklch(66% .015 65);
  --color-accent:        oklch(58% .18  35);
  --color-accent-hover:  oklch(52% .20  35);
  --color-accent-active: oklch(48% .21  35);
  --color-accent-light:  oklch(91% .05  35);
  --color-accent-dark:   oklch(40% .16  35);
  --color-trust:         oklch(50% .12 240);
  --color-trust-light:   oklch(92% .04 240);
  --color-rule:          oklch(84% .015 65);
  --color-surface:       oklch(99% .007 65);
  --color-focus:         oklch(58% .18  35);

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Noto Serif JP', Georgia, 'Times New Roman', serif;
  --font-body:    'Noto Sans JP', system-ui, -apple-system, sans-serif;

  /* Scale */
  --text-xs:        .75rem;
  --text-sm:        .875rem;
  --text-base:      1rem;
  --text-lg:        1.125rem;
  --text-xl:        1.25rem;
  --text-2xl:       1.5rem;
  --text-3xl:       1.875rem;
  --text-4xl:       2.25rem;
  --text-display-s: 3rem;
  --text-display:   4rem;

  /* ── Spacing (4pt scale) ─────────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32: 128px;

  --space-xs:  var(--space-2);
  --space-sm:  var(--space-4);
  --space-md:  var(--space-8);
  --space-lg:  var(--space-16);
  --space-xl:  var(--space-24);
  --space-2xl: var(--space-32);

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-short:   150ms;
  --dur-mid:     250ms;
  --dur-long:    400ms;

  /* ── Radius ──────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Z-index ─────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-float:   50;
  --z-overlay: 100;
  --z-nav:     200;
}