/* ============================================================
   KARISMA-KARNIVAL — CSS Variables
   Palette : Noir / Vert forêt / Cuivre — luxe sombre
   ============================================================ */

:root {
  /* ── Couleurs primaires ── */
  --color-bg:           #0d0d0d;
  --color-bg-alt:       #141414;
  --color-bg-elevated:  #1a1a1a;
  --color-surface:      #1f1f1f;
  --color-surface-alt:  #262626;
  --color-border:       #2e2e2e;
  --color-border-light: #3a3a3a;

  /* ── Textes ── */
  --color-text-primary:   #f0ece4;
  --color-text-secondary: #a89e8e;
  --color-text-muted:     #6b6358;
  --color-text-inverse:   #0d0d0d;

  /* ── Accent : Vert forêt ── */
  --color-accent:         #2d5a3d;
  --color-accent-hover:   #3a7050;
  --color-accent-light:   #4a8a63;
  --color-accent-subtle:  #1a3325;

  /* ── Accent secondaire : Cuivre ── */
  --color-copper:         #b87333;
  --color-copper-hover:   #cc8844;
  --color-copper-light:   #d4965a;
  --color-copper-subtle:  #3d2510;

  /* ── États ── */
  --color-success:        #2d7a4a;
  --color-success-bg:     #0f2d1a;
  --color-error:          #c0392b;
  --color-error-bg:       #2d0f0f;
  --color-warning:        #b87333;
  --color-warning-bg:     #2d1a08;
  --color-info:           #2d5a8a;
  --color-info-bg:        #0f1e2d;

  /* ── Typographie ── */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', 'Outfit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  2rem;      /* 32px */
  --font-size-3xl:  2.5rem;    /* 40px */
  --font-size-4xl:  3.5rem;    /* 56px */
  --font-size-5xl:  5rem;      /* 80px */

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-base:   1.6;
  --line-height-relaxed:1.8;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-base:  0;
  --letter-spacing-wide:  0.05em;
  --letter-spacing-wider: 0.1em;
  --letter-spacing-widest:0.2em;

  /* ── Espacement ── */
  --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 */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Rayons ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Ombres ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.7);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.8);
  --shadow-copper: 0 4px 20px rgba(184,115,51,0.2);
  --shadow-accent: 0 4px 20px rgba(45,90,61,0.3);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --header-height:  72px;
  --sidebar-width:  260px;
  --footer-height:  auto;

  /* ── Z-index ── */
  --z-base:    1;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
  --z-tooltip: 600;
}

/* ── Mode clair ── */
[data-theme="light"] {
  --color-bg:           #f5f2ed;
  --color-bg-alt:       #ede9e2;
  --color-bg-elevated:  #e8e3db;
  --color-surface:      #ffffff;
  --color-surface-alt:  #f0ece4;
  --color-border:       #d4cfc6;
  --color-border-light: #e0dbd2;

  --color-text-primary:   #1a1714;
  --color-text-secondary: #4a4540;
  --color-text-muted:     #8a837a;
  --color-text-inverse:   #f0ece4;

  --color-accent:         #2d5a3d;
  --color-accent-hover:   #3a7050;
  --color-accent-light:   #4a8a63;
  --color-accent-subtle:  #d4e8da;

  --color-copper:         #b87333;
  --color-copper-hover:   #9a5f25;
  --color-copper-light:   #cc8844;
  --color-copper-subtle:  #f5e6d0;

  --color-success:        #2d7a4a;
  --color-success-bg:     #d4f0df;
  --color-error:          #c0392b;
  --color-error-bg:       #fde8e6;
  --color-warning:        #b87333;
  --color-warning-bg:     #fdf0e0;
  --color-info:           #2d5a8a;
  --color-info-bg:        #dce8f5;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.15);
  --shadow-copper: 0 4px 20px rgba(184,115,51,0.15);
  --shadow-accent: 0 4px 20px rgba(45,90,61,0.15);
}