/* ═══════════════════════════════════════════
   CARRÉ Design Tokens
   Single source of truth for all visual values.
   No other file may define colors or spacing.
   ═══════════════════════════════════════════ */

:root {
  /* ── BACKGROUNDS ── */
  --color-bg:              #EFECE4;
  --color-surface:         #FAFAF7;
  --color-surface-2:       #F0EDE5;
  --color-surface-3:       #E6E2D8;

  /* ── TEXT ── */
  --color-text-1:          #1E2318;
  --color-text-2:          #4A5043;
  --color-text-3:          #7A8270;

  /* ── ACCENT (Primary Green) ── */
  --color-accent:          #4E7228;
  --color-accent-dark:     #3C5A1E;
  --color-accent-darker:   #2A4010;
  --color-accent-dim:      rgba(78, 114, 40, 0.12);

  /* ── SKY BLUE (Info / Data) ── */
  --color-sky:             #B1E2FB;
  --color-sky-text:        #0F5A80;
  --color-sky-dim:         rgba(177, 226, 251, 0.30);

  /* ── PURPLE (Admin / Foul / Locked) ── */
  --color-purple:          #A02B93;
  --color-purple-dark:     #7A1A6E;
  --color-purple-dim:      rgba(160, 43, 147, 0.12);

  /* ── RED (No / Absent / Delete) ── */
  --color-red:             #C43535;
  --color-red-dark:        #8A1E1E;
  --color-red-dim:         rgba(196, 53, 53, 0.10);

  /* ── SEMANTIC ── */
  --color-success:         #2E7D26;
  --color-success-dim:     rgba(46, 125, 38, 0.12);
  --color-warning:         #8A5A10;
  --color-warning-dim:     rgba(138, 90, 16, 0.10);

  /* ── BORDERS ── */
  --color-border:          #C8C4B8;
  --color-border-2:        #A8A49A;

  /* ── BUTTON-SPECIFIC (Light Mode) ── */
  --btn-sec-bg:            #E8F0DE;
  --btn-sec-brd:           #4E7228;
  --btn-sec-txt:           #3C5A1E;
  --btn-ghost-bg:          #E8E4DC;
  --btn-ghost-brd:         #6A6A5A;
  --btn-ghost-txt:         #2A2A1E;
  --btn-pur-bg:            #F4E0F2;
  --btn-pur-brd:           #A02B93;
  --btn-pur-txt:           #7A1A6E;
  --btn-red-bg:            #F8E8E8;
  --btn-red-brd:           #C43535;
  --btn-red-txt:           #9A2020;

  /* ── FONTS ── */
  --font-display:          'Bebas Neue', 'Arial Black', sans-serif;
  --font-body:             'DM Sans', system-ui, sans-serif;

  /* ── RADIUS ── */
  --radius-sm:   6px;
  --radius-md:   9px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ── ANIMATION TOKENS ── */
  --dur-instant:   80ms;
  --dur-fast:      150ms;
  --dur-normal:    250ms;
  --dur-slow:      380ms;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.32, 0.72, 0.0, 1.0);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);

  /* ── TEAM COLORS ── */
  --team-1:  #C43535;
  --team-2:  #D4741C;
  --team-3:  #C4A012;
  --team-4:  #4E7228;
  --team-5:  #2E8C6A;
  --team-6:  #4A9EC4;
  --team-7:  #1E4FA0;
  --team-8:  #A02B93;
  --team-9:  #8B5A2B;
  --team-10: #4A4A5A;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --color-bg:              #111213;
  --color-surface:         #1A1918;
  --color-surface-2:       #222120;
  --color-surface-3:       #2C2A28;

  --color-text-1:          #F0E8D8;
  --color-text-2:          #A0968A;
  --color-text-3:          #6A6260;

  --color-accent:          #8BBF52;
  --color-accent-dark:     #6EA33A;
  --color-accent-darker:   #5A8C2A;
  --color-accent-dim:      rgba(139, 191, 82, 0.13);

  --color-sky:             #B1E2FB;
  --color-sky-text:        #5AACCC;
  --color-sky-dim:         rgba(177, 226, 251, 0.10);

  --color-purple:          #D44EC8;
  --color-purple-dark:     #A030A0;
  --color-purple-dim:      rgba(212, 78, 200, 0.14);

  --color-red:             #D45A5A;
  --color-red-dark:        #A03030;
  --color-red-dim:         rgba(212, 90, 90, 0.12);

  --color-success:         #5AB04A;
  --color-success-dim:     rgba(90, 176, 74, 0.13);

  --color-warning:         #D4963C;
  --color-warning-dim:     rgba(212, 150, 60, 0.13);

  --color-border:          #2A2826;
  --color-border-2:        #3A3632;

  /* ── BUTTON-SPECIFIC (Dark Mode) ── */
  --btn-sec-bg:            rgba(139, 191, 82, 0.15);
  --btn-sec-brd:           #8BBF52;
  --btn-sec-txt:           #8BBF52;
  --btn-ghost-bg:          rgba(240, 232, 216, 0.06);
  --btn-ghost-brd:         #6A6260;
  --btn-ghost-txt:         #F0E8D8;
  --btn-pur-bg:            rgba(212, 78, 200, 0.12);
  --btn-pur-brd:           #D44EC8;
  --btn-pur-txt:           #D44EC8;
  --btn-red-bg:            rgba(212, 90, 90, 0.12);
  --btn-red-brd:           #D45A5A;
  --btn-red-txt:           #D45A5A;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}