/* ── Design Tokens ─────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg-base:        #282828;   /* default page / section background */
  --bg-section-alt: #222222;   /* subtle section separation if needed */

  /* Accent — Blue: structure & identity */
  --blue:           #6ec6ff;   /* navbar, brand, primary buttons, active states */

  /* Accent — Pink: interaction & feedback */
  --pink:           #e1799f;   /* hover states, focus rings, link highlights */

  /* Text */
  --text-primary:   #f5f5f5;   /* headings, main content */
  --text-secondary: #b8b8b8;   /* descriptions, captions, meta */

  /* Utility */
  --white:          #ffffff;
  --radius-pill:    999px;
  --radius-card:    12px;
  --transition:     0.2s ease;
}


:root {
  /* Backgrounds (layered, not flat) */
  --bg-base: #181818;         /* main page */
  --bg-section: #202020;      /* sections */
  --bg-card: #242424;         /* cards / pills */

  /* Accent — Blue (primary brand) */
  --blue: #6ec6ff;

  /* Accent — Pink (interaction) */
  --pink: #e1799f;

  /* Text */
  --text-primary: #f5f5f5;
  --text-secondary: #b8b8b8;

  /* Effects */
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* Radius */
  --radius-pill: 999px;
  --radius-card: 14px;

  /* Motion */
  --transition: 0.25s ease;
}