/* =========================================================
   EASTBRIDGE GAMES — DESIGN TOKENS
   Dawn-forward, sci-fi tactical. Dark-first.
   ========================================================= */

:root {
  /* ---- Core palette: Night (deep, cool-warm neutrals) ---- */
  --night-900: #0b0d12;   /* near-black, primary bg */
  --night-800: #12151c;   /* panel bg */
  --night-700: #1a1e27;   /* elevated panel */
  --night-600: #252a36;   /* hairline on dark */
  --night-500: #3a414f;   /* muted borders */
  --night-400: #5b6373;   /* secondary text on dark */
  --night-300: #8b93a3;   /* tertiary text */
  --night-200: #c4c9d2;   /* body on dark (softened) */
  --night-100: #e8ebef;   /* high-contrast on dark */
  --night-050: #f4f5f7;   /* paper / light mode bg */

  /* ---- Sunrise palette: the brand accent system ---- */
  --ember-900: #4a1608;   /* deep coal-ember */
  --ember-700: #8a2a0e;   /* rust */
  --ember-500: #e5501c;   /* logo orange — PRIMARY */
  --ember-400: #f57a34;   /* softer orange */
  --ember-300: #ffa05a;   /* warm sunrise */
  --ember-200: #ffc98a;   /* pale dawn */
  --ember-100: #ffe3b8;   /* first light */

  /* ---- Horizon: supporting cool for sci-fi tech moments ---- */
  --horizon-500: #4a8cff; /* reserved — tactical ui */
  --horizon-300: #9fc0ff;

  /* ---- Semantic ---- */
  --bg:            var(--night-900);
  --bg-panel:      var(--night-800);
  --bg-elevated:   var(--night-700);
  --fg:            var(--night-100);
  --fg-muted:      var(--night-300);
  --fg-subtle:     var(--night-400);
  --border:        var(--night-600);
  --border-strong: var(--night-500);
  --accent:        var(--ember-500);
  --accent-soft:   var(--ember-300);

  /* ---- Type ---- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (1.25 ratio, display-leaning) */
  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.875rem;  /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-lg:   1.125rem;  /* 18 */
  --t-xl:   1.375rem;  /* 22 */
  --t-2xl:  1.75rem;   /* 28 */
  --t-3xl:  2.25rem;   /* 36 */
  --t-4xl:  3rem;      /* 48 */
  --t-5xl:  4rem;      /* 64 */
  --t-6xl:  5.5rem;    /* 88 */
  --t-7xl:  7.5rem;    /* 120 */

  /* ---- Spacing (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;
  --s-10: 128px;
  --s-11: 192px;

  /* ---- Radii ---- */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   16px;
  --r-full: 999px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bridge: cubic-bezier(0.16, 1, 0.3, 1); /* signature — long gentle trail */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 400ms;
  --dur-4: 700ms;
  --dur-5: 1200ms;

  /* ---- Grid ---- */
  --grid-max: 1280px;
  --grid-gutter: 24px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-ember: 0 0 0 1px rgba(229,80,28,0.25), 0 8px 40px rgba(229,80,28,0.25);
}

/* Light mode token overrides (for the "mostly mono" variant) */
[data-theme="paper"] {
  --bg:            var(--night-050);
  --bg-panel:      #ffffff;
  --bg-elevated:   #ffffff;
  --fg:            var(--night-900);
  --fg-muted:      var(--night-400);
  --fg-subtle:     var(--night-300);
  --border:        #e3e5e9;
  --border-strong: #cfd3da;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
}
::selection { background: var(--ember-500); color: #fff; }

/* utility */
.container { max-width: var(--grid-max); margin: 0 auto; padding: 0 var(--s-5); }
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.caps { text-transform: uppercase; letter-spacing: 0.14em; }