/* ============================================================
   Spatial portfolio · tokens
   visionOS inspired: glass windows floating in a layered world.
   Windows are always "dark glass with white text" (like visionOS),
   the environment changes with the theme (day / night).
   ============================================================ */

:root {
  /* Type */
  --vx-font: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --vx-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* Text on glass (vibrancy levels) */
  --vx-label: 255 255 255;
  --vx-label-1: rgb(255 255 255 / 0.96);
  /* day: secondary text sits over a brighter backdrop (midday sky, horizon haze), so it carries more
     white to keep 13-14px label-2/3 at 4.5:1 or better; night (html.dark) uses the lighter levels */
  --vx-label-2: rgb(255 255 255 / 0.86);
  --vx-label-3: rgb(255 255 255 / 0.78);
  --vx-hairline: rgb(255 255 255 / 0.12);

  /* Glass material */
  --vx-glass: 36 36 42;
  --vx-glass-a: 0.68;         /* with --vx-bright keeps label-1/2/3 ≥ 4.5:1 on the brightest (midday) environment */
  --vx-glass-strong-a: 0.74;
  --vx-blur: 40px;
  --vx-sat: 170%;
  --vx-bright: 0.64;          /* backdrop dimming: keeps text AA even over a bright midday sky */
  --vx-sheen-a: 0.1;          /* how much environment light tints the top of the glass */
  --vx-rim-hi: 0.55;          /* specular rim toward the pointer */
  --vx-platter: rgb(255 255 255 / 0.07);   /* inset cards inside a window */
  --vx-platter-hi: rgb(255 255 255 / 0.12);
  --vx-fill: rgb(255 255 255 / 0.14);      /* buttons */
  --vx-fill-hi: rgb(255 255 255 / 0.22);
  --vx-edge-top: rgb(255 255 255 / 0.38);  /* luminous rim */
  --vx-edge: rgb(255 255 255 / 0.14);
  --vx-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.55), 0 12px 32px -12px rgb(0 0 0 / 0.4);
  --vx-shadow-sm: 0 14px 34px -14px rgb(0 0 0 / 0.5);

  /* Shape */
  --vx-r-window: 46px;
  --vx-r-card: 26px;
  --vx-r-inner: 18px;
  --vx-r-pill: 999px;
  --vx-tab: 44px;              /* tab bar / icon button size */

  /* Motion (damped springs sampled into linear()) */
  --vx-spring: linear(0, 0.019, 0.069, 0.14, 0.224, 0.315, 0.408, 0.498, 0.584, 0.662, 0.733, 0.796, 0.85, 0.895, 0.933, 0.963, 0.987, 1.006, 1.019, 1.028, 1.034, 1.038, 1.038, 1.038, 1.036, 1.033, 1.03, 1.026, 1.023, 1.019, 1.016, 1.013, 1.01, 1.008, 1.006, 1.004, 1.003, 1.001, 1, 1, 0.999, 0.999, 0.999, 0.999, 1);
  --vx-spring-smooth: linear(0, 0.013, 0.049, 0.099, 0.16, 0.226, 0.296, 0.365, 0.433, 0.498, 0.56, 0.616, 0.668, 0.716, 0.758, 0.796, 0.829, 0.858, 0.883, 0.905, 0.924, 0.94, 0.953, 0.964, 0.973, 0.981, 0.987, 0.992, 0.996, 0.998, 1.001, 1.002, 1.004, 1.004, 1.005, 1.005, 1.005, 1.005, 1.005, 1.004, 1.004, 1.004, 1.004, 1.003, 1);
  --vx-spring-bouncy: linear(0, 0.033, 0.117, 0.235, 0.37, 0.51, 0.644, 0.766, 0.872, 0.958, 1.025, 1.073, 1.105, 1.121, 1.126, 1.122, 1.111, 1.097, 1.079, 1.062, 1.045, 1.029, 1.016, 1.005, 0.997, 0.991, 0.987, 0.985, 0.984, 0.985, 0.986, 0.988, 0.99, 0.992, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1.002, 1.002, 1.002, 1);
  --vx-dur: 560ms;
  --vx-dur-smooth: 540ms;
  --vx-dur-bouncy: 840ms;
  --vx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Environment (day). env.js reads these for the story's time of day. */
  --vx-sky-top: 150 178 214;
  --vx-sky-bottom: 236 224 214;
  --vx-haze: 246 236 226;
  --vx-ridge: 88 104 132;
  --vx-ground: 52 60 78;

  /* Live environment (env.js updates these as the story's time of day moves) */
  --vx-env-light: 255 236 214;   /* sun or moon light, tints glass sheen */
  --vx-env-sky: 70 94 150;       /* zenith */
  --vx-env-horizon: 250 194 168; /* horizon glow */
  --vx-env-night: 0.1;           /* 0 day → 1 night */
  color-scheme: dark;
}

html.dark {
  --vx-label-2: rgb(255 255 255 / 0.74);
  --vx-label-3: rgb(255 255 255 / 0.62);
  --vx-glass-a: 0.5;
  --vx-bright: 0.94;
  --vx-sheen-a: 0.08;
  --vx-env-light: 170 180 230;
  --vx-env-sky: 9 11 30;
  --vx-env-horizon: 80 58 94;
  --vx-env-night: 0.85;
  --vx-sky-top: 8 10 22;
  --vx-sky-bottom: 28 30 58;
  --vx-haze: 60 58 96;
  --vx-ridge: 22 24 44;
  --vx-ground: 10 11 20;
}

@media (prefers-reduced-transparency: reduce) {
  :root, html.dark { --vx-glass-a: 0.94; --vx-glass-strong-a: 0.96; --vx-sheen-a: 0.04; }
}