/* ============================================================
   NAB BUMP · TOKENS — NAB branding
   Palette, type and shape measured off nab.com.au:
   NAB red #c20000 as the single action colour, black header and
   dark bands, a warm grey scale, Source Sans type with light
   display headings, and small 4–8px radii.
   The ONLY file with colour literals.
   ============================================================ */
:root {
  /* --- NAB core ----------------------------------------- */
  --color-nab-red: #c20000;          /* primary action + accent */
  --color-nab-red-dark: #9c0000;     /* hover / deeper accent */
  --color-ink-black: #000000;        /* header, dark bands, body text */
  --color-paper-white: #ffffff;
  --color-slate-dark: #383b3d;       /* strong secondary text */
  --color-grey: #6d6f71;             /* meta text, chart secondary */
  --color-line: #e6e6e6;             /* hairlines and dividers */
  --color-mist: #f5f5f5;             /* light neutral band + card surface */
  --color-night: #1a1a1a;            /* off-black panel */

  /* --- Legacy token names, remapped to the NAB palette ---
     site.css and motion.js read these, so the whole system
     re-skins from the values above. */
  --color-kiwi-green: var(--color-nab-red);   /* panels that were brand-filled */
  --color-forest: var(--color-nab-red-dark);
  --color-peach: var(--color-mist);
  --color-sky: var(--color-mist);
  --color-canopy-green: var(--color-ink-black);
  --color-coral-pulse: var(--color-nab-red);
  --color-indigo-bloom: var(--color-nab-red-dark);
  --color-leaf-bright: var(--color-nab-red);
  --color-deep-teal: var(--color-slate-dark);
  --color-orchid-tint: var(--color-line);
  --color-sky-signal: var(--color-grey);
  --color-aubergine: var(--color-slate-dark);
  --color-ash: #9a9c9e;
  --color-slate: var(--color-grey);
  --color-graphite: var(--color-slate-dark);
  --color-charcoal: var(--color-night);
  --color-frost-gray: var(--color-line);
  --color-cloud-gray: var(--color-mist);
  --color-lavender-mist: var(--color-paper-white);
  --color-mint-wash: var(--color-line);
  --color-sky-wash: var(--color-mist);
  --color-sage-wash: var(--color-mist);
  --color-lilac-wash: var(--color-mist);
  --color-peach-wash: var(--color-mist);
  --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: #f0dede;                          /* outgoing chat bubble */
  --color-indigo-deep: var(--color-night);

  /* --- Typography — Source Sans, as nab.com.au sets it --- */
  --font-dm-sans: 'Source Sans 3', source-sans-pro, helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', roboto, 'Helvetica Neue', sans-serif;

  --text-caption: 13px;     --leading-caption: 1.3;
  --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.35;
  --text-heading-sm: 24px;  --leading-heading-sm: 1.3;
  --text-heading: 32px;     --leading-heading: 1.25;
  --text-heading-lg: 48px;  --leading-heading-lg: 1.15;
  --text-display: 72px;     --leading-display: 1.08;
  --text-display-xl: 116px; --leading-display-xl: 0.95;

  --tracking-mid: 0em;          /* NAB sets headings at normal tracking */
  --tracking-display: -0.01em;
  --tracking-label: 0.04em;

  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-display: 300;   /* their large headings are light */

  /* 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 — NAB rounds lightly: 4px controls, 8px cards */
  --radius-tags: 4px;
  --radius-cards: 8px;
  --radius-icons: 4px;
  --radius-buttons: 4px;
  --radius-cards-sm: 8px;

  --shadow-subtle: rgba(0, 0, 0, .14) 0px 1px 4px 0px;

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

  /* Card face — kept a shade off pure black so it reads as plastic */
  --card-ink: #16181a;
  --card-leaf: var(--color-nab-red);
  --card-mint: #ffffff;
  --card-cream: #e6e6e6;

  /* 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; } }