/* =========================================================================
   QUANTUM 44 — Foundations
   Colors, type, motion, materials.
   The "o-ring SSS" material is defined here and reused across components.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700;1,900&family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  /* ---------- Core palette ---------- */
  --astro-noir:        #1B1B1E;   /* primary surface */
  --astro-noir-deep:   #0E0E10;   /* deeper void / page bg */
  --astro-noir-rise:   #25252A;   /* one step up */
  --astro-noir-crest:  #2F2F36;   /* highest neutral surface */

  --quantum-teal:      #00B4D8;   /* primary accent — info / engineering */
  --quantum-teal-glow: #4FD1E8;   /* hover / highlight */
  --quantum-teal-deep: #007A93;   /* pressed / shadow rim */
  --quantum-teal-bleed:rgba(0,180,216,0.35); /* SSS bleed */

  --plasma-orchid:     #7B2CBF;   /* secondary accent — soul / signature */
  --plasma-orchid-glow:#A65BE0;
  --plasma-orchid-deep:#4A1B73;
  --plasma-orchid-bleed:rgba(123,44,191,0.35);

  --ion-mint:          #6FFFE9;   /* tertiary — radio / live audio */
  --ion-mint-deep:     #0E7C6A;
  --ion-mint-bleed:    rgba(111,255,233,0.45);

  /* ---------- Semantic neutrals ---------- */
  --bg:                var(--astro-noir-deep);
  --surface-1:         var(--astro-noir);
  --surface-2:         var(--astro-noir-rise);
  --surface-3:         var(--astro-noir-crest);

  --fg-1:              #F4F4F7;   /* primary text */
  --fg-2:              #B7B7C2;   /* secondary text */
  --fg-3:              #6E6E7A;   /* tertiary / metadata */
  --fg-4:              #3F3F48;   /* faintest, disabled */

  --hairline:          rgba(255,255,255,0.06);
  --hairline-strong:   rgba(255,255,255,0.12);
  --rim-light:         rgba(255,255,255,0.18);
  --rim-shadow:        rgba(0,0,0,0.65);

  /* ---------- Status ---------- */
  --signal-render:     #00B4D8;   /* teal — engineering / processing */
  --signal-soul:       #7B2CBF;   /* orchid — creative / signature */
  --signal-success:    #4ADE80;   /* used sparingly */
  --signal-warn:       #F5A524;
  --signal-error:      #F43F5E;

  /* ---------- Type ----------
     Two-axis "Advanced Upscale" tension:
       headers  → Playfair Display 900, tight  (-0.02em)
       data     → JetBrains Mono 400, breathing (+0.1em)
     Orbitron stays as the engineering display face for chrome (eyebrows,
     button caps, labels) where the cinematic-couture serif would feel too
     editorial. */
  --font-couture:      'Playfair Display', 'Didot', 'Bodoni MT', serif;
  --font-display:      'Orbitron', 'Eurostile', 'Bank Gothic', sans-serif;
  --font-body:         'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', 'IBM Plex Mono', monospace;

  --tracking-couture:  -0.02em;
  --tracking-data:      0.10em;
  --tracking-display:   0.12em;
  --tracking-wordmark:  0.22em;
  --tracking-eyebrow:   0.32em;
  --tracking-body:      0.005em;

  /* The signature header glow — Quantum Teal, subtle. Layered for depth:
     a tight inner halo + a wider soft bloom. */
  --glow-header:
    0 0 1px rgba(0,180,216,0.55),
    0 0 12px rgba(0,180,216,0.35),
    0 0 32px rgba(0,180,216,0.18);

  /* Reduced-glow fallback for body-sized couture (≤24px) to keep small text legible. */
  --glow-header-sm:
    0 0 1px rgba(0,180,216,0.5),
    0 0 8px rgba(0,180,216,0.25);

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10:128px;

  /* ---------- Radii — o-rings are always pill or full ---------- */
  --r-pill:     999px;
  --r-card:     20px;     /* default card */
  --r-card-sm:  14px;
  --r-tile:     8px;
  --r-chip:     6px;

  /* ---------- Elevation / shadow system ----------
     Cinematic SSS shadows: hard rim, soft drop, faint accent bleed. */
  --elev-1:
    inset 0 1px 0 var(--rim-light),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 1px 1px rgba(0,0,0,0.25),
    0 6px 18px rgba(0,0,0,0.55);

  --elev-2:
    inset 0 1px 0 var(--rim-light),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 2px 2px rgba(0,0,0,0.3),
    0 14px 36px rgba(0,0,0,0.65),
    0 0 0 1px var(--hairline);

  --elev-3:
    inset 0 1px 0 var(--rim-light),
    inset 0 -2px 0 rgba(0,0,0,0.6),
    0 24px 64px rgba(0,0,0,0.75),
    0 0 0 1px var(--hairline-strong);

  --glow-teal:    0 0 24px rgba(0,180,216,0.45), 0 0 64px rgba(0,180,216,0.15);
  --glow-orchid:  0 0 24px rgba(123,44,191,0.45), 0 0 64px rgba(123,44,191,0.15);

  /* ---------- Motion ---------- */
  --ease-quantum: cubic-bezier(0.2, 0.8, 0.2, 1);   /* default UI ease */
  --ease-cine:    cubic-bezier(0.65, 0, 0.35, 1);   /* cinematic in/out */
  --ease-thrust:  cubic-bezier(0.4, 0, 0.1, 1);     /* heavy entry */
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   420ms;
  --t-cine:   720ms;
}

