/* ==========================================================================
   Weka — design tokens

   Three brand colours, plus black and white. Nothing else.
     cream      #F5ECC2   the page ground — washi paper
     green      #437742   the brand: buttons, links, confirmed states
     blue-grey  #97ACC8   secondary bands, tags, waiting states

   Japanese-minimal: paper, line, silence. Thin rules rather than heavy
   borders, generous space, no gradients, no heavy shadows. The one exception
   is a soft red, used ONLY for errors.

   Single source of truth for colour, type, spacing, radius and elevation.
   Never hard-code a hex value in a template; use a token.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- colour ---- */

  /* Primary — forest green. The brand colour: every primary action, every
     active link, every "confirmed" state. */
  --color-primary: #437742;
  --color-on-primary: #ffffff;
  --color-primary-container: #437742;
  --color-on-primary-container: #ffffff;
  --color-primary-fixed: #d8e4d7;
  --color-primary-fixed-dim: #b4ccb3;
  --color-on-primary-fixed: #14290f;
  --color-on-primary-fixed-variant: #2f5a2e;
  --color-inverse-primary: #a8c9a7;
  /* Darker green for text-on-cream, where #437742 alone is marginal at small
     sizes. Used for links and small bold labels. */
  --color-primary-deep: #2f5a2e;
  /* Green TEXT on the cream ground uses -deep, not -primary: #437742 on
     #F5ECC2 measures 4.46:1, just under the 4.5 AA floor, while #2F5A2E
     measures 6.73:1. #437742 stays correct for fills (white on it is
     5.31:1) and for large text or UI shapes, which need only 3:1. */
  --color-link: #2f5a2e;

  /* Secondary — blue-grey. Secondary bands, tags, "waiting" states.
     NOTE: on-secondary is INK, not white. White on #97ACC8 measures 2.32:1
     and fails AA badly; ink measures 7.50:1. This is a light colour and must
     be treated as one. */
  --color-secondary: #97acc8;
  --color-on-secondary: #1a1a1a;
  --color-secondary-container: #dae3ee;
  --color-on-secondary-container: #2c3f54;
  --color-secondary-fixed: #dae3ee;
  --color-secondary-fixed-dim: #b9c9dd;
  --color-on-secondary-fixed: #12202f;
  --color-on-secondary-fixed-variant: #2c3f54;

  /* Tertiary — aliased to the blue-grey. The palette is three colours, so
     tertiary is not a fourth hue; these tokens exist because templates
     reference them. */
  --color-tertiary: #97acc8;
  --color-on-tertiary: #12202f;
  --color-tertiary-container: #dae3ee;
  --color-on-tertiary-container: #2c3f54;
  --color-tertiary-fixed: #dae3ee;
  --color-tertiary-fixed-dim: #b9c9dd;
  --color-on-tertiary-fixed: #12202f;
  --color-on-tertiary-fixed-variant: #2c3f54;

  /* Accent — the green again. There is no separate accent hue: a fourth
     colour would break the three-colour rule, and the green already reads
     as "act on this". */
  --color-accent: #437742;
  --color-on-accent: #ffffff;

  /* Error — the single permitted exception to the palette. */
  --color-error: #b3261e;
  --color-on-error: #ffffff;
  --color-error-container: #f7ddda;
  --color-on-error-container: #7a1a15;

  /* Success — the brand green, so a confirmation is on-palette. */
  --color-success: #437742;
  --color-on-success: #ffffff;
  --color-success-container: #d8e4d7;
  --color-on-success-container: #14290f;

  /* Surfaces — cream ground, white cards.
     The page is cream; anything raised above it is white. That inversion of
     the usual (white page, grey cards) is what gives the paper feeling. */
  --color-background: #f5ecc2;
  --color-on-background: #1a1a1a;

  --color-surface: #f5ecc2;
  --color-surface-dim: #e8ddad;
  --color-surface-bright: #fbf6e0;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #fbf6e0;
  --color-surface-container: #f2e7b6;
  --color-surface-container-high: #ece0a7;
  --color-surface-container-highest: #e6d998;
  --color-surface-variant: #efe6c4;
  --color-surface-tint: #437742;

  --color-on-surface: #1a1a1a;
  --color-on-surface-variant: #5a5545;
  --color-inverse-surface: #2b2a22;
  --color-inverse-on-surface: #f5ecc2;

  /* Outlines are thin and low-contrast: lines, not borders. */
  --color-outline: #8c8570;
  --color-outline-variant: rgb(26 26 26 / 14%);

  /* Scrim for modals and drawers */
  --color-scrim: rgb(26 26 26 / 45%);

  /* ------------------------------------------------------ typography ---- */
  --font-headline: "Libre Caslon Text", "Vazirmatn", Georgia, serif;
  --font-body: "Vazirmatn", "Sahel", system-ui, -apple-system, sans-serif;

  --text-display-lg: 3rem;        /* 48px */
  --text-display-lg-mobile: 2.25rem;
  --text-headline-md: 2rem;       /* 32px */
  --text-headline-sm: 1.5rem;     /* 24px */
  --text-body-lg: 1.125rem;       /* 18px */
  --text-body-md: 1rem;           /* 16px */
  --text-label-md: 0.875rem;      /* 14px */
  --text-label-sm: 0.75rem;       /* 12px */

  --leading-display-lg: 3.75rem;
  --leading-display-lg-mobile: 2.75rem;
  --leading-headline-md: 2.5rem;
  --leading-headline-sm: 2rem;
  --leading-body-lg: 1.75rem;
  --leading-body-md: 1.5rem;
  --leading-label-md: 1.25rem;

  --tracking-display: -0.02em;
  --tracking-label: 0.05em;

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

  /* --------------------------------------------------------- spacing ---- */
  --space-xs: 4px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --gutter: 24px;
  --container-max: 1200px;

  /* ---------------------------------------------------------- shape ----- */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;     /* controls: buttons, inputs */
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;   /* cards */
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* ------------------------------------------------------ elevation ----- */
  /* Tonal layers over drop shadows. Only modals get real depth. */
  --shadow-none: none;
  --shadow-modal: 0 8px 32px rgb(60 42 33 / 8%);
  --border-hairline: 1px solid var(--color-outline-variant);

  /* ------------------------------------------------------------ misc ---- */
  --header-height-mobile: 56px;
  --header-height-desktop: 96px;
  --tap-target: 44px;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;
  --z-header: 50;
  /* The scrim must sit BELOW the panel it dims, or it swallows every click
     inside that panel. Sharing one token made the filter drawer unusable. */
  --z-scrim: 59;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;
}

/* Respect a reduced-motion preference across the whole site. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}