/* ================================================
   SCORE-DARTS.COM — Design Tokens (Casino Royale)
   Elegant Edition with Gentlemen's Club Typography
   ================================================ */

:root {
  /* —— COLORS: Background —— */
  --color-bg:              #FDFBF7;
  --color-bg-surface:      #F7F4EE;
  --color-bg-white:        #FFFFFF;
  --color-bg-overlay:      rgba(0, 0, 0, 0.4);

  /* —— COLORS: Border —— */
  --color-border:          #D4D0C8;
  --color-border-light:    #E8E4DC;
  --color-border-focus:    #C9A962;

  /* —— COLORS: Text —— */
  --color-text-primary:    #1C1C1C;
  --color-text-body:       #3A3A3A;
  --color-text-muted:      #7A7A7A;
  --color-text-inverse:    #FFFFFF;

  /* —— COLORS: Accent —— */
  --color-accent:          #1D6F5C;
  --color-accent-hover:    #185A4A;
  --color-accent-text:     #FFFFFF;
  --color-gold:            #C9A962;
  --color-gold-light:      rgba(201, 169, 98, 0.15);

  /* —— COLORS: Feedback —— */
  --color-success:         #2A8A6E;
  --color-success-bg:      #ECFDF5;
  --color-success-text:    #065F46;
  --color-danger:          #C03A4B;
  --color-danger-bg:       #FEF2F2;
  --color-danger-text:     #991B1B;
  --color-warn:            #D97706;
  --color-warn-bg:         #FFFBEB;
  --color-warn-text:       #92400E;

  /* —— COLORS: Dartboard (indépendant du thème) —— */
  --color-dart-red:        #C41E3A;
  --color-dart-green:      #228B22;
  --color-dart-cream:      #F5F5DC;
  --color-dart-black:      #1A1A1A;
  --color-dart-wire:       #D4AF37;
  --color-dart-miss:       #374151;

  /* —— COLORS: Game Types —— */
  --color-game-301:        #2563EB;
  --color-game-501:        #2A8A6E;
  --color-game-cricket:    #7C3AED;

  /* —— TYPOGRAPHY: Families (Gentlemen's Club) —— */
  --font-display:          'Playfair Display', Georgia, serif;
  --font-body:             'Source Sans 3', 'Trebuchet MS', sans-serif;
  --font-mono:             'DM Mono', 'Courier New', monospace;

  /* —— TYPOGRAPHY: Sizes —— */
  --text-xs:               0.75rem;   /* 12px */
  --text-sm:               0.875rem;  /* 14px */
  --text-base:             1rem;      /* 16px */
  --text-lg:               1.125rem;  /* 18px */
  --text-xl:               1.25rem;   /* 20px */
  --text-2xl:              1.5rem;    /* 24px */
  --text-3xl:              1.75rem;   /* 28px */
  --text-4xl:              2.25rem;   /* 36px */
  --text-5xl:              2.75rem;   /* 44px */

  /* —— TYPOGRAPHY: Weights —— */
  --font-regular:          400;
  --font-medium:           500;
  --font-semibold:         600;
  --font-bold:             700;

  /* —— TYPOGRAPHY: Line Heights —— */
  --leading-tight:         1.2;
  --leading-snug:          1.3;
  --leading-normal:        1.5;
  --leading-relaxed:       1.625;

  /* —— TYPOGRAPHY: Letter Spacing —— */
  --tracking-tighter:      -0.01em;
  --tracking-tight:        -0.005em;
  --tracking-normal:       0;
  --tracking-wide:         0.025em;
  --tracking-wider:        0.05em;

  /* —— SPACING (base 4px) —— */
  --space-1:               0.25rem;   /* 4px */
  --space-2:               0.5rem;    /* 8px */
  --space-3:               0.75rem;   /* 12px */
  --space-4:               1rem;      /* 16px */
  --space-5:               1.25rem;   /* 20px */
  --space-6:               1.5rem;    /* 24px */
  --space-8:               2rem;      /* 32px */
  --space-10:              2.5rem;    /* 40px */
  --space-12:              3rem;      /* 48px */
  --space-16:              4rem;      /* 64px */
  --space-20:              5rem;      /* 80px */

  /* —— BORDER RADIUS —— */
  --radius-none:           0;
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-full:           9999px;
  --radius-input:          var(--radius-md);

  /* —— SHADOWS —— */
  --shadow-brutal:         0 4px 12px rgba(44, 36, 22, 0.1);
  --shadow-brutal-sm:      0 1px 3px rgba(44, 36, 22, 0.08);
  --shadow-brutal-active:  0 2px 4px rgba(44, 36, 22, 0.06);
  --shadow-brutal-hover:   0 8px 24px rgba(44, 36, 22, 0.12);
  --shadow-soft:           0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-none:           none;

  /* —— BORDERS —— */
  --border-w:              1px;
  --border-w-thick:        1.5px;
  --border-w-heavy:        2px;

  /* —— TRANSITIONS —— */
  --transition-fast:       150ms ease-out;
  --transition-default:    200ms ease-out;

  /* —— TAP TARGETS —— */
  --tap-min:               48px;
  --tap-comfortable:       52px;
}

