/* Mineral twilight, cellular parchment, and restrained biological light. */

:root {
  /* Surface palette */
  --bg-deep: #080a0b;
  --bg-space: #0d1112;
  --bg-panel: rgba(16, 18, 18, 0.78);
  --bg-panel-solid: #121515;
  --bg-elevated: rgba(26, 29, 28, 0.82);
  --border-faint: rgba(224, 216, 190, 0.14);
  --border-strong: rgba(230, 213, 167, 0.34);

  /* One functional layer above the globe. */
  --material-clear-bg: rgba(10, 13, 14, 0.58);
  --material-clear-border: rgba(230, 224, 202, 0.18);
  --material-regular-bg: rgba(13, 16, 16, 0.78);
  --material-regular-border: rgba(230, 213, 167, 0.30);
  --material-thick-bg: rgba(12, 15, 15, 0.94);
  --material-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.34);
  --material-blur-clear: 12px;
  --material-blur-regular: 20px;

  /* Text */
  --text-primary: #f0eee7;
  --text-secondary: #b7b4aa;
  --text-faint: #77786f;
  --text-inverse: #17150f;

  /* Life / network accents */
  --life-core: #f1dda1;
  --life-glow: #c99e45;
  --life-dim: #75642f;
  --accent-gold: #f0a34a;
  --accent-glow: #ce7434;
  --memory-violet: #cbc2a7;
  --memory-glow: #898270;

  /* Semantic states (always paired with shape/label in components) */
  --state-good: #d8d69c;
  --state-warn: #f0a34a;
  --state-bad: #df6d55;
  --state-info: #8eb5b1;
  --action-available: #9fcbb3;
  --action-recommended: #f0c86f;
  --action-urgent: #f09a4a;
  --action-destructive: #df6d55;

  /* Category hues (Reach/Metabolism/Resilience/Transport/Symbiosis/Memory) */
  --cat-reach: #7fd8ff;
  --cat-metabolism: #8ef0b8;
  --cat-resilience: #ffb27f;
  --cat-transport: #d9a6ff;
  --cat-symbiosis: #ffe08a;
  --cat-memory: #a99bff;

  /* Typography */
  --font-body: system-ui, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
    monospace;
  --fs-caption: 0.8125rem;   /* 13px — secondary only */
  --fs-body: 1rem;           /* 16px */
  --fs-lead: 1.1875rem;      /* 19px */
  --fs-title: 1.5rem;        /* 24px */
  --fs-hero: clamp(2rem, 6vw, 3.25rem);
  --fs-score: clamp(2.5rem, 9vw, 4.5rem);
  --lh-body: 1.55;
  --lh-tight: 1.2;

  /* Space scale (8px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Shape */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-pill: 999px;

  /* Touch + safe areas */
  --touch-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Z layers */
  --z-canvas: 0;
  --z-hud: 10;
  --z-sheet: 30;
  --z-dialog: 50;
  --z-toast: 70;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
}

/* Increased-contrast preference: strengthen borders and text. */
@media (prefers-contrast: more) {
  :root {
    --border-faint: rgba(180, 210, 240, 0.4);
    --border-strong: rgba(200, 225, 250, 0.65);
    --text-secondary: #c3d3e4;
    --bg-panel: rgba(8, 13, 22, 0.94);
    --material-clear-bg: rgba(5, 8, 9, 0.88);
    --material-regular-bg: rgba(5, 8, 9, 0.95);
  }
}

/* App-level reduced-motion switch (set from settings + system pref). */
:root[data-motion="reduced"] {
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-slow: 0ms;
}