/* ============================================================
   TechStore Design System — CSS Tokens
   ============================================================ */

:root {
  /* ── Couleurs principales ── */
  --color-bg:             #F8F7F4;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F2F0EC;
  --color-surface-dark:   #1A1A2E;

  /* ── Texte ── */
  --color-text-primary:   #0D0D0D;
  --color-text-secondary: #6B6B6B;
  --color-text-muted:     #9CA3AF;
  --color-text-inverse:   #FFFFFF;

  /* ── Accent — Indigo profond ── */
  --color-accent:         #4F46E5;
  --color-accent-hover:   #3730A3;
  --color-accent-light:   #EEF2FF;
  --color-accent-dark:    #312E81;

  /* ── Secondaire — Or chaud ── */
  --color-gold:           #D4A853;
  --color-gold-light:     #FDF6E3;

  /* ── États ── */
  --color-success:        #059669;
  --color-success-light:  #D1FAE5;
  --color-error:          #DC2626;
  --color-error-light:    #FEE2E2;
  --color-warning:        #D97706;
  --color-warning-light:  #FEF3C7;

  /* ── Bordures ── */
  --color-border:         #E8E6E1;
  --color-border-dark:    #D1CEC8;

  /* ── Ombres ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16);
  --shadow-accent: 0 8px 24px rgba(79, 70, 229, 0.30);

  /* ── Typographie ── */
  --font-primary:    'Inter', sans-serif;
  --font-display:    'Playfair Display', 'Georgia', serif;
  --font-size-xs:    0.6875rem;  /* 11px */
  --font-size-sm:    0.8125rem;  /* 13px */
  --font-size-base:  1rem;       /* 16px */
  --font-size-lg:    1.125rem;   /* 18px */
  --font-size-xl:    1.25rem;    /* 20px */
  --font-size-2xl:   1.5rem;     /* 24px */
  --font-size-3xl:   2rem;       /* 32px */
  --font-size-4xl:   2.5rem;     /* 40px */
  --font-size-5xl:   3.25rem;    /* 52px */

  /* ── Rayons ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Espacements ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}