/* Hallmark · genre: editorial · macrostructure: Map / Diagram · theme: custom earth atlas · enrichment: generated natural hero photo + field-map SVG · nav: app bottom tabs · footer: none */
:root {
  --image-hero: url("./assets/field-of-life-hero.png");
  --color-paper: oklch(14% 0.026 142);
  --color-paper-2: oklch(19% 0.026 135);
  --color-paper-3: oklch(25% 0.028 126);
  --color-paper-soft: oklch(89% 0.035 88);
  --color-ink: oklch(94% 0.018 88);
  --color-ink-2: oklch(86% 0.022 92);
  --color-neutral: oklch(70% 0.025 104);
  --color-muted: oklch(58% 0.022 108);
  --color-rule: oklch(37% 0.024 120);
  --color-rule-2: oklch(46% 0.026 118);
  --color-contour: oklch(74% 0.05 92 / 0.16);
  --color-photo-shade-top: oklch(10% 0.018 135 / 0.48);
  --color-photo-shade-mid: oklch(12% 0.022 132 / 0.28);
  --color-photo-shade-bottom: oklch(9% 0.018 128 / 0.86);
  --color-panel-photo-top: oklch(10% 0.018 135 / 0.34);
  --color-panel-photo-bottom: oklch(9% 0.018 128 / 0.86);
  --color-accent: oklch(78% 0.12 74);
  --color-accent-2: oklch(68% 0.095 151);
  --color-accent-ink: oklch(16% 0.026 130);
  --color-focus: oklch(80% 0.12 74);
  --color-success: oklch(73% 0.12 151);
  --color-error: oklch(68% 0.16 27);
  --color-overlay: oklch(10% 0.02 130 / 0.76);
  --color-mask-solid: oklch(20% 0.02 130);

  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", ui-serif, serif;
  --font-body: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-outlier: "SFMono-Regular", "Menlo", ui-monospace, monospace;

  --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;

  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-base: 1rem;
  --text-md: 1.2rem;
  --text-lg: 1.44rem;
  --text-xl: 1.728rem;
  --text-2xl: 2.074rem;
  --text-3xl: 2.488rem;
  --text-display: clamp(2.4rem, 8vw + 0.4rem, 5rem);

  --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;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --rule-thin: 1px;
  --shadow-hairline: 0 0 0 1px oklch(46% 0.026 118 / 0.5);
  --shadow-panel: 0 18px 48px oklch(7% 0.018 132 / 0.38);
  --z-sticky: 200;
  --z-toast: 500;
}