/* ============================================================
   TCHIN TCHIN — Design Tokens
   Source unique de vérité pour toutes les variables du design.
   Ne JAMAIS redéfinir ces variables dans les templates.
   ============================================================ */

:root {
  /* ─── Brand ─── */
  --orange:        #FF6B2C;
  --orange-light:  #FFF3ED;
  --orange-hover:  #E55A1B;
  --orange-glow:   rgba(255, 107, 44, 0.3);

  /* ─── Backgrounds ─── */
  --cream:         #FAFAF8;
  --cream-dark:    #F5F3F0;
  --white:         #FFFFFF;
  --warm-bg:       #FBF7F2;

  /* ─── Text ─── */
  --text-primary:   #1A1A1A;
  --text-secondary: #6B6B6B;
  --text-muted:     #9B9B9B;

  /* ─── Backgrounds (elevation) ─── */
  --bg-elevated:   #FFFFFF;   /* same as white in light mode */
  --bg-overlay:    #FFFFFF;

  /* ─── Text (extra) ─── */
  --text-hint:     #B0B0B0;   /* placeholders, optional labels */

  /* ─── Borders & Dividers ─── */
  --border:          #E8E5E1;
  --border-subtle:   #E8E5E1; /* same as border in light mode */
  --border-input:    #E8E5E1; /* same as border in light mode */

  /* ─── Semantic Colors ─── */
  --green:         #22C55E;
  --green-light:   #F0FDF4;
  --red:           #EF4444;
  --red-light:     #FEF2F2;
  --blue:          #3B82F6;
  --blue-light:    #EFF6FF;
  --gold:          #D4A574;
  --gold-light:    #FFF8F0;

  /* ─── Shadows ─── */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card:   0 2px 16px rgba(45, 36, 24, 0.06);
  --shadow-hover:  0 8px 30px rgba(45, 36, 24, 0.10);

  /* ─── Radii ─── */
  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-lg:     20px;
  --radius-full:   9999px;

  /* ─── Spacing Scale ─── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 40px;

  /* ─── Layout ─── */
  --navbar-height: 64px;
  --max-width:     1280px;
  --content-width: 540px;

  /* ─── Z-Index Scale ─── */
  --z-sticky:  100;
  --z-fixed:   200;
  --z-modal:   300;
  --z-tooltip: 400;

  /* ─── Typography ─── */
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ─── Transitions ─── */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Auth-page color aliases ───
     Auth pages historically used --color-* names. These aliases map them
     to the canonical design-tokens so auth templates can migrate
     incrementally without visual breakage. */
  --color-orange:       var(--orange);
  --color-cream:        var(--cream);
  --color-anthracite:   var(--text-primary);
  --color-warm-gray:    var(--text-secondary);
  --color-light-gray:   #F0F0F0;
  --color-light-orange: #FFE6D5;
  --color-error:        var(--red);
  --color-success:      var(--green);

  /* ─── Glass morphism ─── */
  --glass-bg:           rgba(255, 255, 255, 0.6);
  --glass-border:       rgba(255, 255, 255, 0.5);
  --glass-blur:         10px;
}


/* ─── Dark Mode Overrides ─── */
html[data-theme="dark"] {
  /* Brand */
  --orange:        #FF8347;
  --orange-light:  #3D2A1F;
  --orange-hover:  #FF9B6A;
  --orange-glow:   rgba(255, 131, 71, 0.3);

  /* Backgrounds — elevation layers (low → high) */
  --cream:         #1A1A1E;   /* page bg */
  --cream-dark:    #242428;   /* sunken bg */
  --white:         #2A2A2E;   /* card bg (elevation 1) */
  --warm-bg:       #1A1A1E;   /* alias for cream */
  --bg-elevated:   #333338;   /* input bg, raised surfaces (elevation 2) */
  --bg-overlay:    #232328;   /* form cards, overlays */

  /* Text */
  --text-primary:   #F0F0F0;
  --text-secondary: #BBBBBB;
  --text-muted:     #999999;
  --text-hint:      #8E8E96;  /* placeholders, optional labels */

  /* Borders */
  --border:          #4A4A50;
  --border-subtle:   #3A3A40;  /* softer borders (cards, dividers) */
  --border-input:    #555559;  /* input field borders */

  /* Semantic Colors */
  --green:         #34D66F;
  --green-light:   #1A2E1F;
  --red:           #F87171;
  --red-light:     #2E1A1A;
  --blue:          #60A5FA;
  --blue-light:    #1A2233;
  --gold:          #E8B98A;
  --gold-light:    #2E2418;

  /* Auth-page color aliases (dark) */
  --color-light-gray:   #2A2A2E;
  --color-light-orange: #3D2A1F;

  /* Glass morphism (dark) */
  --glass-bg:           rgba(42, 42, 46, 0.8);
  --glass-border:       rgba(160, 160, 160, 0.3);

  /* Shadows — stronger for dark surfaces */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-card:   0 2px 16px rgba(0, 0, 0, 0.30);
  --shadow-hover:  0 8px 30px rgba(0, 0, 0, 0.40);
}

/* ─── Dark body defaults ─── */
html[data-theme="dark"] body {
  background: var(--cream);
  color: var(--text-primary);
}

/* ─── Dark mode: reset native form elements ───
   Browsers render <select> and <input> with white backgrounds by default.
   This ensures they inherit dark theme colors.
   NOTE: We do NOT reset <button> globally here — most buttons in the app
   have explicit backgrounds (orange CTA, etc.) that would be overridden. */
html[data-theme="dark"] select {
  background-color: var(--white);
  color: var(--text-primary);
  border-color: var(--border);
}

html[data-theme="dark"] select option {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

html[data-theme="dark"] input {
  color-scheme: dark;
}