/* ========================================
   ReadyUp v2 — Design Tokens
   Cyan/blue brand · light + dark themes
   ======================================== */

:root {
  /* Brand */
  --brand-500: #29d6ff;          /* primary cyan from logo */
  --brand-600: #0db8e6;
  --brand-700: #0089b3;
  --brand-300: #7fe5ff;
  --brand-100: #d4f5ff;
  --brand-glow: rgba(41, 214, 255, 0.4);

  /* Accent (subtle, used sparingly) */
  --accent-500: #5865f2;         /* discord blurple */
  --accent-acid: #c4ff3d;        /* surprise highlight (gamer pop) */
  --accent-magenta: #ff3df0;

  /* Status */
  --good: #38e89c;
  --warn: #f5a524;
  --bad: #ff5470;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Spacing scale (4px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;

  /* Type — set per page-theme variant; default sharp/technical */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Type scale */
  --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 17px;
  --t-lg: 20px; --t-xl: 24px; --t-2xl: 32px; --t-3xl: 44px;
  --t-4xl: 60px; --t-5xl: 84px; --t-6xl: 112px;

  /* Easing */
  --ease-out: cubic-bezier(.2, .8, .3, 1);
  --ease-spring: cubic-bezier(.2, .9, .25, 1.25);
}

/* ========== DARK theme (default) ========== */
[data-theme="dark"], :root {
  --bg-0: #07080d;
  --bg-1: #0c0e16;
  --bg-2: #131623;
  --bg-3: #1a1e2f;
  --bg-card: rgba(20, 24, 48, 0.55);

  --ink-0: #f6f8ff;
  --ink-1: #c5cae0;
  --ink-2: #8a90a8;
  --ink-3: #5a6080;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-brand: rgba(41, 214, 255, 0.3);

  --grid-line: rgba(41, 214, 255, 0.18);

  /* Glass / overlays */
  --glass: rgba(15, 18, 32, 0.7);
  --glass-strong: rgba(20, 24, 48, 0.85);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 40px rgba(41, 214, 255, 0.25);
}

/* ========== LIGHT theme ========== */
[data-theme="light"] {
  --bg-0: #f4f6fb;
  --bg-1: #ffffff;
  --bg-2: #eef1f8;
  --bg-3: #e2e7f2;
  --bg-card: rgba(255, 255, 255, 0.85);

  --ink-0: #0a0e1a;
  --ink-1: #2c3247;
  --ink-2: #5a6080;
  --ink-3: #8a90a8;

  --line: rgba(10, 14, 26, 0.08);
  --line-strong: rgba(10, 14, 26, 0.16);
  --line-brand: rgba(13, 184, 230, 0.3);

  --grid-line: rgba(13, 184, 230, 0.16);

  --glass: rgba(255, 255, 255, 0.75);
  --glass-strong: rgba(255, 255, 255, 0.95);

  /* Brand goes slightly deeper in light mode for contrast */
  --brand-500: #0db8e6;
  --brand-glow: rgba(13, 184, 230, 0.3);

  --shadow-sm: 0 2px 8px rgba(10, 14, 26, 0.06);
  --shadow-md: 0 12px 32px rgba(10, 14, 26, 0.08);
  --shadow-glow: 0 0 40px rgba(13, 184, 230, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.3s ease, color 0.3s ease;
}
a { color: inherit; }
button { font-family: inherit; }
::selection { background: var(--brand-500); color: var(--bg-0); }