/* ================================================
   BASE STYLES
   ================================================ */

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text-body);
  line-height: var(--leading-normal);
}

/* ================================================
   COMPONENT STYLES
   ================================================ */

/* —— Bouton primaire —— */
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  box-shadow: var(--shadow-brutal-sm);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  min-height: var(--tap-comfortable);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-brutal);
}

.btn-primary:active {
  box-shadow: var(--shadow-brutal-active);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-gold-light), var(--shadow-brutal-sm);
}

/* —— Bouton secondaire —— */
.btn-secondary {
  background-color: transparent;
  color: var(--color-accent);
  border: var(--border-w-thick) solid var(--color-accent);
  box-shadow: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  min-height: var(--tap-min);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: rgba(29, 111, 92, 0.06);
}

.btn-secondary:active {
  background-color: rgba(29, 111, 92, 0.1);
}

/* —— Bouton danger —— */
.btn-danger {
  background-color: var(--color-danger);
  color: var(--color-bg-white);
  border: none;
  box-shadow: var(--shadow-brutal-sm);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  min-height: var(--tap-min);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              box-shadow var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-danger:hover {
  background-color: #A8323F;
  box-shadow: var(--shadow-brutal);
}

.btn-danger:active {
  box-shadow: var(--shadow-brutal-active);
}

/* —— Input —— */
.input {
  background-color: var(--color-bg-white);
  color: var(--color-text-primary);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  font-size: var(--text-base);
  min-height: var(--tap-min);
  outline: none;
  transition: border-color var(--transition-default),
              box-shadow var(--transition-default);
  width: 100%;
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-light);
}

/* —— Select (styled like input) —— */
.select {
  background-color: var(--color-bg-white);
  color: var(--color-text-primary);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  font-size: var(--text-base);
  min-height: var(--tap-min);
  outline: none;
  cursor: pointer;
  width: 100%;
}

.select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-light);
}

