/* ============================================================
   ÔXI — COZINHA NORDESTINA
   Design System · Variables
   ============================================================ */

:root {

  /* ── CORES ─────────────────────────────────────────── */
  --verde-musgo:     #3D4A2E;
  --verde-escuro:    #1C2416;
  --verde-medio:     #2E3A22;
  --ferrugem:        #A0522D;
  --ferrugem-claro:  #C4703E;
  --areia:           #F5EDD6;
  --areia-escuro:    #E8DCBF;
  --areia-medio:     #EFE3C4;
  --branco:          #FDFAF4;
  --preto:           #0F0F0D;
  --cinza-texto:     #4A4A3E;
  --cinza-claro:     #8A8A78;

  /* Chalk / Quadro Negro */
  --quadro-bg:       #1C2416;
  --chalk-white:     #F0EAD6;
  --chalk-cream:     #D4C9A8;

  /* ── TIPOGRAFIA ─────────────────────────────────────── */
  --font-display:    'Cormorant Garamond', Georgia, serif;
  --font-script:     'Playfair Display', Georgia, serif;
  --font-body:       'Inter', system-ui, sans-serif;
  --font-chalk:      'Caveat', cursive;

  /* Escala tipográfica fluida */
  --text-xs:         clamp(0.75rem,  1vw,   0.875rem);
  --text-sm:         clamp(0.875rem, 1.2vw, 1rem);
  --text-base:       clamp(1rem,     1.4vw, 1.125rem);
  --text-lg:         clamp(1.125rem, 1.8vw, 1.375rem);
  --text-xl:         clamp(1.25rem,  2.2vw, 1.75rem);
  --text-2xl:        clamp(1.5rem,   3vw,   2.5rem);
  --text-3xl:        clamp(2rem,     4vw,   3.5rem);
  --text-4xl:        clamp(2.5rem,   5.5vw, 5rem);
  --text-hero:       clamp(4rem,     10vw,  11rem);
  --text-giant:      clamp(5rem,     15vw,  16rem);

  /* ── ESPAÇAMENTOS ───────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;
  --space-48:  12rem;

  /* Seções */
  --section-padding-y:  clamp(5rem, 10vw, 9rem);
  --container-max:      1400px;
  --container-padding:  clamp(1.5rem, 5vw, 4rem);

  /* ── BORDAS & RAIOS ─────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SOMBRAS ────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(15, 15, 13, 0.08);
  --shadow-md:   0 8px 24px rgba(15, 15, 13, 0.12);
  --shadow-lg:   0 20px 60px rgba(15, 15, 13, 0.18);
  --shadow-xl:   0 32px 80px rgba(15, 15, 13, 0.25);

  /* ── TRANSIÇÕES ─────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
  --duration-xslow: 1200ms;

  /* ── Z-INDEX ────────────────────────────────────────── */
  --z-base:      1;
  --z-raised:    10;
  --z-overlay:   100;
  --z-modal:     200;
  --z-navbar:    300;
  --z-menu:      350;
  --z-cursor:    500;
  --z-preloader: 1000;
}

/* Aliases usados em style.css, home.css, typography.css, transitions.css */
:root {
  --cor-verde-musgo:   var(--verde-musgo);
  --cor-ferrugem:      var(--ferrugem);
  --cor-areia:         var(--areia);
  --cor-branco:        var(--branco);
  --cor-preto:         var(--preto);
  --cor-cinza:         var(--cinza-texto);
  --cor-areia-escura:  var(--areia-escuro);
  --cor-verde-escuro:  var(--verde-escuro);
  --cor-ferrugem-dark: #8B3A1A;
  --cor-quadro:        var(--quadro-bg);
  --space-sm:          var(--space-2);
  --space-md:          var(--space-4);
  --space-lg:          var(--space-6);
  --space-xl:          var(--space-8);
  --space-2xl:         var(--space-12);
  --text-md:           clamp(1rem, 1.25vw, 1.125rem);
}