/* ==========================================================
   MIDNIGHT BLUE THEME · design tokens
   The same file is used by both sites (studio/ and novel/).
   Change a colour here and every page that uses it updates.
   See the Nanovie style guide for what each one is for.
   ========================================================== */

:root {
  /* Neutrals: dark, tinted towards the blue of the art */
  --bg: #080B14;        /* Night: page background */
  --bg2: #0C1220;       /* Deep: alternate section bands */
  --card: #121A2B;      /* Surface: cards, forms */
  --raised: #1A2438;    /* Raised: hover, chips, arrow buttons */
  --line: #26324A;      /* Line: dividers and card edges (decorative only) */
  --field: #5A6884;     /* Field: input and tick-box borders (3.1:1) */

  /* Text */
  --text: #EEF1F6;      /* headings, light buttons */
  --body: #BCC4D4;      /* paragraphs */
  --muted: #8B95AB;     /* dates, hints, small labels */

  /* Accents */
  --blue: #6E9BFF;                      /* Navie Blue: the world */
  --blue-glow: rgba(110, 155, 255, .35);
  --spark: #FF5A5F;                     /* Spark Red: one spark per screen */
  --spark-glow: rgba(255, 90, 95, .45);
  --on-spark: #140707;                  /* text on Spark Red buttons */
  --on-light: #0B0F17;                  /* text on white buttons */

  /* Fonts */
  --font-head: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Grid (phone first: 4 columns) */
  --max: 1032px;        /* container: 984 px content + 2 × 24 px padding */
  --cols: 4;
  --gutter: 16px;
  --margin: 16px;

  /* Spacing scale (8 px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Corners */
  --r-card: 16px;
  --r-input: 10px;
  --r-pill: 999px;
}

/* Tablet: 8 columns */
@media (min-width: 600px) {
  :root { --cols: 8; --gutter: 24px; --margin: 32px; }
}

/* Desktop: 12 columns of 60 px */
@media (min-width: 1024px) {
  :root { --cols: 12; --gutter: 24px; --margin: 24px; }
}