/* Digital Shack v3: design tokens
   White baseline, confirmed 26 October 2026, built to the reference in
   research/reference-video-teardown.md. NX brand: Nx Blue, Anton, Poppins. */

@font-face { font-family: "Anton";   src: url("../fonts/Anton-Regular.woff2") format("woff2");   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.woff2") format("woff2");  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.woff2") format("woff2");    font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Brand */
  --nx-blue:        #42B5F7;
  --nx-blue-deep:   #2E9BE0;
  --navy:           #0A1826;
  --white:          #FFFFFF;

  /* Ground and surfaces. White page, tinted glass cards one step up,
     and a navy stage for the marquees, the interstitials and the two toys. */
  --bg:             #FFFFFF;
  --surface:        #F5F8FB;
  --surface-2:      #EBF0F5;
  --stage:          #0A1826;
  --stage-2:        #112436;
  --border:         rgba(10, 24, 38, 0.10);
  --border-strong:  rgba(10, 24, 38, 0.18);
  --border-on-stage: rgba(255, 255, 255, 0.12);

  /* Ink. Nx Blue is never a text colour on white: 2.1:1. It is a fill. */
  --text:           #0A1826;
  --heading:        #2E9BE0;   /* brand dark blue: every Anton headline on a light ground. 3.05:1 on white, large text only */
  --heading-deep:   #1A6FAE;   /* deeper shade of the same blue: card level titles on the grey surface. 5.0:1 on surface, 5.4:1 on white */
  --text-muted:     rgba(10, 24, 38, 0.74);   /* measured below after the detector caught 0.66 */
  --text-faint:     rgba(10, 24, 38, 0.62);   /* 0.50 measured 3.4:1 and failed; 0.62 clears 4.5:1 */
  --on-stage:       #FFFFFF;
  --on-stage-muted: rgba(255, 255, 255, 0.66);
  --on-stage-faint: rgba(255, 255, 255, 0.50);
  --on-accent:      #0A1826;                  /* button ink on Nx Blue, 7.8:1 */

  --ok:             #1F9D5A;
  --error:          #C8322B;

  /* Type */
  --font-display:   "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body:      "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --size-wordmark:  clamp(72px, 13vw, 200px);   /* the hero wordmark only */
  --size-statement: clamp(40px, 6vw, 88px);     /* interstitials and the perspective */
  --size-h2:        clamp(36px, 4.4vw, 64px);
  --size-card-title: clamp(22px, 2vw, 28px);
  --size-h3:        clamp(20px, 1.6vw, 24px);
  --size-body:      17px;
  --size-body-lg:   clamp(18px, 1.4vw, 21px);
  --size-ui:        16px;
  --size-small:     14px;
  --size-eyebrow:   12px;

  --leading-display: 0.96;
  --leading-body:    1.65;
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.22em;

  --measure:        62ch;

  /* Rhythm, 8px base with two half steps. */
  --s0: 4px; --s1h: 12px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px; --s7: 144px;

  /* Shape. Cards 20px, controls 12px, pills full. */
  --radius-card:  20px;
  --radius:       12px;
  --radius-pill:  999px;

  /* Depth. On white a tinted shadow reads where a border disappears. */
  --shadow-1: 0 8px 24px rgba(10, 24, 38, 0.08);
  --shadow-2: 0 18px 48px rgba(10, 24, 38, 0.12);
  --shadow-stage: 0 24px 60px rgba(10, 24, 38, 0.25);

  /* Motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   120ms;
  --dur-press:  140ms;
  --dur:        260ms;
  --dur-slow:   600ms;
  --marquee:    42s;

  /* Layout */
  --container:  1200px;
  --gutter:     clamp(16px, 4vw, 48px);
  --nav-height: 80px;
  --rail-width: 88px;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--nx-blue);
  --focus-ring-stage: 0 0 0 2px var(--stage), 0 0 0 4px var(--nx-blue);

  /* Drawn marks, one stroke weight, used as masks. */
  --icon-arrow:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
  --icon-arrow-ne: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>");
  --icon-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5M6 11l6-6 6 6'/></svg>");
  --icon-tick:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  --icon-plus:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --icon-spark:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M12 3l2.2 6.8L21 12l-6.8 2.2L12 21l-2.2-6.8L3 12l6.8-2.2z'/></svg>");
  --icon-target:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='8'/><circle cx='12' cy='12' r='3'/></svg>");
  --icon-refresh: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.3-5.7'/><path d='M20 4v5h-5'/></svg>");
  --icon-code:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16'/></svg>");
  --icon-play:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M7 5v14l12-7z'/></svg>");
  --icon-cog:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/></svg>");
  --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}