/* Design tokens, reset and base type.
   Every colour in the 3D scene reads from the same THEMES table in
   src/data/themes.js — these are the CSS half of that one palette. */
  :root {
    /* Type: a deliberately short scale. Tracking tightens as size grows and
       goes slightly positive in the mid range — SF Text and SF Display carry
       different defaults, and matching that is what reads as Apple. */
    --fs-display: clamp(40px, 7.2vw, 76px);
    --fs-title:   clamp(27px, 3.5vw, 40px);
    --fs-lead:    clamp(19px, 2.1vw, 23px);
    --fs-body:    17px;
    --fs-sub:     15px;
    --fs-cap:     12px;

    --ls-display: -0.015em;
    --ls-title:   -0.009em;
    --ls-lead:     0.004em;
    --ls-body:    -0.022em;
    --ls-cap:     -0.006em;

    --lh-display: 1.05;
    --lh-title:   1.08;
    --lh-lead:    1.24;
    --lh-body:    1.47;

    --bg:        #ffffff;
    --surface:   #f5f5f7;
    --ink:       #1d1d1f;
    --ink-soft:  #6e6e73;
    --ink-faint: #86868b;
    --accent:    #0071e3;
    --hair:      #d2d2d7;
    --card:      rgba(255,255,255,.94);
    --card-solid: #ffffff;
    --bar:       rgba(255,255,255,.72);
    --shadow:    0 1px 1px rgba(0,0,0,.04), 0 10px 34px rgba(0,0,0,.10);
  }
  :root[data-theme="dark"] {
    --bg:        #000000;
    --surface:   #1d1d1f;
    --ink:       #f5f5f7;
    --ink-soft:  #a1a1a6;
    --ink-faint: #86868b;
    --accent:    #2997ff;
    --hair:      #424245;
    --card:      rgba(29,29,31,.92);
    --card-solid: #1d1d1f;
    --bar:       rgba(0,0,0,.62);
    --shadow:    0 1px 1px rgba(0,0,0,.5), 0 12px 40px rgba(0,0,0,.55);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    overflow-x: hidden;
    transition: background .6s cubic-bezier(.32,.9,.24,1), color .6s cubic-bezier(.32,.9,.24,1);
  }

  .mono {
    font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
  }

  #gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }

/* Present to assistive tech and to the document outline, absent on screen.
   Used where a section needs a name but the design does not show one. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}