/* DropCashCasino — Design tokens (source unique) */
:root {
  /* Couleurs */
  --dcc-bg: #050611;
  --dcc-bg-2: #080a18;
  --dcc-surface: rgba(10, 14, 34, 0.82);
  --dcc-surface-2: rgba(15, 20, 48, 0.88);
  --dcc-text: #f7f7ff;
  --dcc-muted: #aeb2d8;
  --dcc-soft: rgba(255, 255, 255, 0.68);
  --dcc-primary: #7c3cff;
  --dcc-accent: #ff3df2;
  --dcc-cyan: #00d5ff;
  --dcc-gold: #ffd166;
  --dcc-success: #6dff9c;
  --dcc-danger: #ff415d;
  --dcc-line: rgba(255, 255, 255, 0.12);
  --dcc-line-2: rgba(255, 255, 255, 0.22);

  /* Typographie */
  --dcc-font-body: 'Manrope', Inter, system-ui, sans-serif;
  --dcc-font-display: 'Syne', 'Manrope', sans-serif;
  --dcc-text-xs: 0.68rem;
  --dcc-text-sm: 0.82rem;
  --dcc-text-base: 1rem;
  --dcc-text-lg: 1.125rem;
  --dcc-text-xl: 1.35rem;
  --dcc-text-2xl: 1.75rem;
  --dcc-text-3xl: clamp(2rem, 4vw, 3.25rem);

  /* Espacements */
  --dcc-space-1: 0.25rem;
  --dcc-space-2: 0.5rem;
  --dcc-space-3: 0.75rem;
  --dcc-space-4: 1rem;
  --dcc-space-5: 1.25rem;
  --dcc-space-6: 1.5rem;
  --dcc-space-8: 2rem;
  --dcc-space-10: 2.5rem;
  --dcc-space-12: 3rem;

  /* Rayons / ombres */
  --dcc-radius-sm: 12px;
  --dcc-radius-md: 16px;
  --dcc-radius-lg: 22px;
  --dcc-radius-xl: 30px;
  --dcc-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
  --dcc-shadow-md: 0 22px 70px rgba(0, 0, 0, 0.38);
  --dcc-shadow-lg: 0 22px 80px rgba(0, 0, 0, 0.36);
  --dcc-glow: 0 0 42px rgba(124, 60, 255, 0.22), 0 0 66px rgba(0, 213, 255, 0.1);

  /* Layout */
  --dcc-nav-h: 72px;
  --dcc-nav-h-mobile: 64px;
  --nav-link-gap: clamp(0.35rem, 1.2vw, 1.1rem);
  --nav-btn-h: 40px;
  --dcc-brand-w: 148px;
  --dcc-container: 1380px;
  --dcc-page-gutter: clamp(16px, 2.4vw, 24px);
  --dcc-control-min: 44px;
  --dcc-z-header: 100;
  --dcc-z-overlay: 110;
  --dcc-z-menu: 120;
  --dcc-z-dropdown: 200;
  --dcc-z-toast: 9999;

  /* Motion */
  --dcc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dcc-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dcc-duration-fast: 160ms;
  --dcc-duration-normal: 280ms;
  --dcc-duration-slow: 620ms;

  /* Design system aliases (Premium 2026) */
  --background: var(--dcc-bg);
  --background-secondary: var(--dcc-bg-2);
  --surface: var(--dcc-surface);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --border: var(--dcc-line);
  --text: var(--dcc-text);
  --text-muted: var(--dcc-muted);
  --primary-hover: #9466ff;
  --success: var(--dcc-success);
  --warning: var(--dcc-gold);
  --danger: var(--dcc-danger);

  /* Aliases legacy (style.css / premium.css) */
  --bg: var(--dcc-bg);
  --bg-2: var(--dcc-bg-2);
  --panel: var(--dcc-surface);
  --panel-2: var(--dcc-surface-2);
  --line: var(--dcc-line);
  --line-2: var(--dcc-line-2);
  --text: var(--dcc-text);
  --muted: var(--dcc-muted);
  --soft: var(--dcc-soft);
  --primary: var(--dcc-primary);
  --accent: var(--dcc-accent);
  --cyan: var(--dcc-cyan);
  --gold: var(--dcc-gold);
  --green: var(--dcc-success);
  --red: var(--dcc-danger);
  --radius-sm: var(--dcc-radius-sm);
  --radius: var(--dcc-radius-lg);
  --radius-lg: var(--dcc-radius-xl);
  --radius-xl: 42px;
  --shadow: var(--dcc-shadow-lg);
  --glow: var(--dcc-glow);
  --container: var(--dcc-container);
  --nav-h: var(--dcc-nav-h);
  --ease: var(--dcc-ease);
  --ease-pop: var(--dcc-ease-pop);
  --fast: var(--dcc-duration-fast);
  --normal: var(--dcc-duration-normal);
  --slow: var(--dcc-duration-slow);
  --z-header: var(--dcc-z-header);
  --z-menu: var(--dcc-z-menu);
  --dcc-bg-panel: var(--dcc-surface);
  --dcc-line: var(--dcc-line);
  --font-display: var(--dcc-font-display);
  --font-body: var(--dcc-font-body);

  /* Card Design System 2026 — Premium Aug */
  --card-accent-rgb: 124, 60, 255;
  --card-accent-2-rgb: 0, 213, 255;
  --card-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.022) 42%, rgba(8, 12, 31, 0.88) 100%);
  --card-bg-hover: linear-gradient(165deg, rgba(255, 255, 255, 0.095) 0%, rgba(255, 255, 255, 0.035) 42%, rgba(10, 14, 38, 0.92) 100%);
  --card-bg-featured: linear-gradient(155deg, rgba(124, 60, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 35%, rgba(8, 12, 31, 0.9) 100%);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-border-hover: rgba(255, 255, 255, 0.2);
  --card-border-accent: rgba(var(--card-accent-rgb), 0.42);
  --card-glow: 0 0 0 1px rgba(var(--card-accent-rgb), 0.08), 0 18px 50px rgba(0, 0, 0, 0.28);
  --card-glow-hover: 0 0 0 1px rgba(var(--card-accent-rgb), 0.28), 0 28px 72px rgba(0, 0, 0, 0.38), 0 0 56px rgba(var(--card-accent-rgb), 0.16);
  --card-glow-featured: 0 0 0 1px rgba(var(--card-accent-rgb), 0.32), 0 32px 84px rgba(0, 0, 0, 0.4), 0 0 72px rgba(var(--card-accent-rgb), 0.2);
  --card-radius-sm: 16px;
  --card-radius-md: 20px;
  --card-radius-lg: 24px;
  --card-radius-xl: 28px;
  --card-padding-sm: 18px;
  --card-padding-md: 26px;
  --card-padding-lg: 32px;
  --card-padding-xl: 40px;
  --card-shadow: 0 16px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --card-shadow-hover: var(--card-glow-hover);
  --card-duration: 320ms;
  --card-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --card-success: var(--dcc-success);
  --card-warning: var(--dcc-gold);
  --card-danger: var(--dcc-danger);
  --card-info: var(--dcc-cyan);
  --card-neutral: var(--dcc-muted);
  --card-shine: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.09) 50%, transparent 62%);
  --card-accent-gradient: linear-gradient(135deg, rgba(var(--card-accent-rgb), 1), rgba(var(--card-accent-2-rgb), 0.85));
  --card-surface: rgba(255, 255, 255, 0.045);
  --card-surface-strong: rgba(255, 255, 255, 0.07);
}

html {
  scroll-padding-top: var(--dcc-nav-h);
}

@media (max-width: 1023px) {
  html {
    scroll-padding-top: var(--dcc-nav-h-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}