/* ============================================================
   BUMP · TOKENS — official Kiwibank branding
   Palette, type and shape taken from kiwibank.co.nz:
   Kiwi green #19e480 on black and white, peach and sky accents,
   Geograph type, and square corners everywhere (their site uses
   border-radius 0 on buttons, cards, chips and images).
   The ONLY file with colour literals.
   ============================================================ */
:root {
  /* --- Kiwibank core ------------------------------------ */
  --color-ink-black: #000000;        /* dominant surface and text */
  --color-paper-white: #ffffff;
  --color-kiwi-green: #19e480;       /* primary action + accent */
  --color-forest: #258752;           /* deep green, links and secondary headings */
  --color-peach: #ffb7a9;            /* accent panels and tags */
  --color-sky: #b1d3de;              /* accent panels and tags */
  --color-mist: #f2f4f4;             /* light neutral band + card surface */
  --color-night: #191919;            /* off-black panel */

  /* --- Legacy token names, remapped to the Kiwibank palette ---
     (site.css and motion.js read these, so the whole system
     re-skins from the values above.) */
  --color-canopy-green: var(--color-ink-black);
  --color-coral-pulse: var(--color-kiwi-green);
  --color-indigo-bloom: var(--color-forest);
  --color-leaf-bright: var(--color-kiwi-green);
  --color-deep-teal: var(--color-forest);
  --color-orchid-tint: var(--color-peach);
  --color-sky-signal: #5aa3bb;       /* sky, darkened enough for text and thin marks */
  --color-aubergine: #333333;
  --color-ash: #a7a8a9;
  --color-slate: #666666;
  --color-graphite: #333333;
  --color-charcoal: var(--color-night);
  --color-frost-gray: #dde0e0;
  --color-cloud-gray: var(--color-mist);
  --color-lavender-mist: var(--color-paper-white);
  --color-mint-wash: var(--color-mist);
  --color-sky-wash: var(--color-sky);
  --color-sage-wash: var(--color-mist);
  --color-lilac-wash: var(--color-mist);
  --color-peach-wash: var(--color-peach);
  --color-cream: var(--color-mist);
  --color-sand: var(--color-mist);

  --color-canopy-deep: var(--color-ink-black);        /* phone frame */
  --color-canopy-line: rgba(255, 255, 255, .22);      /* hairline on black */
  --color-chat-out: #d4f7e5;                          /* outgoing chat bubble */
  --color-indigo-deep: var(--color-night);

  /* --- Typography — Geograph, with Kiwibank's own fallback stack --- */
  --font-dm-sans: 'Geograph', 'Montserrat', Futura, Avenir, Corbel, 'URW Gothic', source-sans-pro, ui-sans-serif, system-ui, sans-serif;

  --text-caption: 13px;     --leading-caption: 1.2;
  --text-body-sm: 14px;     --leading-body-sm: 1.45;
  --text-body: 16px;        --leading-body: 1.5;
  --text-body-lg: 18px;     --leading-body-lg: 1.5;
  --text-subheading: 20px;  --leading-subheading: 1.3;
  --text-heading-sm: 25px;  --leading-heading-sm: 1.27;
  --text-heading: 30px;     --leading-heading: 1.17;
  --text-heading-lg: 48px;  --leading-heading-lg: 1.1;
  --text-display: 72px;     --leading-display: 1.02;
  --text-display-xl: 116px; --leading-display-xl: 0.9;

  --tracking-mid: -0.02em;       /* their 25–30px headings sit at -0.5 to -1px */
  --tracking-display: -0.033em;
  --tracking-label: 0.14em;      /* uppercase eyebrow labels */

  --font-weight-regular: 300;    /* Kiwibank body copy is light */
  --font-weight-medium: 500;
  --font-weight-semibold: 500;
  --font-weight-bold: 600;

  /* Spacing (4px base) */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px;
  --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; --spacing-80: 80px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1280px;
  --gutter: clamp(20px, 5.5vw, 80px);
  --section-y: clamp(72px, 9vw, 110px);
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Shape — Kiwibank is square: every radius is 0 */
  --radius-tags: 0;
  --radius-cards: 0;
  --radius-icons: 0;
  --radius-buttons: 0;
  --radius-cards-sm: 0;

  --shadow-subtle: none;

  /* Surfaces */
  --surface-page-canvas: var(--color-paper-white);
  --surface-card: var(--color-paper-white);
  --surface-dark: var(--color-ink-black);

  /* --- Card face: kept on the previous canopy-green design ---
     The card art is deliberately NOT re-skinned with the rest of the
     site, so these four values live here rather than in the palette. */
  --card-ink: #0a3922;
  --card-leaf: #1dbf73;
  --card-mint: #d2f2e3;
  --card-cream: #faf7e8;

  /* Motion */
  --motion: 1;
  --dur: calc(700ms * var(--motion));
  --dur-fast: calc(240ms * var(--motion));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

:root[data-motion="none"] { --motion: 0; }
@media (prefers-reduced-motion: reduce) { :root { --motion: 0; } }