/* TheDailyBeteb — shared colour tokens */
/* Dark theme (default) */
:root {
  --black:    #0D0D0F;
  --ink:      #080808;
  --ink2:     #0D0D0D;
  --rule:     #1C1C1C;
  --rule2:    #2A2A2A;
  --rule3:    #333333;
  --white:    #F5F0E8;
  --muted:    #D8DCE3;
  --pale:     #C4CBD5;
  --silver:   #A8B0BC;

  --gold:        #C9A84C;
  --gold-warm:   #D97706;
  --gold-dark:   #B8860B;
  --gold-bg:     rgba(201,168,76,.12);
  --gold-dim:    rgba(201,168,76,.12);

  --blue:    #3B82F6;
  --blue-lt: #60A5FA;
  --blue-bg: rgba(59,130,246,.1);

  --green:     #22C55E;
  --green-mid: #22C55E;
  --green-lt:  #4ADE80;
  --green-bg:  rgba(34,197,94,.1);

  --red:    #EF4444;
  --red-bg: rgba(239,68,68,.1);

  --orange: #F97316;

  --nba:           #FDB927;
  --darts:         #00E5FF;
  --darts-lt:      #80F0FF;
  --darts-bg:      rgba(0,229,255,.08);
  --darts-border:  rgba(0,229,255,.2);
  --tennis:        #A855F7;
  --tennis-lt:     #C084FC;
  --tennis-bg:     rgba(168,85,247,.08);
  --tennis-border: rgba(168,85,247,.2);

  --nav-bg: rgba(0,0,0,.97);

  --display: 'Barlow Condensed', Impact, sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --sans:    'Inter', sans-serif;
  --serif:   'Lora', Georgia, serif;
  --nav-h:   61px;
}

/* Light theme overrides */
[data-theme="light"] {
  --black:  #F4F4F6;
  --ink:    #EAEAEC;
  --ink2:   #E2E2E4;
  --rule:   #D4D4D8;
  --rule2:  #C4C4C8;
  --rule3:  #B4B4B8;
  --white:  #18181B;
  --muted:  #52525B;
  --pale:   #71717A;
  --silver: #A1A1AA;

  --gold-bg:       rgba(201,168,76,.15);
  --gold-dim:      rgba(201,168,76,.15);
  --blue-bg:       rgba(59,130,246,.12);
  --green-bg:      rgba(34,197,94,.12);
  --red-bg:        rgba(239,68,68,.12);
  --darts-bg:      rgba(0,229,255,.1);
  --darts-border:  rgba(0,229,255,.25);
  --tennis-bg:     rgba(168,85,247,.1);
  --tennis-border: rgba(168,85,247,.25);

  --nav-bg: rgba(255,255,255,.97);
}

/* Hide noise texture in light mode */
[data-theme="light"] body::after { display: none !important; }

/* ── Theme toggle button ── */
.theme-toggle {
  background: none;
  border: 1px solid var(--rule2);
  color: var(--muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  transition: color .2s, border-color .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--gold); border-color: rgba(201,168,76,.4); }
.theme-toggle svg { display: block; pointer-events: none; }
.icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }