/* ============================================================
   Ludumina Labs — design tokens.  SHARED / READ-ONLY.
   Section stylesheets consume these. They never redefine them.
   ============================================================ */

:root {
  /* ---- surface ---- */
  --bg:        #05060F;
  --bg-2:      #0A0D1E;
  --bg-3:      #101529;
  --surface:   rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);

  /* ---- hairlines & edges ---- */
  --line:      rgba(255, 255, 255, 0.11);
  --line-2:    rgba(255, 255, 255, 0.18);
  --line-hot:  rgba(63, 224, 208, 0.55);

  /* ---- luminous accents (sampled from real gameplay footage) ---- */
  --cy: #3FE0D0;   /* Lumi cyan   — primary accent */
  --mg: #FF3D8B;   /* magenta     — biology / energy */
  --am: #FFB23F;   /* amber       — chemistry / warning */
  --vi: #7B5CFF;   /* violet      — physics / quantum */
  --cy-dim: rgba(63, 224, 208, 0.14);
  --mg-dim: rgba(255, 61, 139, 0.14);

  /* ---- text ----
     Ratios are against --bg. Two critics measured the old --ink-40 (0.38) at
     3.47:1, which fails AA for anything under 18.66px — and it was carrying the
     small technical labels, i.e. exactly the small text. Raised to the lowest
     alpha that passes (5.3:1), with --ink-60 lifted to keep the steps apart.
     For genuinely decorative, non-text dimming use --ink-mute. */
  --ink:      #FFFFFF;
  --ink-80:   rgba(255, 255, 255, 0.82);  /* 10.4:1 */
  --ink-60:   rgba(255, 255, 255, 0.66);  /*  7.9:1 */
  --ink-40:   rgba(255, 255, 255, 0.50);  /*  5.3:1 — AA floor for small text */
  --ink-mute: rgba(255, 255, 255, 0.34);  /* decoration only, never text */

  /* ---- type families ---- */
  --f-display: "Michroma", "Eurostile Extended", "Saira", system-ui, sans-serif;
  --f-ui:      "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:    "Chakra Petch", ui-monospace, monospace;

  /* ---- fluid type scale ---- */
  --t-hero:  clamp(2.6rem, 6.2vw, 6.2rem);
  --t-h2:    clamp(1.7rem, 3.1vw, 3.05rem);
  --t-h3:    clamp(1.15rem, 1.55vw, 1.5rem);
  --t-body:  clamp(0.95rem, 1.05vw, 1.075rem);
  --t-micro: 0.685rem;

  /* ---- rhythm ---- */
  --gut:     clamp(1.25rem, 4vw, 4.5rem);   /* page side gutter */
  --sec-pad: clamp(5rem, 11vh, 9.5rem);     /* vertical section padding */
  --maxw:    1440px;

  /* ---- motion ---- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0, 0.35, 1);
  --dur:      0.6s;

  /* ---- chrome geometry: the angular clipped corner, one source of truth ---- */
  --notch: 14px;
  --clip-tr: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  --clip-bl: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  --clip-both: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );

  --z-nav: 100;
  --z-modal: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; }
}