/* ============================================================
   tokens.css — Design tokens (CSS custom properties)
   Single source of truth for all colors, spacing, typography
============================================================ */

:root {
  /* Brand palette */
  --color-yellow:  #FFDE59;
  --color-orange:  #FFB347;
  --color-pink:    #FF91C1;
  --color-purple:  #C49EF5;
  --color-gold:    #FFE066;

  /* Semantic — Light theme */
  --bg:            #FDF5E0;
  --card:          rgba(255, 255, 255, 0.76);
  --border:        rgba(180, 130, 60, 0.17);
  --txt:           #3D2B00;
  --txt-2:         rgba(61, 43, 0, 0.50);
  --txt-3:         rgba(61, 43, 0, 0.32);
  --shadow:        0 8px 28px rgba(180, 120, 60, 0.13);
  --shadow-pink:   0 8px 28px rgba(255, 145, 193, 0.32);
  --shadow-yellow: 0 4px 12px rgba(255, 179, 71, 0.35);
  --icon-color:    #3D2B00;

  /* Ring specific */
  --ring-bg:       #FDF5E0;

  /* Sizing */
  --nav-h:         58px;
  --radius-sm:     12px;
  --radius-md:     18px;
  --radius-lg:     22px;
  --radius-xl:     28px;
  --radius-full:   999px;

  /* Typography */
  --font:          'Nunito', sans-serif;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --bg:            #18151F;
  --card:          rgba(42, 36, 58, 0.95);
  --border:        rgba(196, 158, 245, 0.22);
  --txt:           #EDE8F8;
  --txt-2:         rgba(237, 232, 248, 0.50);
  --txt-3:         rgba(237, 232, 248, 0.28);
  --shadow:        0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-pink:   0 8px 28px rgba(196, 158, 245, 0.20);
  --shadow-yellow: 0 4px 12px rgba(255, 179, 71, 0.25);
  --icon-color:    #EDE8F8;
  --ring-bg:       #18151F;
}