/*
Theme Name: Maison Brun
Theme URI: https://maisonbrunrotisserie.fr
Author: Rôtisserie Maison Brun
Description: Thème sur-mesure pour la Rôtisserie Maison Brun
Version: 1.0.0
Text Domain: maison-brun
*/

/* =============================================================================
   DESIGN TOKENS — CSS Custom Properties
   Ce fichier sert de registre centralisé des variables de design.
   Tout le styling visuel se trouve dans assets/css/global.css.
   ============================================================================= */

:root {

  /* ---------------------------------------------------------------------------
     COULEURS
     --------------------------------------------------------------------------- */

  /* Primaire */
  --color-copper:    #BC7942;   /* Accent cuivre — appels à l'action, soulignements */
  --color-copper-light: #D4955E; /* Cuivre clair — hover states */
  --color-copper-dark:  #9A5E2A; /* Cuivre foncé — pressed states */

  /* Fonds & textes */
  --color-dark:      #1A1A1A;   /* Fond principal, textes sur fond clair */
  --color-dark-mid:  #242424;   /* Cards, sections légèrement différenciées */
  --color-dark-soft: #2E2E2E;   /* Borders subtiles sur fond sombre */

  /* Tons chauds */
  --color-sand:      #C9B698;   /* Texte secondaire, icônes neutres */
  --color-cream:     #F6ECDA;   /* Titres, texte principal sur fond sombre */
  --color-offwhite:  #FAF8F5;   /* Sections claires, fond de contraste */

  /* Neutres */
  --color-black:     #000000;
  --color-white:     #FFFFFF;

  /* Utilitaires */
  --color-overlay:   rgba(26, 26, 26, 0.85); /* Overlays photo */
  --color-copper-glow: rgba(188, 121, 66, 0.3); /* Halo cuivre */
  --color-copper-glow-strong: rgba(188, 121, 66, 0.5);


  /* ---------------------------------------------------------------------------
     TYPOGRAPHIE
     --------------------------------------------------------------------------- */

  --font-heading: 'Belleza', serif;
  --font-body:    'Montserrat', sans-serif;

  /* Échelle de taille — fluid-friendly, en rem */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-md:   1.125rem;   /*  18px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  1.875rem;   /*  30px */
  --text-3xl:  2.25rem;    /*  36px */
  --text-4xl:  3rem;       /*  48px */
  --text-5xl:  3.75rem;    /*  60px */
  --text-6xl:  4.5rem;     /*  72px */

  /* Graisses */
  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semibold: 600;

  /* Interlignage */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.7;
  --leading-loose:  2;

  /* Letter-spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.2em;


  /* ---------------------------------------------------------------------------
     ESPACEMENT — échelle 4px
     --------------------------------------------------------------------------- */

  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   0.75rem;   /* 12px */
  --space-base: 1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4.5rem;    /* 72px */
  --space-4xl:  6rem;      /* 96px */
  --space-5xl:  9rem;      /* 144px */


  /* ---------------------------------------------------------------------------
     CONTENEURS
     --------------------------------------------------------------------------- */

  --container-max:    1200px;  /* Largeur maximale standard */
  --container-narrow: 800px;   /* Articles, texte long */
  --container-wide:   1400px;  /* Sections plein-écran avec marges */
  --container-padding: var(--space-lg); /* Padding horizontal par défaut */


  /* ---------------------------------------------------------------------------
     BREAKPOINTS (référence commentée — à utiliser dans les media queries)
     480px  — mobile landscape
     768px  — tablette portrait
     1024px — tablette landscape / petit desktop
     1280px — desktop standard
     --------------------------------------------------------------------------- */


  /* ---------------------------------------------------------------------------
     TRANSITIONS & ANIMATIONS
     --------------------------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-xslow:  600ms ease;

  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-in:     cubic-bezier(0.4, 0, 1, 1);
  --easing-out:    cubic-bezier(0, 0, 0.2, 1);


  /* ---------------------------------------------------------------------------
     BORDURES
     --------------------------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --border-thin:   1px solid var(--color-dark-soft);
  --border-copper: 1px solid var(--color-copper);
  --border-sand:   1px solid rgba(201, 182, 152, 0.3);


  /* ---------------------------------------------------------------------------
     OMBRES & HALOS
     --------------------------------------------------------------------------- */

  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-base:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.7);

  /* Halo cuivre — signature visuelle du thème */
  --glow-copper:       0 0 20px var(--color-copper-glow);
  --glow-copper-strong: 0 0 30px var(--color-copper-glow-strong);
  --glow-copper-text:  0 0 12px var(--color-copper-glow);


  /* ---------------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------------- */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

}