/* Tokens, reset and global rules. Values mirror DESIGN.md. Owned by the integrator:
   feature work adds component-scoped variables in its own file instead of editing this one. */

:root {
  color-scheme: dark;

  /* Color */
  --ink: #020713;
  --abyss: #041026;
  --night: #061a3a;
  --deep: #0b2f78;
  --blue: #0455ff;
  --blue-soft: #4f9fff;
  --cyan: #46d8ff;
  --ice: #bfe9ff;
  --paper: #f7fbff;
  --hot: #ff6c8e;
  --red: #d9092d;
  --gold: #ffd34d;
  --yellow: var(--gold); /* legacy alias */

  --text-1: var(--paper);
  --text-2: rgba(247, 251, 255, 0.78);
  --text-3: rgba(247, 251, 255, 0.56);
  --line: rgba(247, 251, 255, 0.16);
  --muted: var(--text-3); /* legacy alias */

  /* Typography */
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-menu: "Bebas Neue", "Anton", Impact, sans-serif;
  --font-hud: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-xl: clamp(1.5625rem, 1.3rem + 0.8vw, 1.95rem);
  --fs-2xl: clamp(2.44rem, 2rem + 1.4vw, 3.05rem);
  --fs-3xl: clamp(3.05rem, 2.2rem + 3vw, 4.77rem);
  --fs-4xl: clamp(3.8rem, 2.4rem + 5vw, 7.45rem);
  --fs-mega: clamp(6.9rem, 3rem + 14vw, 18.75rem);

  /* Space (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Big-screen scale (see the media queries below). 1 everywhere up to 2112x1056. */
  --k: 1;

  /* Geometry */
  --tilt-major: -8deg;
  --tilt-minor: 4deg;

  /* Layers */
  --z-bg: 0;
  --z-skyline: 1;
  --z-fx: 2;
  --z-grain: 3;
  --z-shell: 10;
  --z-hud: 30;
  --z-drag: 40;
  --z-console: 50;
  --z-overlay: 60;
  --z-shards: 70;
  --z-toast: 75;
  --z-modal: 80;
  --z-intro: 100;

  /* Motion */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 700ms;
  --ease-snap: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938, 1.077 20.4%, 1.121, 1.149 24.3%, 1.159, 1.163 27%, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991 46.9%, 0.977 50.1%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
}

/* Big screens: the desktop composition is tuned for a ~1920x960 viewport and caps out
   there. Past it, --k grows in 10% steps with whichever of width / height has less room
   (k <= min(w / 1920, h / 960)), so a 2560x1440 or 4K screen shows the same layout scaled
   up instead of a small one floating in empty space. rem and the space tokens follow --k;
   px sizes that shape the layout multiply by it where they are declared. */
@media (min-width: 2112px) and (min-height: 1056px) { :root { --k: 1.1; } }
@media (min-width: 2304px) and (min-height: 1152px) { :root { --k: 1.2; } }
@media (min-width: 2496px) and (min-height: 1248px) { :root { --k: 1.3; } }
@media (min-width: 2688px) and (min-height: 1344px) { :root { --k: 1.4; } }
@media (min-width: 2880px) and (min-height: 1440px) { :root { --k: 1.5; } }
@media (min-width: 3072px) and (min-height: 1536px) { :root { --k: 1.6; } }
@media (min-width: 3264px) and (min-height: 1632px) { :root { --k: 1.7; } }
@media (min-width: 3456px) and (min-height: 1728px) { :root { --k: 1.8; } }
@media (min-width: 3648px) and (min-height: 1824px) { :root { --k: 1.9; } }
@media (min-width: 3840px) and (min-height: 1920px) { :root { --k: 2; } }

@media (min-width: 2112px) and (min-height: 1056px) {
  html {
    font-size: calc(100% * var(--k));
  }

  :root {
    --s-1: calc(4px * var(--k));
    --s-2: calc(8px * var(--k));
    --s-3: calc(12px * var(--k));
    --s-4: calc(16px * var(--k));
    --s-5: calc(24px * var(--k));
    --s-6: calc(32px * var(--k));
    --s-7: calc(48px * var(--k));
    --s-8: calc(64px * var(--k));
    --s-9: calc(96px * var(--k));
  }
}

/* Dark Hour: the world turns green. Components inherit through the tokens above. */
html[data-darkhour] {
  --abyss: #030d08;
  --night: #06170e;
  --deep: #0f3d24;
  --blue: #13a35a;
  --blue-soft: #7fdc8f;
  --cyan: #c8ff6a;
  --gold: #e9f59a;
  --hot: #ff4060;
  --red: #a3001f;

  --dh-sky: #0b2414;
  --dh-glow: #a8ff60;
  --dh-blood: #5a0012;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--ink);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}