/* ============================================================
   BLU CAT DEV — Design Tokens & CSS Variables
   Exact hex values from Photoshop source file (26/04/2026)
   ============================================================ */

:root {
  /* ── Backgrounds ── */
  --bg-navy:        #0a1227;   /* Brand Navy — primary & deepest bg */
  --bg-navy-light:  #0f1b35;   /* Slightly elevated surfaces */
  --bg-card:        #111d3a;   /* Card backgrounds */
  --bg-card-hover:  #162145;   /* Card hover state */

  /* ── Brand Accents ── */
  --cyan:           #43d1e3;   /* Brand Cyan — games/tech/CTA */
  --cyan-hover:     #65dcec;   /* Cyan hover (lighter) */
  --cyan-dim:       rgba(67, 209, 227, 0.12); /* Cyan tint for tags/badges */
  --cyan-border:    rgba(67, 209, 227, 0.25); /* Cyan border for tags */

  --ember:          #f0855a;   /* Ember Orange — writing/creative */
  --ember-hover:    #f49872;   /* Ember hover */
  --ember-dim:      rgba(240, 133, 90, 0.12);
  --ember-border:   rgba(240, 133, 90, 0.25);

  /* ── Text ── */
  --text-primary:   #fefcfb;   /* Warm White — headings, titles */
  --text-muted:     #b0b8c4;   /* Cool Silver — body, metadata */
  --text-dim:       #4a6080;   /* Dimmed text, labels */
  --text-ghost:     #2a3a5a;   /* Very dim, decorative */

  /* ── Borders & Dividers ── */
  --border:         #1a2d50;
  --border-light:   #243660;
  --border-ghost:   #0f1e3a;

  /* ── States ── */
  --error:          #e05a4e;   /* Alert Red — errors/warnings ONLY */
  --error-dim:      rgba(224, 90, 78, 0.12);
  --error-border:   rgba(224, 90, 78, 0.25);
  --success:        #50c878;

  /* ── Reserved Purples (future game titles) ── */
  --purple-light:   #b37eff;   /* Jacaranda */
  --purple-mid:     #600d6d;   /* Purple */
  --purple-dark:    #2e0f3d;   /* Dark Purple */

  /* ── Typography ── */
  --font-serif:     'Playfair Display', Georgia, serif;
  --font-mono:      'DM Mono', 'Courier New', monospace;
  --font-sans:      'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Spacing ── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   2rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;

  /* ── Radii ── */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  10px;

  /* ── Transitions ── */
  --transition: 0.2s ease;

  /* ── Max widths ── */
  --max-w:      1100px;
  --nav-h:      60px;
}