/* ============================================================
   IPNLF DECARBONISATION PROTOTYPE: DESIGN TOKENS
   Carried over from the IPNLF membership landing page mock/design
   system (same brand: deep ocean teal-navy + warm orange accent,
   Bebas Neue display / Open Sans text). Kept identical so this
   prototype stays visually consistent with existing IPNLF work.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");

:root {
  /* ---- Brand core ---- */
  --ipnlf-deep:    #0C465B;
  --ipnlf-teal:    #27AD9C;
  --ipnlf-ocean:   #5CA1B9;
  --ipnlf-sky:     #5FA6DB;
  --ipnlf-orange:  #E88C33;
  --ipnlf-gold:    #F6AE2D;

  /* Deepened variants of teal/ocean for use as large white-text panels:
     the base swatches read ~2.8:1 contrast with white (fails WCAG even at
     the large-text 3:1 threshold); these hold ~6:1. */
  --ipnlf-teal-deep:  #146E64;
  --ipnlf-ocean-deep: #2E6B82;
  --ipnlf-orange-deep: #7A4413;

  /* ---- Neutrals ---- */
  --ipnlf-ink:     #0E0705;
  --ipnlf-slate:   #4A5A60;
  --ipnlf-gray:    #888888;
  --ipnlf-mist:    #C2D0D0;
  --ipnlf-foam:    #EEF4F4;
  --ipnlf-white:   #FFFFFF;

  /* ---- Semantic text ---- */
  --text-strong:       var(--ipnlf-ink);
  --text-body:         #1E2A2E;
  --text-muted:        var(--ipnlf-slate);
  --text-on-dark:      var(--ipnlf-white);
  --text-on-dark-soft: #C9DBDE;
  --text-link:         var(--ipnlf-deep);
  --text-accent:       var(--ipnlf-orange);

  /* ---- Semantic surfaces ---- */
  --surface-page:  var(--ipnlf-white);
  --surface-soft:  var(--ipnlf-foam);
  --surface-card:  var(--ipnlf-white);
  --surface-dark:  var(--ipnlf-deep);

  /* ---- Borders ---- */
  --border-subtle:  var(--ipnlf-mist);
  --border-on-dark: rgba(255,255,255,0.28);

  /* ---- Brand actions ---- */
  --brand-primary:   var(--ipnlf-deep);
  --brand-secondary: var(--ipnlf-teal);
  --brand-accent:    var(--ipnlf-orange);
  --brand-highlight: var(--ipnlf-gold);

  /* ---- Type ---- */
  --font-display: "Bebas Neue", "Anton", "Oswald", sans-serif;
  --font-text:    "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-display-lg: 4rem;
  --fs-display-md: 2.75rem;
  --fs-h1: 2.25rem;
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-overline: 0.8125rem;

  --lh-display: 0.92;
  --lh-heading: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --ls-display: 0.01em;
  --ls-overline: 0.16em;

  /* ---- Spacing (8px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(12,70,91,0.08);
  --shadow-md: 0 8px 24px rgba(12,70,91,0.10);
  --shadow-lg: 0 18px 48px rgba(12,70,91,0.14);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-form: 720px;
}