/* =========================================================================
   Base
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   Type scale — semantic
   ========================================================================= */
.q-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--quantum-teal);
}

.q-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}

/* ---------- Couture headers ----------
   Playfair Display 900, tight tracking, optical SSS-teal glow.
   This is the primary header treatment. Use sentence case or Title Case;
   uppercase reads too brutalist on a high-contrast didone. */
.q-h1 {
  font-family: var(--font-couture);
  font-weight: 900;
  font-size: clamp(56px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: var(--tracking-couture);
  color: var(--fg-1);
  text-shadow: var(--glow-header);
}

.q-h2 {
  font-family: var(--font-couture);
  font-weight: 900;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: var(--tracking-couture);
  color: var(--fg-1);
  text-shadow: var(--glow-header);
}

.q-h3 {
  font-family: var(--font-couture);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: var(--tracking-couture);
  color: var(--fg-1);
  text-shadow: var(--glow-header-sm);
}

/* Engineering display — Orbitron — for button caps, eyebrows, machine labels.
   Kept as a separate class; do NOT use on prose headings. */
.q-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.q-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.q-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
}

.q-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-2);
}

.q-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- Data / 44-bit performance metrics ----------
   JetBrains Mono 400, +0.1em tracking. Engineered to sit comfortably next to
   tight couture headers without competing — wide breath, not loud color. */
.q-data {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: var(--tracking-data);
  color: var(--fg-2);
}

.q-data--num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: var(--tracking-data);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.q-data--lbl {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  color: var(--fg-3);
}

.q-code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  color: var(--quantum-teal-glow);
  background: rgba(0,180,216,0.06);
  padding: 2px 6px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(0,180,216,0.18);
}

/* Pure HTML semantic mapping — couture for prose headings, data for mono. */
h1 { font: 900 72px/0.98 var(--font-couture); letter-spacing: -0.02em; color: var(--fg-1); text-shadow: var(--glow-header); margin: 0; }
h2 { font: 900 48px/1.02 var(--font-couture); letter-spacing: -0.02em; color: var(--fg-1); text-shadow: var(--glow-header); margin: 0; }
h3 { font: 800 28px/1.15 var(--font-couture); letter-spacing: -0.02em; color: var(--fg-1); text-shadow: var(--glow-header-sm); margin: 0; }
p  { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; }
small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-3); }
code { font-family: var(--font-mono); letter-spacing: 0.10em; color: var(--quantum-teal-glow); }


