/* ============================================================================
   ATOMIC LAB — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Design thesis: "the instrument".
   UI chrome stays near-monochrome (vacuum blue-black -> graphite -> ice).
   Saturated colour is reserved for MEANING: element family, phase, hazard,
   spectral data. Nothing glows unless it is alive.
   ========================================================================== */

:root {
  /* ---- Substrate ------------------------------------------------------- */
  --void:        #04060b;
  --vac-1:       #070a12;
  --vac-2:       #0b101c;
  --vac-3:       #111826;
  --graphite:    #18202f;

  /* Panels: translucent so the WebGL field reads through them */
  --panel:       rgba(255, 255, 255, 0.028);
  --panel-2:     rgba(255, 255, 255, 0.05);
  --panel-solid: #0a0e18;
  --edge:        rgba(255, 255, 255, 0.085);
  --edge-soft:   rgba(255, 255, 255, 0.05);
  --edge-strong: rgba(255, 255, 255, 0.18);

  /* ---- Ink ------------------------------------------------------------- */
  --ink:         #e9eefb;
  --ink-2:       #9fabc4;
  --ink-3:       #6a768f;
  --ink-4:       #47516633;

  /* ---- Signal (interface accents — used sparingly) --------------------- */
  --beam:        #59e6ff;   /* primary — argon/mercury blue-cyan  */
  --beam-deep:   #16a8cc;
  --beam-dim:    rgba(89, 230, 255, 0.13);
  --pulse:       #a98bff;   /* secondary — violet 436nm           */
  --flux:        #ffb454;   /* tertiary  — sodium D 589nm         */

  --ok:          #4fe08a;
  --warn:        #ffc94d;
  --danger:      #ff5f76;
  --hot:         #ff7a45;

  /* ---- Element family spectrum ----------------------------------------
     A single hue sweep that runs, roughly, in periodic-table reading order.
     Tuned for AA-legible dark-surface text and for deuteranopic separation. */
  --f-alkali:        #ff6262;
  --f-alkaline:      #ff9a4d;
  --f-transition:    #ffcf5c;
  --f-posttransition:#8ae05a;
  --f-metalloid:     #3be0a8;
  --f-nonmetal:      #3fd9e8;
  --f-halogen:       #5b9bff;
  --f-noble:         #9b8bff;
  --f-lanthanide:    #d06bff;
  --f-actinide:      #ff6bc1;
  --f-unknown:       #7d8aa3;

  /* ---- Phase ----------------------------------------------------------- */
  --phase-solid:  #8fa3c4;
  --phase-liquid: #4fc3f7;
  --phase-gas:    #ffd166;
  --phase-plasma: #ff6bc1;

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale — 1.24 ratio, clamped */
  --t-3xs: 0.6875rem;                              /* 11px  */
  --t-2xs: 0.75rem;                                /* 12px  */
  --t-xs:  0.8125rem;                              /* 13px  */
  --t-sm:  0.875rem;                               /* 14px  */
  --t-base:0.9375rem;                              /* 15px  */
  --t-md:  1.0625rem;                              /* 17px  */
  --t-lg:  clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --t-xl:  clamp(1.375rem, 1vw + 1.1rem, 1.875rem);
  --t-2xl: clamp(1.75rem, 1.8vw + 1.2rem, 2.625rem);
  --t-3xl: clamp(2.25rem, 3vw + 1.2rem, 3.75rem);
  --t-4xl: clamp(2.75rem, 5.2vw + 1rem, 5.75rem);

  --lh-tight: 1.05;
  --lh-snug:  1.28;
  --lh-body:  1.62;

  /* ---- Space (4px base, geometric) ------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.75rem;  --s-8: 4rem;
  --s-9: 5.5rem;   --s-10: 8rem;

  /* Section rhythm */
  --sect-y: clamp(2.5rem, 4.4vw, 4.75rem);
  --gutter: clamp(1rem, 3.5vw, 2.75rem);
  --maxw:   1320px;
  --maxw-wide: 1560px;
  --maxw-text: 68ch;

  /* ---- Form ------------------------------------------------------------ */
  --r-1: 3px;  --r-2: 6px;  --r-3: 10px;  --r-4: 16px;  --r-5: 24px;
  --r-pill: 999px;

  /* ---- Elevation -------------------------------------------------------
     Dark-UI shadows are mostly *light* (rim highlights) plus deep ambient. */
  --lift-1: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 12px rgba(0,0,0,0.5);
  --lift-2: 0 1px 0 rgba(255,255,255,0.07) inset, 0 8px 32px rgba(0,0,0,0.55);
  --lift-3: 0 1px 0 rgba(255,255,255,0.09) inset, 0 24px 64px -12px rgba(0,0,0,0.75);
  --bloom:  0 0 0 1px rgba(89,230,255,0.25), 0 0 28px -4px rgba(89,230,255,0.45);

  /* ---- Motion ---------------------------------------------------------- */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);        /* expo out  */
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-snap:   cubic-bezier(0.2, 0.9, 0.2, 1);
  --d-1: 120ms; --d-2: 220ms; --d-3: 380ms; --d-4: 650ms; --d-5: 1100ms;

  --nav-h: 68px;
}

@media (max-width: 720px) { :root { --nav-h: 60px; } }

/* Family colour resolution helper — set --fam on any subtree */
[data-family="alkali-metal"]           { --fam: var(--f-alkali); }
[data-family="alkaline-earth-metal"]   { --fam: var(--f-alkaline); }
[data-family="transition-metal"]       { --fam: var(--f-transition); }
[data-family="post-transition-metal"]  { --fam: var(--f-posttransition); }
[data-family="metalloid"]              { --fam: var(--f-metalloid); }
[data-family="nonmetal"]               { --fam: var(--f-nonmetal); }
[data-family="halogen"]                { --fam: var(--f-halogen); }
[data-family="noble-gas"]              { --fam: var(--f-noble); }
[data-family="lanthanide"]             { --fam: var(--f-lanthanide); }
[data-family="actinide"]               { --fam: var(--f-actinide); }
[data-family="unknown"]                { --fam: var(--f-unknown); }