/* ============================================================
   O JARDIM DA ELIS — Design Tokens
   Mobile-first · afetivo · premium
   ============================================================ */

/* ---- Fonts ---------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=Nunito:wght@400;600;700&display=swap');

:root {
  /* ========================================================
     1. COLOR — base palette (paleta da Elis)
     ======================================================== */
  --c-algodao:   #F6CBD4; /* Algodão Doce  — rosa principal  */
  --c-rosa-cha:  #E2A0AF; /* Rosa Chá      — rosa médio      */
  --c-babado:    #D98598; /* Babado        — rosa quartzo    */
  --c-coral:     #EE8A94; /* Coral Doce    — acento quente   */
  --c-menta:     #9AD3B6; /* Menta         — verde fresco    */
  --c-salvia:    #A8C3BE; /* Sálvia        — verde suave     */
  --c-margarida: #F7F2EC; /* Margarida     — branco cremoso  */
  --c-palha:     #E8CFA0; /* Palha         — neutro quente   */

  /* ---- Derived deep tones (texto / contraste) ---- */
  --c-wine-900:  #3A2229; /* texto principal — vinho profundo  */
  --c-wine-700:  #5E3A44; /* texto forte                       */
  --c-rose-600:  #8A5B66; /* texto secundário rosado           */
  --c-rose-400:  #A98089; /* texto terciário / placeholder     */
  --c-babado-700:#C06F84;
  --c-babado-800:#B05E74;
  --c-babado-900:#9C4E64;
  --c-coral-700: #E1727E;
  --c-menta-700: #5FA886; /* verde de sucesso legível          */
  --c-menta-800: #4C8C6E;
  --c-palha-700: #C9A86A;

  /* ---- Warm neutrals (superfícies, bordas) ---- */
  --c-cream-50:  #FBF7F3;
  --c-cream-100: #F4ECE6;
  --c-cream-200: #EADFD6;
  --c-cream-300: #E0D0C4;
  --c-white-warm:#FFFDFB;

  /* ========================================================
     2. COLOR — semantic tokens
     ======================================================== */
  /* backgrounds */
  --color-bg-primary:     var(--c-margarida);
  --color-bg-soft:        var(--c-cream-100);
  --color-bg-rose:        #FBEEF0;   /* seção rosada suave */
  --color-bg-mint:        #EAF4EE;   /* seção verde respiro */
  --color-bg-straw:       #FBF2DF;   /* seção quente / placas */
  --color-bg-overlay:     rgba(58, 34, 41, 0.40);
  --color-bg-scrim:       rgba(58, 34, 41, 0.62);

  /* surfaces */
  --color-surface-card:     var(--c-white-warm);
  --color-surface-elevated: #FFFFFF;
  --color-surface-sunken:   var(--c-cream-100);
  --color-surface-rose:     #FCE5E9;

  /* text */
  --color-text-primary:   var(--c-wine-900);
  --color-text-secondary: var(--c-rose-600);
  --color-text-tertiary:  var(--c-rose-400);
  --color-text-inverse:   #FFF7F3;
  --color-text-on-accent: #FFFFFF;
  --color-text-link:      var(--c-babado-900);

  /* accents */
  --color-accent-primary:        var(--c-babado);
  --color-accent-primary-hover:  var(--c-babado-700);
  --color-accent-primary-active: var(--c-babado-800);
  --color-accent-secondary:      var(--c-coral);
  --color-accent-secondary-hover:var(--c-coral-700);
  --color-accent-mint:           var(--c-menta);
  --color-accent-sage:           var(--c-salvia);
  --color-accent-straw:          var(--c-palha);

  /* borders */
  --color-border-soft:    var(--c-cream-200);
  --color-border-strong:  var(--c-cream-300);
  --color-border-rose:    #EFCAD2;
  --color-border-accent:  var(--c-babado);

  /* states */
  --color-success:        var(--c-menta-700);
  --color-success-bg:     #E6F3EC;
  --color-error:          #C24A60;
  --color-error-bg:       #FBE7EB;
  --color-warning:        var(--c-palha-700);
  --color-disabled-bg:    #ECE3DC;
  --color-disabled-text:  #B7A79D;
  --color-focus-ring:     #C2607A;

  /* ========================================================
     3. TYPOGRAPHY
     ======================================================== */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hand:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* font sizes (mobile-first) */
  --fs-hero:      clamp(2.75rem, 12vw, 3.9rem);
  --fs-display:   clamp(2.25rem, 9vw, 3rem);
  --fs-section:   clamp(1.9rem, 7.5vw, 2.5rem);
  --fs-subtitle:  1.1875rem;   /* 19 */
  --fs-body-lg:   1.125rem;    /* 18 */
  --fs-body:      1.0625rem;   /* 17 */
  --fs-button:    1rem;        /* 16 */
  --fs-label:     0.9375rem;   /* 15 */
  --fs-menu:      1rem;
  --fs-caption:   0.875rem;    /* 14 */
  --fs-helper:    0.8125rem;   /* 13 */
  --fs-note:      0.75rem;     /* 12 */
  --fs-eyebrow:   0.75rem;

  /* line-heights */
  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.62;

  /* letter-spacing */
  --ls-eyebrow:  0.2em;
  --ls-tight:   -0.01em;
  --ls-button:   0.01em;

  /* weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ========================================================
     4. SPACING (base 4px) + LAYOUT
     ======================================================== */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-7:  1.75rem;  /* 28 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  --container-max:    480px;   /* largura máxima de conteúdo no mobile */
  --gutter:           1.375rem;/* padding horizontal (22px) */
  --section-gap:      var(--space-20);
  --section-gap-sm:   var(--space-12);
  --header-h:         64px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-offset: calc(var(--header-h) + var(--safe-top) + var(--space-4));
  --target-min: 44px;

  /* ========================================================
     5. RADII
     ======================================================== */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-card: 24px;
  --radius-pill: 999px;

  /* ========================================================
     6. SHADOWS (sombra quente, nunca pesada)
     ======================================================== */
  --shadow-xs:       0 1px 2px rgba(58, 34, 41, 0.06);
  --shadow-sm:       0 2px 8px -2px rgba(58, 34, 41, 0.10);
  --shadow-card:     0 10px 28px -12px rgba(58, 34, 41, 0.16);
  --shadow-elevated: 0 20px 50px -18px rgba(58, 34, 41, 0.22);
  --shadow-header:   0 6px 20px -10px rgba(58, 34, 41, 0.18);
  --shadow-focus:    0 0 0 3px rgba(194, 96, 122, 0.35);

  /* ========================================================
     7. Z-INDEX
     ======================================================== */
  --z-base:     0;
  --z-decor:    5;
  --z-sticky:   50;
  --z-header:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ========================================================
     8. MOTION
     ======================================================== */
  --motion-duration-fast:   180ms;
  --motion-duration-base:   320ms;
  --motion-duration-slow:   620ms;
  --motion-duration-bloom:  1100ms;  /* flor nascendo */
  --motion-ease-soft:        cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-organic:     cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-bounce-subtle: cubic-bezier(0.34, 1.4, 0.5, 1);

  /* ========================================================
     9. BREAKPOINTS (referência — usadas em @media)
     --bp-sm 380 · --bp-md 480 · --bp-lg 768 · --bp-xl 1024
     ======================================================== */
}