/* =========================================================================
   THE O-RING SSS MATERIAL
   The signature material. Used on buttons, chips, toggles, knobs, cards.
   Mixin-style classes — combine .q-oring with a modifier for color.
   ========================================================================= */

.q-oring {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-pill);
  background:
    /* hot top highlight */
    linear-gradient(180deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.06) 18%,
      rgba(255,255,255,0)    42%),
    /* under-belly SSS bleed (set per modifier) */
    radial-gradient(140% 90% at 50% 115%,
      var(--oring-bleed, rgba(255,255,255,0.18)) 0%,
      transparent 60%),
    /* mid tone */
    linear-gradient(180deg,
      var(--oring-top, #2E2E36) 0%,
      var(--oring-mid, #1B1B1E) 55%,
      var(--oring-bot, #101013) 100%);
  box-shadow:
    /* inner sculpt */
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 -10px 18px rgba(0,0,0,0.45),
    inset 0 10px 18px rgba(255,255,255,0.04),
    /* drop */
    0 1px 0 rgba(255,255,255,0.04),
    0 8px 18px rgba(0,0,0,0.55),
    0 22px 48px rgba(0,0,0,0.45),
    /* outer rim hairline */
    0 0 0 1px var(--oring-rim, rgba(255,255,255,0.08));
  transition:
    transform var(--t-base) var(--ease-quantum),
    box-shadow var(--t-base) var(--ease-quantum),
    filter var(--t-base) var(--ease-quantum);
}

/* The signature top "wet" gloss streak */
.q-oring::before {
  content: "";
  position: absolute;
  inset: 1px 6% auto 6%;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.10) 55%,
    rgba(255,255,255,0)    100%);
  filter: blur(0.4px);
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

/* Soft caustic glow under the ring (the "subsurface bleed") */
.q-oring::after {
  content: "";
  position: absolute;
  inset: 60% -2% -40% -2%;
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 0%,
    var(--oring-caustic, rgba(0,180,216,0.55)) 0%,
    transparent 70%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
}

/* ----- modifiers ----- */
.q-oring--noir {
  --oring-top: #34343B;
  --oring-mid: #1F1F23;
  --oring-bot: #0E0E11;
  --oring-bleed: rgba(255,255,255,0.10);
  --oring-rim: rgba(255,255,255,0.10);
  --oring-caustic: rgba(0,180,216,0.20);
}
.q-oring--teal {
  --oring-top: #18C9EF;
  --oring-mid: #00B4D8;
  --oring-bot: #00637A;
  --oring-bleed: rgba(120,234,255,0.55);
  --oring-rim: rgba(0,180,216,0.55);
  --oring-caustic: rgba(0,180,216,0.85);
  color: #001a22;
}
.q-oring--orchid {
  --oring-top: #A65BE0;
  --oring-mid: #7B2CBF;
  --oring-bot: #3F1668;
  --oring-bleed: rgba(190,130,240,0.55);
  --oring-rim: rgba(166,91,224,0.55);
  --oring-caustic: rgba(123,44,191,0.85);
  color: #f6ecff;
}
.q-oring--ghost {
  --oring-top: #2A2A30;
  --oring-mid: #1B1B1E;
  --oring-bot: #131316;
  --oring-bleed: rgba(255,255,255,0.04);
  --oring-rim: rgba(255,255,255,0.06);
  --oring-caustic: rgba(255,255,255,0.05);
}

/* States */
.q-oring:hover { transform: translateY(-1px); filter: brightness(1.08) saturate(1.05); }
.q-oring:active { transform: translateY(1px) scale(0.99); filter: brightness(0.94); }

/* When o-ring is rectangular (cards) */
.q-oring--card {
  border-radius: var(--r-card);
}
.q-oring--card::before { border-radius: calc(var(--r-card) - 4px); }

/* Soft (no caustic) — for surfaces */
.q-oring--flat::after { display: none; }