/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS — DunkinArt Brand
   Midnight Blue + Turquoise Green — per brand guideline
════════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  /* ── Base backgrounds (dark navy, futuristic depth) ── */
  --black:       #040C18;
  --bg:          #060E1C;
  --bg-2:        #0A1628;
  --surface:     #112036;
  --surface-2:   #1A2D44;

  /* ── Borders (teal-tinted) ── */
  --border:      rgba(0,187,170,0.12);
  --border-2:    rgba(0,187,170,0.06);
  --border-h:    rgba(0,187,170,0.45);

  /* ── Teal — primary accent (brand #00BBAA) ── */
  --teal:        #00BBAA;
  --teal-dim:    rgba(0,187,170,0.10);
  --teal-glow:   rgba(0,187,170,0.24);

  /* ── Navy — secondary brand color ── */
  --navy:        #1F3549;
  --navy-light:  #2A4560;

  /* ── Backward-compat aliases (old CSS uses --orange / --amber) ── */
  --orange:      #00BBAA;
  --orange-dim:  rgba(0,187,170,0.10);
  --orange-glow: rgba(0,187,170,0.24);
  --amber:       #00BBAA;
  --amber-dim:   rgba(0,187,170,0.10);
  --amber-glow:  rgba(0,187,170,0.24);
  --cyan:        #00BBAA;
  --violet:      #1F3549;

  /* ── Typography colors ── */
  --white:       #EDF4F4;
  --gray-1:      #7FA8B8;
  --gray-2:      #3D6275;
  --gray-3:      #1A2D3E;

  /* ── Fonts — brand font is PolySans Median, using Outfit as closest free match ── */
  --ff-display:  'Outfit', sans-serif;
  --ff-body:     'Outfit', sans-serif;
  --ff-mono:     'JetBrains Mono', monospace;

  /* ── Misc ── */
  --r:           6px;
  --blur:        blur(20px);
  --ease:        cubic-bezier(0.22,1,0.36,1);
}

[data-theme="light"] {
  --black:       #F0F7F7;
  --bg:          #F0F7F7;
  --bg-2:        #E4EEF0;
  --surface:     rgba(31,53,73,0.06);
  --surface-2:   rgba(31,53,73,0.10);
  --border:      rgba(0,0,0,0.10);
  --border-2:    rgba(0,0,0,0.06);
  --border-h:    rgba(0,187,170,0.50);
  --white:       #0A1628;
  --gray-1:      #2A4560;
  --gray-2:      #6A8899;
  --gray-3:      #C8D8DD;
  --teal:        #009E8F;
  --teal-dim:    rgba(0,158,143,0.10);
  --teal-glow:   rgba(0,158,143,0.20);
  --orange:      #009E8F;
  --orange-dim:  rgba(0,158,143,0.10);
  --orange-glow: rgba(0,158,143,0.20);
  --amber:       #009E8F;
  --amber-dim:   rgba(0,158,143,0.10);
  --amber-glow:  rgba(0,158,143,0.20);
  --cyan:        #009E8F;
  --violet:      #1F3549;
  --navy:        #1F3549;
  --ff-display:  'Outfit', sans-serif;
  --ff-body:     'Outfit', sans-serif;
  --ff-mono:     'JetBrains Mono', monospace;
  --r:           6px;
  --blur:        blur(20px);
  --ease:        cubic-bezier(0.22,1,0.36,1);
}