/* ==========================================================================
   variables.css — Design Tokens · MyClubCar Default Theme
   ========================================================================== */

:root {

  /* ── Brand ────────────────────────────────────────────────────────────── */
  --brand:        #AF815C;
  --brand-h:      #8E6240;
  --brand-light:  rgba(175, 129, 92, .10);
  --brand-glow:   rgba(175, 129, 92, .18);
  --brand-sel:    0 0 0 2px var(--brand), 0 4px 12px rgba(175, 129, 92, .20);

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --bg:           #F2F4F7;
  --bg-2:         #EAECF0;
  --surface:      #FFFFFF;

  /* ── Sidebar ──────────────────────────────────────────────────────────── */
  --sidebar-bg:   #0E1117;   /* dark sidebar (admin + client) */
  --sidebar-w:    248px;
  --navy:         #0E1117;
  --navy-2:       #161B26;

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border:       #E3E8EF;
  --border-dark:  #CDD4DF;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --text-1:       #111827;
  --text-2:       #4B5563;
  --text-3:       #9CA3AF;
  --text-4:       #C4CDD6;
  --font-base:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;

  /* ── Semantic colors ──────────────────────────────────────────────────── */
  --blue:         #3B82F6;
  --blue-bg:      #EFF6FF;

  --green:        #10B981;
  --green-bg:     #ECFDF5;

  --amber:        #F59E0B;
  --amber-bg:     #FFFBEB;

  --red:          #EF4444;
  --red-bg:       #FEF2F2;

  --violet:       #8B5CF6;
  --violet-bg:    #F5F3FF;

  --cyan:         #06B6D4;
  --cyan-bg:      #ECFEFF;

  /* ── Border radius ────────────────────────────────────────────────────── */
  --r:            10px;
  --r2:           14px;
  --r3:           18px;
  --r-full:       9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06),  0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:    0 20px 60px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-hover: 0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --t:            150ms ease;
  --t-md:         220ms ease;

  /* ── Z-index scale ────────────────────────────────────────────────────── */
  --z-sidebar:    200;
  --z-overlay:    190;
  --z-topbar:     100;
  --z-modal:      300;
  --z-modal-bg:   290;
  --z-toast:      400;
  --z-dropdown:   250;

  /* ── Client dashboard local tokens → mapped to theme vars ────────────── */
  /* Eliminate inline :root{} din client/dashboard.view.php                 */
  --cc-brand:   var(--brand);
  --cc-brand2:  var(--brand-h);
  --cc-blue:    var(--blue);
  --cc-green:   var(--green);
  --cc-red:     var(--red);
  --cc-yellow:  var(--amber);
  --cc-surface: var(--surface);
  --cc-bg:      var(--bg);
  --cc-border:  var(--border);
  --cc-text:    var(--text-1);
  --cc-text2:   var(--text-2);
  --cc-text3:   var(--text-3);
  --cc-r:       var(--r);
  --cc-r2:      var(--r2);
}

/* ==========================================================================
   DARK MODE — [data-theme="dark"]
   Activat via JS: document.documentElement.setAttribute('data-theme','dark')
   Persistat în localStorage: mcc-theme = 'dark' | 'light'
   Scope: layout-public (P2 configurator, P3 view-config, P4 request-quote)
   Admin + client: fără dark mode (sidebar-ul dark e permanent)
   ========================================================================== */

[data-theme="dark"] {

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --bg:           #0F1117;
  --bg-2:         #161B26;
  --surface:      #1A1F2E;

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --border:       #2A3144;
  --border-dark:  #3A4560;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --text-1:       #F1F5F9;
  --text-2:       #94A3B8;
  --text-3:       #64748B;
  --text-4:       #3D4F6B;

  /* ── Brand light/glow ────────────────────────────────────────────────── */
  --brand-light:  rgba(175, 129, 92, .15);
  --brand-glow:   rgba(175, 129, 92, .22);

  /* ── Semantic backgrounds ───────────────────────────────────────────── */
  --blue-bg:      #1E3A5F;
  --green-bg:     #0D2E1F;
  --amber-bg:     #2D1F05;
  --red-bg:       #2D0F0F;
  --violet-bg:    #1E1540;
  --cyan-bg:      #0A2D35;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --shadow-md:    0 4px 16px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
  --shadow-lg:    0 20px 60px rgba(0,0,0,.50), 0 4px 12px rgba(0,0,0,.35);
  --shadow-hover: 0 8px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
}