/* ============================================================================
   CB-ARCADE — SYSTÈME DE TOKENS CSS PREMIUM
   ============================================================================
   Palette sémantique, typo cohérente, espacements réguliers, ombres/rayons,
   animations sobres, light/dark mode, RTL, safe-areas iPhone, focus visibles.
   Injecté par social.js, ads.js, arcade.js, sound.js (une seule fois).
   CHROME PREMIUM COHÉRENT: tous les jeux héritent ce langage visuel uniform.

   PRINCIPES PREMIUM :
   • Vert lumineux (#38e08b) pour actions primaires (WCAG AAA sur dark)
   • Or premium (#d4af37) pour accents + highlights
   • Verre dépoli (glassmorphism) — blur(10px) + saturation(1.1) + bordures fines
   • Ombres amples bokeh-like (6-24px, 0.15-0.55 opacity)
   • Rayons premium (8-20px, smooth — jamais tranchant)
   • Espacements réguliers (8px grid — aucun truc ad-hoc)
   • Micro-animations sobres (0.12-0.3s, ease-out, respects prefers-reduced-motion)
   • Typo: système harmonic scale, letter-spacing labels, line-height lisible
   • RTL transparent (dir=rtl flip gauche/droite automatiquement)
   • Safe-areas iOS/Android/notch/Dynamic Island gérées par max()/env()
   • Focus visibles or subtiles (ring 2px + shadow doux)
   • États hover/active cohérents (opacity + scale, pas flashes)
   ============================================================================ */

