/**
 * @file
 * Design tokens for the SWALIM theme.
 *
 * Every colour, type size and spacing step used anywhere in the theme is
 * declared here. Component CSS should never hard-code a hex value — reach
 * for a token so a palette change stays a one-file edit.
 */

:root {
  /* ---------------------------------------------------------------------
   * Colour
   *
   * The palette is drawn from the Somali landscape SWALIM reports on:
   * irrigated riverine green along the Shabelle and Juba, the ochre of
   * rangeland in dry season, and the deep water of the gauging stations.
   * Green carries the brand; orange is reserved for alert and emphasis so
   * it keeps its meaning on flood and drought pages.
   * ------------------------------------------------------------------ */

  /* Brand greens */
  --c-green-900: #0d3323;
  --c-green-800: #14472f;
  --c-green-700: #1a5c3c;
  --c-green-600: #22754c;
  --c-green-500: #2f9160;
  --c-green-400: #58ab80;
  --c-green-200: #b3d9c5;
  --c-green-100: #e3f1e9;

  /* Accent — alerts, calls to action, data emphasis */
  --c-orange-700: #a8480d;
  --c-orange-600: #c85a12;
  --c-orange-500: #e2711d;
  --c-orange-400: #ef8f42;
  --c-orange-200: #f9d5b4;
  --c-orange-100: #fdf0e4;

  /* Neutrals — warm-leaning so they sit with the greens, not against them */
  --c-ink-900: #14180f;
  --c-ink-700: #363b30;
  --c-ink-500: #5d6455;
  --c-ink-300: #949b8c;
  --c-ink-200: #c9cec2;
  --c-ink-100: #e6e9e1;
  --c-paper: #f7f8f4;
  --c-white: #ffffff;

  /* Semantic assignments — use these in components */
  --color-bg: var(--c-paper);
  --color-bg-raised: var(--c-white);
  --color-bg-inverse: var(--c-green-900);
  --color-text: var(--c-ink-900);
  --color-text-muted: var(--c-ink-500);
  --color-text-inverse: var(--c-green-100);
  --color-brand: var(--c-green-700);
  --color-brand-strong: var(--c-green-900);
  --color-accent: var(--c-orange-500);
  --color-accent-strong: var(--c-orange-700);
  --color-link: var(--c-green-700);
  --color-link-hover: var(--c-orange-600);
  --color-border: var(--c-ink-200);
  --color-border-subtle: var(--c-ink-100);
  --color-focus: var(--c-orange-500);

  /* Status — flood/drought reporting reuses these */
  --color-status-normal: var(--c-green-500);
  --color-status-watch: #d9a520;
  --color-status-alert: var(--c-orange-600);
  --color-status-severe: #9a2b1e;

  /* ---------------------------------------------------------------------
   * Type
   *
   * Archivo for display: a grotesque with real width variation, so headings
   * can be set tight and condensed without looking like the body font
   * scaled up. Inter for reading. IBM Plex Mono for station IDs, gauge
   * readings, dates and table figures — the vernacular of hydromet data.
   * ------------------------------------------------------------------ */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Type scale — 1.25 ratio, clamped for fluid resizing */
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.09em;

  /* ---------------------------------------------------------------------
   * Space, sizing, motion
   * ------------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --width-full: 100%;
  --width-wide: 84rem;
  --width-default: 72rem;
  --width-narrow: 46rem;
  --width-prose: 38rem;

  --gutter: clamp(1rem, 4vw, 2.5rem);

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgb(20 24 15 / 6%);
  --shadow-md: 0 2px 8px rgb(20 24 15 / 8%);
  --shadow-lg: 0 8px 28px rgb(20 24 15 / 12%);

  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --border-hairline: 1px solid var(--color-border-subtle);
  --border-rule: 1px solid var(--color-border);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}