/* ============================================================
   OUMS Agency — design tokens
   All raw values live here. Every other stylesheet uses var().
   Palette: muted slate-cobalt on pure white, amber as highlighter.
   Mood: twilight cartography — navigational, precise, calm.
   ============================================================ */

:root {
  /* ---- color ------------------------------------------------ */
  --color-bg: oklch(1 0 0);
  --color-surface: oklch(0.965 0.012 252);
  --color-ink: oklch(0.2 0.02 252);
  --color-muted: oklch(0.44 0.03 252);
  --color-line: oklch(0.9 0.012 252);
  --color-input-border: oklch(0.6 0.025 252);

  --color-cobalt: oklch(0.46 0.08 252);
  --color-cobalt-deep: oklch(0.32 0.055 252);
  --color-cobalt-night: oklch(0.25 0.04 252);
  --color-on-cobalt: oklch(0.99 0.004 252);
  --color-on-cobalt-muted: oklch(0.91 0.02 252);
  --color-cobalt-line: oklch(0.58 0.06 252);

  --color-amber: oklch(0.8 0.13 80);
  --color-amber-ink: oklch(0.4 0.09 70);
  --color-amber-bar: oklch(0.72 0.135 72);

  --color-error: oklch(0.46 0.18 27);
  --color-success: oklch(0.42 0.11 155);
  --color-success-surface: oklch(0.96 0.025 155);

  --color-btn-light-hover: oklch(0.93 0.02 252);

  /* ---- typography ------------------------------------------- */
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --root-size: 16px;

  --text-h1: 3.75rem;
  --text-h2: 2.25rem;
  --text-h3: 1.25rem;
  --text-body: 1rem;
  --text-lead: 1.25rem;
  --text-small: 0.875rem;

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-display: -0.02em;
  --tracking-wide: 0.04em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  --measure: 62ch;

  /* ---- spacing ----------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-pad: clamp(4rem, 10vw, 7rem);
  --hero-pad-top: clamp(4rem, 12vw, 8rem);
  --hero-pad-bottom: clamp(4rem, 12vw, 8.5rem);

  /* ---- layout ------------------------------------------------ */
  --container: 70rem;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);
  --scroll-offset: 5.5rem;

  /* ---- shape ------------------------------------------------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --border-w: 1px;
  --border-w2: 2px;
  --rail-w: 2px;
  --outline-offset: 3px;

  /* ---- elevation / z ------------------------------------------ */
  --z-nav: 20;
  --z-skip: 30;
  --shadow-nav: 0 1px 0 oklch(0.9 0.012 252);

  /* ---- motion -------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 150ms;
  --dur-2: 300ms;
  --dur-3: 600ms;
  --dur-4: 1000ms;
  --rise: 1.25rem;

  /* ---- diagram fills (share of "before" hours) ------------------ */
  --fill-full: 100%;
  --fill-clinic: 32%;
  --fill-shop: 29%;
  --fill-firm: 42%;
}

/* Tablet: tighten the display size so headlines never crowd */
@media (max-width: 768px) {
  :root {
    --text-h1: 3rem;
    --text-h2: 2rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  :root {
    --text-h1: 2.75rem;
  }
}

/* Per project convention: root size drops under 400px */
@media (max-width: 400px) {
  :root {
    --root-size: 12px;
  }
}