:root {
  /* --- PALETTE SÉMANTIQUE (Dark Mode) --- */
  /* Neutres (pas de gris "mou") */
  --cb-neutral-0:  #ffffff;       /* blanc pur */
  --cb-neutral-50: #f8f9fb;       /* très clair */
  --cb-neutral-100:#f0f3f7;       /* clair */
  --cb-neutral-200:#e5ebf3;       /* gris très clair */
  --cb-neutral-300:#d8e0ec;       /* gris clair */
  --cb-neutral-400:#c7d2e2;       /* gris medium */
  --cb-neutral-500:#9aa8bd;       /* gris moyen */
  --cb-neutral-600:#6d7f99;       /* gris medium-dark */
  --cb-neutral-700:#4a5a73;       /* gris dark */
  --cb-neutral-800:#2a3342;       /* gris très dark */
  --cb-neutral-900:#1a2029;       /* quasi-noir (fond overlay) */
  --cb-neutral-1000:#0e1219;      /* noir quasi-pur (fond primaire) */

  /* Couleurs sémantiques (saturées pour luminosité, contrastes WCAG AA+) */
  --cb-primary:    #3aff8f;       /* vert premium ultra-vif (action principal, WCAG AAA sur #0e1219, pop élevé) */
  --cb-primary-dark: #1a9c5a;     /* vert très sombre (hover, active, focus dimmer) */
  --cb-primary-light: #58ffa8;    /* vert clair (future light mode, disabled states) */
  --cb-accent:     #ffc107;       /* or premium riche ultra-saturé (highlights, focus rings) */
  --cb-accent-light:#ffd54f;      /* or très clair (texte sur or, focus shadow) */
  --cb-accent-dark: #d4a500;      /* or très sombre (hover accent) */
  --cb-success:    #3aff8f;       /* = primary (cohérence) */
  --cb-warning:    #ffb300;       /* orange vif ultra-saturé (attention, visible sur dark) */
  --cb-warning-dark:#e65100;      /* orange très sombre (hover) */
  --cb-danger:     #ff5252;       /* rouge chaud ultra-vif (erreurs, badges, WCAG AAA) */
  --cb-danger-dark:#c41c3b;       /* rouge très sombre (hover danger) */

  /* Surfaces (fond des composants, dégradé subtle premium) */
  --cb-surface-0:  #151d2a;       /* surface primaire clair (conteneurs, slightly brighter) */
  --cb-surface-1:  #0f131a;       /* surface primaire foncé (base, slightly brighter) */
  --cb-surface-2:  #1a2332;       /* surface secondaire (éléments, slightly brighter) */

  /* Texte (contrastes WCAG AAA sur dark, lisibilité optimale) */
  --cb-text-primary:  #f0f4fa;    /* principal (contraste 16.6:1 sur #0e1219) */
  --cb-text-secondary:#9aa8bd;    /* secondaire/labels (contraste 7:1) */
  --cb-text-muted:    #7c8aa0;    /* discret (contraste 5:1) */
  --cb-text-on-primary: #062015;  /* texte sur vert primary (WCAG AAA) */
  --cb-text-on-accent: #0a0f22;   /* texte sur or (WCAG AA) */
  --cb-text-on-danger: #ffffff;   /* texte sur rouge */
  --cb-text-disabled: #5a6575;    /* désactivé (50% opacity approx) */

  /* Borders & Glass (glassmorphism premium — premium sophistication) */
  --cb-border-light:  rgba(255, 255, 255, 0.10);    /* finest dividers (0.10) */
  --cb-border-medium: rgba(255, 255, 255, 0.14);    /* default lines (0.14) */
  --cb-border-strong: rgba(255, 255, 255, 0.18);    /* emphasis lines (0.18) */
  --cb-border-focus:  rgba(255, 193, 7, 0.50);      /* or focus rings vif (0.50) */
  --cb-glass-bg:      rgba(21, 29, 42, 0.88);       /* 88% opaque dark glass (deeper) */
  --cb-glass-bg-light: rgba(33, 44, 62, 0.78);      /* 78% opaque lighter glass */
  --cb-glass-blur:    blur(12px) saturate(1.20);    /* premium glassmorphism (boost sat + blur) */
  --cb-overlay-bg:    rgba(7, 10, 16, 0.70);        /* 70% opaque overlay (darker) */
  --cb-overlay-blur:  blur(5px);                    /* subtle blur on overlay (increased) */

  /* --- TYPOGRAPHIE (système de scale harmonic) --- */
  --cb-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cb-font-fallback: serif;

  /* Titres (scale 1.25 : 1rem -> 1.25 -> 1.56 -> 1.95 -> 2.44 rem) */
  --cb-heading-xl:   2rem;        /* h1, splash screens */
  --cb-heading-lg:   1.5rem;      /* h2, modal titles */
  --cb-heading-md:   1.25rem;     /* h3, section heads */
  --cb-heading-sm:   1.125rem;    /* h4, sub-titles */
  --cb-heading-xs:   1rem;        /* h5, small heads */

  /* Textes (scale 0.9) */
  --cb-text-lg:      1rem;        /* large body */
  --cb-text-base:    0.9375rem;   /* normal body (15px) */
  --cb-text-sm:      0.875rem;    /* small body (14px) */
  --cb-text-xs:      0.8125rem;   /* extra small (13px) */

  /* Poids */
  --cb-font-regular: 400;
  --cb-font-semibold: 600;
  --cb-font-bold:    700;
  --cb-font-black:   800;

  /* Letter-spacing (labels premium) */
  --cb-letter-spacing-normal: normal;
  --cb-letter-spacing-label:  0.02em;    /* +2% tracking */
  --cb-letter-spacing-caps:   0.05em;    /* +5% tracking */

  /* Line-height */
  --cb-line-height-tight:  1.2;
  --cb-line-height-normal: 1.35;
  --cb-line-height-relaxed: 1.5;

  /* --- ESPACEMENTS (8px grid strict) --- */
  --cb-space-0:   0;
  --cb-space-1:   2px;
  --cb-space-2:   4px;
  --cb-space-3:   6px;
  --cb-space-4:   8px;
  --cb-space-5:   10px;
  --cb-space-6:   12px;
  --cb-space-7:   14px;
  --cb-space-8:   16px;
  --cb-space-10:  20px;
  --cb-space-12:  24px;
  --cb-space-14:  28px;
  --cb-space-16:  32px;
  --cb-space-18:  36px;
  --cb-space-20:  40px;
  --cb-space-24:  48px;

  /* Padding & margin courants */
  --cb-pad-xs:    var(--cb-space-6);
  --cb-pad-sm:    var(--cb-space-8);
  --cb-pad-md:    var(--cb-space-12);
  --cb-pad-lg:    var(--cb-space-16);
  --cb-pad-xl:    var(--cb-space-20);

  --cb-gap-xs:    var(--cb-space-4);
  --cb-gap-sm:    var(--cb-space-6);
  --cb-gap-md:    var(--cb-space-8);
  --cb-gap-lg:    var(--cb-space-12);
  --cb-gap-xl:    var(--cb-space-16);

  /* --- RAYONS (border-radius — smooth premium, jamais tranchant) --- */
  --cb-radius-none:   0;
  --cb-radius-xs:     4px;        /* tiny elements (micro interactions) */
  --cb-radius-sm:     8px;        /* buttons, small chips, inputs */
  --cb-radius-md:     12px;       /* toast, messages, small cards */
  --cb-radius-lg:     16px;       /* panels, large cards */
  --cb-radius-xl:     20px;       /* modals, splash screens */
  --cb-radius-2xl:    24px;       /* huge cards, futures */
  --cb-radius-full:   999px;      /* pills, badges, avatars (circular) */

  /* Rayons composés (sémantiques) */
  --cb-radius-btn:    var(--cb-radius-sm);
  --cb-radius-card:   var(--cb-radius-lg);
  --cb-radius-pill:   var(--cb-radius-full);
  --cb-radius-chip:   var(--cb-radius-full);
  --cb-radius-modal:  var(--cb-radius-xl);

  /* --- OMBRES (bokeh-like amples, profondeur premium 3D) --- */
  --cb-shadow-none:   0 0 0 transparent;
  --cb-shadow-xs:     0 2px 6px rgba(0, 0, 0, 0.16);
  --cb-shadow-sm:     0 4px 14px rgba(0, 0, 0, 0.20);
  --cb-shadow-md:     0 8px 24px rgba(0, 0, 0, 0.22);
  --cb-shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.30);
  --cb-shadow-xl:     0 20px 60px rgba(0, 0, 0, 0.40);
  --cb-shadow-2xl:    0 32px 80px rgba(0, 0, 0, 0.60);
  --cb-shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.12);    /* verre hi-light renforcé */

  /* --- TRANSITIONS & ANIMATIONS (sobres, respecte prefers-reduced-motion) --- */
  --cb-duration-instant:  0.08s;
  --cb-duration-fast:     0.14s;
  --cb-duration-normal:   0.20s;
  --cb-duration-slow:     0.35s;
  --cb-duration-deliberate: 0.45s;

  --cb-easing-in-out:     cubic-bezier(0.38, 0.1, 0.2, 1);     /* smooth fluid default */
  --cb-easing-bounce:     cubic-bezier(0.175, 0.885, 0.32, 1.275); /* entrance spring premium */
  --cb-easing-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);       /* exit ease */
  --cb-easing-subtle:     cubic-bezier(0.4, 0, 0.6, 1);        /* gentle fade fluid */

  /* --- STATES (focus, hover, active, disabled — visibles + cohérents) --- */
  --cb-focus-ring:     2px solid #ffc107;                    /* or premium focus ring vif */
  --cb-focus-offset:   2px;
  --cb-focus-shadow:   0 0 0 6px rgba(255, 193, 7, 0.20);    /* soft golden glow renforcé */
  --cb-hover-bg:       rgba(255, 255, 255, 0.08);            /* +8% opacity hover (plus visible) */
  --cb-active-scale:   0.92;                                 /* 92% scale (plus marqué) */
  --cb-disabled-opacity: 0.45;                               /* 45% opacity disabled (plus transparent) */
  --cb-disabled-cursor: not-allowed;                         /* pointer not-allowed */

  /* --- MODE CLAIR (future, préparé) --- */
  --cb-mode-bg-primary: var(--cb-surface-1);
  --cb-mode-text-primary: var(--cb-text-primary);

  /* --- DÉGRADÉS PREMIUM (composants principaux) --- */
  --cb-gradient-primary: linear-gradient(135deg, var(--cb-primary), #2ed97f);
  --cb-gradient-surface: linear-gradient(180deg, var(--cb-surface-0), var(--cb-surface-1));
  --cb-gradient-accent: linear-gradient(135deg, var(--cb-accent), #d584ff);

  /* --- TRANSFORMATION D'ÉTAT (hover, active, disabled – cohérent) --- */
  --cb-transform-hover: none;
  --cb-transform-active: scale(var(--cb-active-scale));
  --cb-transform-disabled: none;
}

/* Safe-area iOS support (notch, Dynamic Island, home indicator) */
@supports (padding: max(0px)) {
  :root {
    --cb-safe-top:    max(0px, env(safe-area-inset-top, 0px));
    --cb-safe-right:  max(0px, env(safe-area-inset-right, 0px));
    --cb-safe-bottom: max(0px, env(safe-area-inset-bottom, 0px));
    --cb-safe-left:   max(0px, env(safe-area-inset-left, 0px));
  }
}

@supports not (padding: max(0px)) {
  :root {
    --cb-safe-top:    0px;
    --cb-safe-right:  0px;
    --cb-safe-bottom: 0px;
    --cb-safe-left:   0px;
  }
}

/* --- UTILITAIRES GLOBAUX MINIMAUX --- */
/* On évite de polluer le DOM (les composants gardent l'autonomie).
   Seuls les comportements vraiment globaux. */

/* Respecter prefers-reduced-motion (reduce = disable animations & transitions) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support (simplifie visuellement pour accessibilité) */
@media (prefers-contrast: more) {
  :root {
    --cb-border-light:  rgba(255, 255, 255, 0.16);
    --cb-border-medium: rgba(255, 255, 255, 0.24);
    --cb-border-strong: rgba(255, 255, 255, 0.32);
    --cb-focus-ring:    2px solid rgba(212, 175, 55, 1);
    --cb-focus-offset:  3px;
  }
}