/* ========================================
   Design tokens: colors, fonts, layout.
   Change here, propagate everywhere.
   ======================================== */

:root {
  /* Background tones — warm cream */
  --bg: #EFE9DE;
  --bg-soft: #F4EFE5;

  /* Ink — warm dark, avoids the "pure black is heavy" feel */
  --ink: #2D2822;
  --ink-soft: rgba(45, 40, 34, 0.72);
  --ink-mute: rgba(45, 40, 34, 0.48);
  --line: rgba(45, 40, 34, 0.14);

  /* Accent — mint teal, evokes "3.0 / 自然 / 共創" */
  --accent: #3DAB9F;
  --accent-bright: #5DC9BC;
  --accent-mist: #A8E5DE;

  /* Font stacks */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-display: "Big Shoulders Display", "Inter", "Noto Sans JP", sans-serif;
  --font-title: "Murecho", "Noto Sans JP", sans-serif;

  /* Layout */
  --max-content: 1400px;
  --max-text: 920px;
  --pad-x: 48px;
  --pad-y: 120px;

  /* Spacing scale (use for paddings / margins / gaps) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 60px;

  /* Radius scale */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Glass surfaces (used by section bgs that float over the orbs).
     Blur is the most expensive backdrop-filter; keep modest. */
  --glass-bg: rgba(239, 233, 222, 0.62);
  --glass-bg-soft: rgba(244, 239, 229, 0.62);
  --glass-blur: blur(24px);
  --overlay-ink: rgba(45, 40, 34, 0.78);

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.25s;
  --dur-mid: 0.35s;
  --dur-slow: 0.85s;
}

@media (max-width: 800px) {
  :root {
    --pad-x: 20px;
    --pad-y: 80px;
  }
}