/* —— Card —— */
.card {
  background-color: var(--color-bg-white);
  border: var(--border-w) solid var(--color-border);
  box-shadow: var(--shadow-brutal);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.card-flat {
  background-color: var(--color-bg-white);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

/* —— Badge —— */
.badge {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  display: inline-block;
}

.badge-outline {
  background-color: transparent;
  color: var(--color-text-primary);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  display: inline-block;
}

/* —— Alert —— */
.alert {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.alert-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border-left: 3px solid var(--color-success);
}

.alert-danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-left: 3px solid var(--color-danger);
}

.alert-warn {
  background-color: var(--color-warn-bg);
  color: var(--color-warn-text);
  border-left: 3px solid var(--color-warn);
}

/* ================================================
   TYPOGRAPHY UTILITIES
   ================================================ */

.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

.font-mono {
  font-family: var(--font-mono);
}

/* —— Score display (interface de jeu) —— */
.score-value {
  font-family: var(--font-mono);
  font-weight: var(--font-medium);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .score-value {
    font-size: var(--text-5xl);
  }
}

/* —— Heading hero —— */
.heading-hero {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .heading-hero {
    font-size: var(--text-5xl);
  }
}

/* —— Heading section —— */
.heading-section {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

/* ================================================
   NAVBAR
   ================================================ */

.navbar {
  background-color: var(--color-bg);
  border-bottom: var(--border-w) solid var(--color-border);
  height: 56px;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .navbar {
    height: 64px;
    padding: 0 var(--space-8);
  }
}

.navbar-logo {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.navbar-link {
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  color: var(--color-text-body);
  text-decoration: none;
  transition: color var(--transition-default);
}

.navbar-link:hover {
  color: var(--color-accent);
}

.navbar-link.active {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}

/* ================================================
   GAME INTERFACE OVERRIDES
   (use !important to override game-common.css loaded after theme)
   ================================================ */

/* Option tags in game header - use gold for better contrast */
.option-tag {
  background: var(--color-text-primary) !important;
  color: var(--color-gold) !important;
}

/* Active player card - use gold accent */
.score-player.active,
.score-team.active {
  background: var(--color-accent) !important;
  border-color: var(--color-gold) !important;
}

/* Filled dart slots - use gold for visibility */
.dart-slot.filled {
  background-color: var(--color-accent) !important;
  border-color: var(--color-gold) !important;
  color: var(--color-text-inverse) !important;
}

/* Cricket marks - thicker circle border for visibility */
.cricket-mark .mark-circle {
  border-width: var(--border-w-heavy) !important;
}

/* Language switcher - gold text for active button */
.lang-btn.active {
  color: var(--color-gold) !important;
}

/* ================================================
   TAILWIND CLASS OVERRIDES FOR THEME CONSISTENCY
   ================================================ */

/* Gray backgrounds - adapt to warm cream palette */
.bg-gray-50 { background-color: var(--color-bg-surface) !important; }
.bg-gray-100 { background-color: var(--color-bg-surface) !important; }
.bg-gray-200 { background-color: var(--color-border) !important; }

/* Gray text - ensure readability */
.text-gray-400 { color: var(--color-text-muted) !important; }
.text-gray-500 { color: var(--color-text-muted) !important; }
.text-gray-600 { color: var(--color-text-body) !important; }
.text-gray-700 { color: var(--color-text-body) !important; }
.text-gray-800 { color: var(--color-text-primary) !important; }

/* Blue colors - use emerald accent */
.bg-blue-50 { background-color: rgba(29, 111, 92, 0.1) !important; }
.bg-blue-100 { background-color: rgba(29, 111, 92, 0.15) !important; }
.bg-blue-600 { background-color: var(--color-accent) !important; }
.text-blue-600 { color: var(--color-accent) !important; }
.text-blue-700 { color: var(--color-accent-hover) !important; }
.text-blue-800 { color: var(--color-accent-hover) !important; }
.border-blue-200 { border-color: var(--color-border) !important; }
.hover\:text-blue-800:hover { color: var(--color-accent) !important; }

/* Green colors - use jade */
.bg-green-50 { background-color: rgba(42, 138, 110, 0.1) !important; }
.bg-green-100 { background-color: rgba(42, 138, 110, 0.15) !important; }
.bg-green-600 { background-color: var(--color-success) !important; }
.text-green-600 { color: var(--color-success) !important; }
.text-green-700 { color: #1F7A5E !important; }
.text-green-800 { color: #1A6B52 !important; }
.hover\:bg-green-700:hover { background-color: var(--color-accent-hover) !important; }

/* Purple colors - use a muted purple */
.bg-purple-50 { background-color: rgba(124, 58, 237, 0.1) !important; }
.bg-purple-100 { background-color: rgba(124, 58, 237, 0.15) !important; }
.text-purple-600 { color: #7C3AED !important; }
.text-purple-800 { color: #5B21B6 !important; }

/* Red/danger colors */
.bg-red-50 { background-color: var(--color-danger-bg) !important; }
.bg-red-100 { background-color: var(--color-danger-bg) !important; }
.text-red-600 { color: var(--color-danger) !important; }
.text-red-800 { color: var(--color-danger-text) !important; }

/* Teal colors */
.bg-teal-50 { background-color: rgba(42, 138, 110, 0.1) !important; }
.bg-teal-100 { background-color: rgba(42, 138, 110, 0.15) !important; }
.text-teal-800 { color: #1A6B52 !important; }

/* Orange/yellow colors */
.bg-orange-100 { background-color: rgba(255, 170, 0, 0.15) !important; }
.text-orange-600 { color: var(--color-gold) !important; }
.text-yellow-600 { color: var(--color-gold) !important; }

/* Indigo colors */
.bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1) !important; }
.text-indigo-800 { color: #3730A3 !important; }

/* Cyan colors */
.bg-cyan-50 { background-color: rgba(42, 138, 110, 0.1) !important; }
.text-cyan-800 { color: #1A6B52 !important; }

/* Border colors */
.border-gray-100 { border-color: var(--color-border-light, var(--color-border)) !important; }
.border-gray-200 { border-color: var(--color-border) !important; }
.border-gray-300 { border-color: var(--color-border) !important; }

/* Shadows - use elegant shadows */
.shadow-md { box-shadow: var(--shadow-brutal) !important; }
.shadow-lg { box-shadow: var(--shadow-brutal-hover) !important; }

/* Rounded corners - adapt to theme */
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }

/* Admin navigation and buttons - ensure contrast on accent backgrounds */
.bg-green-500,
.bg-green-600,
.bg-green-700,
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-purple-500,
.bg-purple-600,
.bg-teal-500,
.bg-teal-600 {
  color: var(--color-accent-text) !important;
}

/* Admin active button - force background AND text color */
.bg-green-600.text-white,
a.bg-green-600,
button.bg-green-600 {
  background-color: var(--color-accent) !important;
  color: var(--color-accent-text) !important;
}

/* Admin inactive buttons */
.bg-gray-200.text-gray-700,
a.bg-gray-200,
button.bg-gray-200 {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text-body) !important;
}

.hover\:bg-green-700:hover,
.hover\:bg-blue-700:hover {
  color: var(--color-accent-text) !important;
}

/* ================================================
   GOOGLE FONTS IMPORT
   Add this to <head>:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet">
   ================================================ */