/* ============================================================
   Quantum computing explainer
   quantum.css — Matt Sung Design System tokens + quantum accent
   ============================================================ */

/* ---------- Fonts (curated weight ladder) ---------- */
@font-face{ font-family:'GothamNarrow'; src:url('fonts/GothamNarrow-Thin.otf') format('opentype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:'GothamNarrow'; src:url('fonts/GothamNarrow-XLight.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:'GothamNarrow'; src:url('fonts/GothamNarrow-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'GothamNarrow'; src:url('fonts/GothamNarrow-Book.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'GothamNarrow'; src:url('fonts/GothamNarrow-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'GothamNarrow'; src:url('fonts/GothamNarrow-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'GothamNarrow'; src:url('fonts/GothamNarrow-Black.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; }

:root{
  /* Core achromatic palette (design system) */
  --color-bg:             #0A0A0A;
  --color-bg-pure-black:  #000000;
  --color-surface:        #141414;
  --color-surface-hover:  #1A1A1A;
  --color-border:         rgba(255,255,255,0.08);
  --color-border-strong:  rgba(255,255,255,0.14);
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: rgba(255,255,255,0.50);
  --color-text-tertiary:  rgba(255,255,255,0.30);

  /* Quantum accent — the one pop of color, electric violet + paired cyan.
     The two tones double as the |0> / |1> duality. Use ONLY on quantum
     and interactive moments — never in chrome or body text. */
  --q-violet:      #7C6CFF;
  --q-violet-deep: #5B49E6;
  --q-cyan:        #34E3FF;
  --q-cyan-deep:   #16B7D8;
  --q-glow:        rgba(124,108,255,0.55);
  --q-glow-soft:   rgba(124,108,255,0.16);
  --q-cyan-glow:   rgba(52,227,255,0.45);

  /* Type */
  --font-display: 'GothamNarrow','Arial Narrow',Arial,sans-serif;
  --font-body:    'GothamNarrow','Arial Narrow',Arial,sans-serif;
  --text-display-xl: 7.5rem;
  --text-display-lg: 4.5rem;
  --text-display-md: 3rem;
  --text-heading-lg: 2rem;
  --text-heading-md: 1.5rem;
  --text-body-lg:    1.25rem;
  --text-body-md:    1rem;
  --text-body-sm:    0.875rem;
  --text-label:      0.75rem;

  /* Spacing */
  --space-xs:0.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem;
  --space-xl:5rem; --space-2xl:7.5rem; --space-3xl:10rem;

  /* Layout */
  --layout-max:1440px; --layout-content:680px; --layout-page-margin:80px;

  /* Radii */
  --radius-hairline:4px; --radius-card:24px; --radius-pill:999px;

  /* Motion */
  --ease-standard: cubic-bezier(0.25,0.1,0.25,1.0);
  --duration-fast:250ms; --duration-normal:500ms; --duration-slow:700ms;
}

*{ box-sizing:border-box; }

html{ overflow-x:hidden; }

body{
  margin:0;
  overflow-x:hidden;
  background-color:var(--color-bg);
  color:var(--color-text-primary);
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.1; margin:0; text-wrap:balance; }

.eyebrow{
  font-family:var(--font-display);
  font-size:var(--text-label);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--color-text-tertiary);
}
.eyebrow--accent{ color:var(--q-violet); }