/* ==========================================================================
   One For Nature — design tokens
   Single source of truth. No hex values anywhere else in the CSS.
   Mirrored into theme.json so the block editor can't go off-brand.
   Colours and radii match the app: onefornature-app/src/lib/theme.ts
   ========================================================================== */

:root {
  /* --- Colour: the official brand sheet -------------------------------------
     Pōhutukawa is the action colour. It appears only where someone can act.  */

  --black: #141717;              /* Aotearoa Black — text, dark fields         */
  --moana: #c2baba;              /* Moana White — logo and quiet text on dark  */
  --ngahere: #334536;            /* Ngahere Green — brand, links               */
  --whenua: #7a876b;             /* Whenua Green — map land outline            */
  --awa: #216969;                /* Awa Blue — freshwater, petitions on map    */
  --pohutukawa: #c7293b;         /* Pōhutukawa Red — the action colour         */

  /* --- Colour: derived tints, as used in the app --------------------------- */

  --pohutukawa-pressed: #a8202f;
  --white: #ffffff;
  --mist: #f3f1f0;               /* banded sections, inputs                    */
  --mist-deep: #ece9e8;
  --ngahere-tint: #e7eae2;
  --muted: #5f6862;              /* secondary text, AA on white and mist       */
  --rule: #e3e5e0;               /* hairlines on light                         */
  --night-sea: #10262a;          /* the map's water                            */

  /* --- Colour: working shades on dark -------------------------------------- */

  --black-raised: #1f2323;       /* raised surface on black                    */
  --rule-dark: #3a4040;          /* hairlines on dark                          */
  --text-on-dark: #f2f4f0;
  --glass: rgba(20, 23, 23, 0.82);
  --field-on-dark: rgba(255, 255, 255, 0.14);
  --field-line-on-dark: rgba(255, 255, 255, 0.28);

  /* The photo scrim. Black, as on the app's sign-in screen. */
  --scrim-0: rgba(20, 23, 23, 0);
  --scrim-30: rgba(20, 23, 23, 0.3);
  --scrim-55: rgba(20, 23, 23, 0.55);
  --scrim-70: rgba(20, 23, 23, 0.7);
  --scrim-85: rgba(20, 23, 23, 0.85);

  /* --- Type ----------------------------------------------------------------
     One family. Titles carry the brand: heavy weight, tight tracking.        */

  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: 0.875rem;           /* labels, small print                        */
  --step-0: 1.0625rem;           /* body                                       */
  --step-1: 1.25rem;             /* lead paragraph                             */
  --step-2: 1.5rem;              /* h3                                         */
  --step-3: clamp(2rem, 3.3vw, 3rem);          /* h2                           */
  --step-4: clamp(2.75rem, 6.2vw, 5.25rem);    /* page title                   */
  --step-5: clamp(3.5rem, 8vw, 7.25rem);       /* hero                         */

  --leading-tight: 0.98;
  --leading-head: 1.06;
  --leading-body: 1.6;

  --track-title: -0.038em;
  --track-head: -0.03em;
  --track-sub: -0.015em;

  /* --- Space --------------------------------------------------------------- */

  --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;
  --sp-8: clamp(4.5rem, 8.5vw, 7.5rem);
  --sp-9: clamp(5.5rem, 11vw, 10rem);

  /* --- Structure -----------------------------------------------------------
     Pills and soft cards. Same radii as the app.                             */

  --radius-thumb: 10px;
  --radius-field: 16px;
  --radius-image: 16px;
  --radius-card: 22px;
  --radius-pill: 999px;

  --container: 1280px;
  --measure: 36rem;
  --hairline: 1px;
  --header-h: 84px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 200ms;
}