/* ==========================================================================
   N/EL Partners — Design tokens
   This is the single place to change colours, type, spacing and motion.
   Everything in base.css reads from these variables.
   ========================================================================== */

/* ---- 1. Brand palette (from the N/EL colour guide) ---------------------- */
:root {
  --nel-blue:       #2F80ED;   /* Bleu de France — the accent            */
  --nel-blue-deep:  #03258C;   /* Tealish Blue — depth, gradients        */
  --nel-white:      #F6F6F6;   /* Cascading White — light canvas         */
  --nel-black:      #0B0B0B;   /* Raven — dark canvas                    */

  /* Tints and shades of the blue (matches the swatch strips in the guide) */
  --blue-100: #EAF2FD;
  --blue-200: #C4DCFA;
  --blue-300: #9CC4F6;
  --blue-400: #5B9BF3;         /* accent used on dark backgrounds        */
  --blue-500: var(--nel-blue);
  --blue-600: #2769C4;
  --blue-700: #1A4A9A;
  --blue-800: var(--nel-blue-deep);

  /* Neutrals */
  --grey-100: #E8E8E8;
  --grey-300: #BDBDBD;
  --grey-500: #7A7A7A;
  --grey-700: #3A3A3A;
  --grey-900: #161616;
}

/* ---- 2. Themes ----------------------------------------------------------
   Light is the default (Pentagram-style off-white with near-black type).
   Dark swaps the canvas; the blue accent is lifted one step so it still
   reads clearly on Raven black.
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg:        var(--nel-white);
  --bg-raised: #FFFFFF;
  --fg:        var(--nel-black);
  --fg-muted:  var(--grey-500);
  --line:      rgba(11, 11, 11, .14);
  --accent:    var(--blue-500);
  --accent-fg: #FFFFFF;
  --hero-fg:   #FFFFFF;

  /* Gradient colours for the shader (color1 → color2 across, color3 on peaks) */
  --g1: #2F80ED;
  --g2: #03258C;
  --g3: #9CC4F6;

  --shadow: 0 20px 60px rgba(3, 37, 140, .12);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        var(--nel-black);
  --bg-raised: var(--grey-900);
  --fg:        var(--nel-white);
  --fg-muted:  #9A9A9A;
  --line:      rgba(246, 246, 246, .16);
  --accent:    var(--blue-400);
  --accent-fg: var(--nel-black);
  --hero-fg:   #FFFFFF;

  --g1: #03258C;
  --g2: #0B0B0B;
  --g3: #2F80ED;

  --shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* ---- 3. Typography ------------------------------------------------------
   Display: PP Telegraf (Ultralight 200 / Regular 400 / Ultrabold 800)
   Body:    Instrument Sans (variable, 400–700)
   ------------------------------------------------------------------------- */
@font-face { font-family: "PP Telegraf"; font-weight: 200; font-display: swap; src: url("../fonts/telegraf-ultralight.woff2") format("woff2"); }
@font-face { font-family: "PP Telegraf"; font-weight: 400; font-display: swap; src: url("../fonts/telegraf-regular.woff2")    format("woff2"); }
@font-face { font-family: "PP Telegraf"; font-weight: 800; font-display: swap; src: url("../fonts/telegraf-ultrabold.woff2")  format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("../fonts/instrument-sans-var.woff2") format("woff2"); }

:root {
  --font-display: "PP Telegraf", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale — min, preferred (viewport), max */
  --t-hero:    clamp(2rem, 8vw, 6.75rem);
  --t-h1:      clamp(2.25rem, 5vw,   4.5rem);
  --t-h2:      clamp(1.75rem, 3.2vw, 2.75rem);
  --t-h3:      clamp(1.25rem, 1.8vw, 1.5rem);
  --t-lead:    clamp(1.125rem, 1.6vw, 1.375rem);
  --t-body:    1rem;
  --t-small:   .8125rem;
  --t-eyebrow: .75rem;
  --t-stat:    clamp(3rem, 6vw, 5.5rem);

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-body:  1.55;
  --track-eyebrow: .12em;
}

/* ---- 4. Spacing, layout, radius ---------------------------------------- */
:root {
  --s-1: .25rem;   /*  4px */
  --s-2: .5rem;    /*  8px */
  --s-3: 1rem;     /* 16px */
  --s-4: 1.5rem;   /* 24px */
  --s-5: 2.5rem;   /* 40px */
  --s-6: 4rem;     /* 64px */
  --s-7: 6rem;     /* 96px */
  --s-8: 10rem;    /* 160px */

  --gutter:     clamp(1.25rem, 4vw, 4rem);   /* page side padding */
  --container:  1440px;
  --section:    clamp(4rem, 10vw, 9rem);     /* vertical rhythm between sections */
  --radius:     4px;
  --radius-lg:  12px;
  --header-h:   72px;
}

/* ---- 5. Motion ---------------------------------------------------------- */
:root {
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .25s;
  --dur:       .6s;
  --dur-slow:  1.1s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
}