/* ==========================================================================
   Basalt brand tokens
   The single source for colour, type, space and motion on the website.
   Mirrors the Basalt Brand Guidelines (design system artifact). Change a
   value here and every page follows.

   Colour rules in one line: white and off-white grounds, dark grey text,
   navy and orange from the logo as strategic pops, and toned-down versions
   of both (slate, mist, ember, peach) for every other accent.
   ========================================================================== */

:root {
  /* grounds */
  --surface:        #FFFFFF;
  --surface-paper:  #F6F6F4;
  --surface-sunk:   #EDEDEB;
  --line:           #E0E0DD;

  /* text: dark grey, never pure black */
  --ink:            #242424;
  --ink-soft:       #4A4A48;
  --ink-muted:      #6B6B68;
  --ink-faint:      #B5B5B1;   /* decorative only, never text people must read */

  /* the logo colours, exact: use sparingly */
  --navy:           #151F49;
  --navy-700:       #2A3359;
  --on-navy:        #FFFFFF;
  --signal:         #FF4200;   /* the dot: once per view */
  --on-signal:      #151F49;

  /* toned-down versions for every other accent */
  --slate:          #5C6380;   /* navy, toned: icons, diagrams, secondary links */
  --mist:           #E8EAF0;   /* navy tint: spec tables, info panels */
  --ember:          #C23A0A;   /* orange, toned: orange text under 24px */
  --peach:          #FFF1EA;   /* orange tint: highlighted notes */

  /* roles */
  --action:         var(--navy);
  --on-action:      #FFFFFF;
  --focus:          var(--signal);

  /* type families */
  --font-logo:  Montserrat, "Helvetica Neue", Arial, sans-serif;
  --font-sans:  Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Young Serif", Georgia, "Times New Roman", serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-hand:  Caveat, "Segoe Print", "Bradley Hand", cursive;

  /* type sizes: phone to desktop */
  --fs-display:  clamp(2.75rem, 6.2vw, 5rem);       /* 44 → 80 */
  --fs-h1:       clamp(2.25rem, 4.4vw, 3.5rem);     /* 36 → 56 */
  --fs-h2:       clamp(1.875rem, 3.2vw, 2.5rem);    /* 30 → 40 */
  --fs-h3:       clamp(1.375rem, 2vw, 1.625rem);    /* 22 → 26 */
  --fs-h4:       1.1875rem;                         /* 19 */
  --fs-focus-xl: clamp(2rem, 3.8vw, 3rem);          /* 32 → 48 */
  --fs-focus:    clamp(1.5rem, 2.6vw, 2rem);        /* 24 → 32 */
  --fs-number:   clamp(2.75rem, 5vw, 4rem);         /* 44 → 64 */
  --fs-lead:     clamp(1.1875rem, 1.6vw, 1.3125rem);/* 19 → 21 */
  --fs-body:     clamp(1rem, 1.1vw, 1.0625rem);     /* 16 → 17 */
  --fs-body-sm:  0.9375rem;                         /* 15 */
  --fs-caption:  0.8125rem;                         /* 13 */
  --fs-label:    0.75rem;                           /* 12, mono, uppercase */
  --fs-spec:     0.8125rem;                         /* 13, mono */
  --fs-figure:   0.6875rem;                         /* 11, mono, uppercase */

  /* space: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --container: 1280px;
  --gutter: 24px;
  --margin: 24px;            /* page side margin, grows below */
  --section: var(--space-9); /* section padding, grows below */

  /* corners and depth */
  --radius-0: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --shadow-inset: 0 6px 22px rgba(21, 31, 73, 0.16);

  /* motion */
  --dur-fast: 200ms;
  --dur-base: 500ms;
  --dur-slow: 900ms;
  --dur-draw: 1400ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-draw: cubic-bezier(0.45, 0.05, 0.25, 1);
}

@media (min-width: 768px)  { :root { --margin: 48px; } }
@media (min-width: 1200px) { :root { --margin: 64px; --section: var(--space-11); } }

/* A navy band (the closing contact block, a dark chapter opener).
   Flips the text tokens so anything inside reads on navy. */
.on-navy {
  --surface:       var(--navy);
  --surface-paper: #1C2654;
  --surface-sunk:  #222D5E;
  --line:          #2E3A6E;
  --ink:           #F2F2EF;
  --ink-soft:      #CDD0DB;
  --ink-muted:     #A3A9BF;
  --ink-faint:     #4A5482;
  --slate:         #8F96B0;
  --ember:         #FF7A45;
  --action:        #F2F2EF;
  --on-action:     var(--navy);
  background: var(--surface);
  color: var(--ink);
}