/* ============================================================
   DESIGN TOKENS
   Single source of truth for all colours, spacing, and
   visual constants. Edit here — everything inherits.
   ============================================================ */

:root {
  /* Brand */
  --primary:       #15c9c3;
  --primary-soft:  rgba(21, 201, 195, 0.12);

  /* Neutrals */
  --dark:          #0b1d3a;
  --bg:            #ffffff;
  --bg-soft:       #f7f9fc;
  --text-main:     #1a1a1a;
  --text-muted:    #6f7a87;
  --card-bg:       #ffffff;
  --border-soft:   #e1e5f0;

  /* Header */
  --header-bg: rgba(255, 255, 255, 0.86);

  /* Gradient */
  --page-gradient: radial-gradient(circle at top left, #f2fffe 0, #ffffff 40%);

  /* Shape */
  --radius-lg: 20px;
  --radius-md: 12px;

  /* Shadow */
  --shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.1);

  /* Layout */
  --max-width: 1120px;
}

/* ── Dark theme overrides ─────────────────────────── */

[data-theme="dark"] {
  --dark:          #e2e8f0;
  --bg:            #0b1120;
  --bg-soft:       #111827;
  --text-main:     #f1f5f9;
  --text-muted:    #94a3b8;
  --card-bg:       #1e293b;
  --border-soft:   #334155;
  --header-bg:     rgba(11, 17, 32, 0.9);
  --page-gradient: radial-gradient(circle at top left, #0f2a2a 0, #0b1120 40%);
  --shadow-soft:   0 14px 40px rgba(0, 0, 0, 0.4);
}