/* THE ORRERY tokens: the single source of truth. Re-skin here first.
   Ground is the void; starlight is the flipped theme. One accent hue in two
   AA strengths plus one raw mark strength reserved for non-text geometry. */

@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- primitives ---- */
  --void: #0a0e1a;
  --void-2: #0f1424;
  --void-3: #161c31;
  --starlight: #e9edf5;
  --starlight-2: #dce3ef;
  --starlight-3: #c7d0e2;
  --dust: #8a93aa;        /* muted text on void, 6.3:1 */
  --dust-deep: #4e5670;   /* muted text on starlight, 6.2:1 */

  /* ion violet. Three strengths, two of them text-legal.
     --ion is the mark hue: orbit strokes, fills, glows. Never body text. */
  --ion: #6d5ae6;
  --ion-bright: #8b7bee;  /* AA on void, 5.7:1  */
  --ion-deep: #4636a8;    /* AA on starlight, 7.6:1 */

  /* non-text ion tints: the sun's near limb, the glyph on it, the selection wash */
  --ion-halo: #b9aef7;
  --ion-wash: #f2f0ff;
  --starlight-hot: #f5f7fb;

  /* the alarm hue: field errors only, never a decorative surface */
  --ember: #ffb3a7;       /* AA on void, 11.2:1 */
  --ember-deep: #9b2417;  /* AA on starlight, 6.7:1 */

  /* ---- semantics (void is the default ground) ---- */
  --bg: var(--void);
  --bg-2: var(--void-2);
  --bg-3: var(--void-3);
  --fg: var(--starlight);
  --muted: var(--dust);
  --line: rgba(233, 237, 245, 0.16);
  --line-strong: rgba(233, 237, 245, 0.52);
  --accent: var(--ion-bright);
  --accent-mark: var(--ion);
  --alarm: var(--ember);
  --on-accent: #0a0e1a;
  --focus: #ffffff;

  /* ---- type: Unbounded declares, Atkinson explains ---- */
  --font-display: "Unbounded", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(2.1rem, 6.4vw, 5rem);
  --t-h2: clamp(1.45rem, 3.1vw, 2.35rem);
  --t-h3: clamp(1.05rem, 1.8vw, 1.35rem);
  --t-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-mag: 0.735rem;      /* the magnitude-label size */
  --lh-tight: 1.06;
  --lh-heading: 1.16;
  --lh-body: 1.62;
  --track-mag: 0.15em;
  --track-display: -0.02em;

  /* ---- space ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-pad: clamp(4.5rem, 11vh, 8rem);
  --edge: clamp(1rem, 3.5vw, 3rem);
  --measure: 38rem;
  --max-w: 84rem;

  /* ---- shape ---- */
  --r-1: 4px;
  --r-2: 12px;
  --r-3: 22px;
  --r-round: 999px;

  /* ---- the orrery plate ---- */
  --plate: clamp(17rem, 40vw, 30rem);
  /* orbit radii are lengths, not percentages: a percentage inside translateY()
     would resolve against the orb itself and collapse every body onto the sun */
  --orbit-1: calc(var(--plate) * 0.27);
  --orbit-2: calc(var(--plate) * 0.35);
  --orbit-3: calc(var(--plate) * 0.43);
  --period-1: 150s;
  --period-2: 215s;
  --period-3: 290s;
  --orb-size: clamp(2.4rem, 6.2vw, 3.1rem);

  /* ---- motion ---- */
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 620ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);

  /* ---- layers ---- */
  --z-plate: 10;
  --z-horizon: 40;
  --z-menu: 50;
  --z-skip: 60;
}

/* starlight theme: any element with data-theme="starlight" flips the set */
[data-theme="starlight"] {
  --bg: var(--starlight);
  --bg-2: var(--starlight-2);
  --bg-3: var(--starlight-3);
  --fg: var(--void);
  --muted: var(--dust-deep);
  --line: rgba(10, 14, 26, 0.18);
  --line-strong: rgba(10, 14, 26, 0.55);
  --accent: var(--ion-deep);
  --accent-mark: var(--ion-deep);
  --alarm: var(--ember-deep);
  --on-accent: #e9edf5;
  --focus: #2b1e6b;
}