/* Hallmark · genre: editorial · theme: Newsprint (Spurcle-tuned) · nav: N6 masthead · footer: Ft1 mast-headed
 * anchor hue: warm 82 (Spurcle gold), all neutrals leaning warm
 * axes: paper=light / display=roman-serif / accent=warm-gold
 * Palette derived from Spurcle logo (gold ring + warm grey compass + rich black wordmark)
 */

:root {
  /* Colour — OKLCH only. Warm off-white paper, rich black ink, Spurcle gold accent. */
  --color-paper:    oklch(98% 0.004 80);      /* warm near-white paper */
  --color-paper-2:  oklch(96% 0.006 80);      /* subtle surface (背景 F5F5F5相当) */
  --color-paper-3:  oklch(93% 0.014 82);      /* washed gold callout */
  --color-rule:     oklch(78% 0.010 70);      /* hairlines (warm grey) */
  --color-neutral:  oklch(50% 0.012 65);      /* secondary text (warm grey) */
  --color-muted:    oklch(38% 0.014 55);      /* muted metadata */
  --color-ink:      oklch(20% 0.014 45);      /* body text */
  --color-ink-2:    oklch(13% 0.016 40);      /* strong ink (matches Spurcle wordmark) */
  --color-accent:   oklch(56% 0.11 82);       /* Spurcle gold — readable on paper */
  --color-accent-2: oklch(88% 0.06 82);       /* washed gold (mark highlight) */
  --color-accent-3: oklch(72% 0.09 85);       /* logo-ring gold (decorative) */
  --color-focus:    oklch(60% 0.14 82);       /* focus ring (saturated gold) */
  --color-danger:   oklch(50% 0.16 25);       /* reserved for error signals */

  /* Fonts — 2+1: display (roman serif) + body (roman serif) + mono outlier */
  --font-display: "Newsreader", "Noto Serif JP", ui-serif, Georgia, serif;
  --font-body:    "Source Serif 4", "Noto Serif JP", ui-serif, Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale — 1.25 major third from 16px base */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  2.875rem;   /* 46px */
  --text-4xl:  3.625rem;   /* 58px */
  --text-display:   clamp(2.75rem, 4.5vw + 1rem, 4.75rem);
  --text-display-s: clamp(2rem, 3.5vw + 0.75rem, 3.25rem);

  /* Spacing — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Rules (hairlines) */
  --rule-hair: 0.5px solid var(--color-rule);
  --rule-fine: 1px solid var(--color-rule);
  --rule-bold: 2px solid var(--color-ink-2);
  --rule-double: 3px double var(--color-ink-2);

  /* Radii */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  /* Z-index scale */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
}

/* Reset + base */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  font-feature-settings: "onum" 1, "kern" 1;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; height: auto; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--color-accent);
  transition: color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--color-accent); }
a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--color-accent-2); color: var(--color-ink-2); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
}