/* ==========================================================================
   Rem-project — Design Tokens
   Palette: deep ink black + electric blue + cyan glow
   Type: Space Grotesk (display) / IBM Plex Sans (body) / JetBrains Mono (utility)
   ========================================================================== */

:root {
  /* ---- Color: ink ---- */
  --ink-0: #04060c;       /* deepest background */
  --ink-1: #070b15;       /* base page background */
  --ink-2: #0b1120;       /* elevated surface / cards */
  --ink-3: #11182b;       /* hover surface */
  --line: rgba(112, 148, 255, 0.14);
  --line-strong: rgba(112, 148, 255, 0.28);

  /* ---- Color: blue system ---- */
  --blue: #3d7dff;        /* primary electric blue */
  --blue-bright: #6a9dff;
  --cyan: #29d3f0;        /* bright cyan-blue glow accent */
  --deep: #0d2a73;        /* deep blue, gradients / shadow tint */
  --violet-hint: #6a5cff; /* rare third note, gradient endpoint only */

  /* ---- Color: text ---- */
  --text-0: #eef3ff;      /* headings / primary */
  --text-1: #c3cce6;      /* body */
  --text-2: #8291b8;      /* secondary / muted */
  --text-3: #5a6584;      /* faint / disabled */

  /* ---- Gradients ---- */
  --grad-primary: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%);
  --grad-deep: linear-gradient(180deg, rgba(61, 125, 255, 0.16) 0%, rgba(4, 6, 12, 0) 100%);
  --grad-text: linear-gradient(100deg, #eef3ff 10%, #9db8ff 40%, #29d3f0 65%, #eef3ff 90%);

  /* ---- Type families ---- */
  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  /* ---- Type scale ---- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.5rem;
  --fs-4xl: 4.75rem;

  /* ---- Spacing ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* ---- Layout ---- */
  --container: 1180px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ---- Shadow / glow ---- */
  --glow-blue: 0 0 40px rgba(61, 125, 255, 0.35);
  --glow-cyan: 0 0 40px rgba(41, 211, 240, 0.25);
  --shadow-card: 0 20px 60px -20px rgba(0, 0, 0, 0.7);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.5s;
  --dur-slow: 0.9s;

  /* ---- Custom logo (set by JS after upload) ---- */
  --logo-image: none;
}

::selection {
  background: var(--blue);
  color: var(--ink-0);
}