/* ==========================================================================
   BHALLERI · Design Tokens
   Camadas: 1) primitivos da marca  2) semânticos (tema)  3) escala
   Tema padrão: "Linho" (claro). Tema alternativo: "Noite" (bordô).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Hanken+Grotesk:wght@300..700&family=Mrs+Saint+Delafield&display=swap');

:root {
  /* ---------- 1. Primitivos da marca ---------- */
  --bordo-950: #2A080C;
  --bordo-900: #4A0E14;   /* bordô profundo — marca */
  --bordo-800: #5B0F1D;   /* vinho — marca */
  --rubi-700:  #771425;   /* rubi — cor-assinatura */
  --rubi-600:  #8C1F31;
  --rubi-100:  #F3DEDF;
  --terracota-600: #B8321F;
  --terracota-500: #D5402F; /* terracota — marca */
  --terracota-100: #F8DDD5;
  --blush-300: #E8B8A4;
  --blush-100: #F6E4DA;
  --creme-100: #FCF6DA;   /* creme — marca */
  --linho-50:  #FBF8F1;
  --linho-100: #F4EFE4;
  --linho-200: #ECE5D6;
  --linho-300: #F3F0E7;   /* off-white do logotipo */
  --palha-300: #EFE6AB;   /* palha — marca */
  --palha-700: #8A6414;
  --oliva-900: #2D2E21;   /* oliva escuro — marca */
  --oliva-700: #4A4C36;
  --oliva-600: #52603A;
  --salvia-300: #CBC8B2;  /* sálvia — marca */
  --salvia-100: #E4E4D2;
  --pedra-500: #9F9A83;   /* pedra — marca */
  --fendi-500: #9B967F;   /* fendi — marca */
  --fendi-700: #817C68;
  --fendi-800: #6E6958;
  --orvalho-600: #4D6275; /* azul-orvalho (apoio p/ informação) */
  --orvalho-100: #DEE5EA;
  --branco: #FFFFFF;

  /* ---------- 2. Semânticos · tema Linho ---------- */
  --bg:              var(--linho-100);
  --bg-sunken:       var(--linho-200);
  --surface:         var(--linho-50);
  --surface-raised:  #FFFDF8;
  --surface-inverse: var(--bordo-900);
  --overlay:         rgba(42, 8, 12, .38);

  --glass:          rgba(251, 248, 241, .56);
  --glass-strong:   rgba(251, 248, 241, .80);
  --glass-tint:     rgba(119, 20, 37, .06);
  --glass-border:   rgba(255, 255, 255, .62);
  --glass-edge:     rgba(74, 14, 20, .10);
  --glass-blur:     22px;

  --text:          var(--oliva-900);   /* corpo */
  --text-strong:   var(--bordo-900);   /* títulos */
  --text-muted:    var(--fendi-800);   /* apoio — 5.0:1 sobre --bg */
  --text-subtle:   #8B8570;            /* só p/ texto grande ou decorativo */
  --text-inverse:  var(--linho-300);
  --text-accent:   var(--rubi-700);

  --line:         rgba(45, 46, 33, .13);
  --line-strong:  rgba(45, 46, 33, .26);
  --line-accent:  rgba(119, 20, 37, .40);

  --action:           var(--rubi-700);
  --action-hover:     var(--bordo-800);
  --action-press:     var(--bordo-900);
  --on-action:        var(--linho-300);
  --action-soft:      rgba(119, 20, 37, .07);
  --action-soft-hover:rgba(119, 20, 37, .12);
  --accent:           var(--terracota-500);

  --success:     var(--oliva-600);  --success-bg: var(--salvia-100);
  --warning:     var(--palha-700);  --warning-bg: #F5EDC8;
  --danger:      var(--terracota-600); --danger-bg: var(--terracota-100);
  --info:        var(--orvalho-600); --info-bg: var(--orvalho-100);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(119, 20, 37, .55);
  --disabled-opacity: .42;

  /* ---------- 3. Tipografia ---------- */
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-sans:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-script:  'Mrs Saint Delafield', 'Snell Roundhand', cursive;

  --fs-display-xl: clamp(3.25rem, 7.5vw, 7rem);
  --fs-display:    clamp(2.5rem, 5vw, 4rem);
  --fs-h1: clamp(2rem, 3.4vw, 2.625rem);
  --fs-h2: clamp(1.625rem, 2.4vw, 2rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.0625rem;
  --fs-body-lg: 1.0625rem;
  --fs-body: .9375rem;
  --fs-small: .8125rem;
  --fs-caption: .75rem;
  --fs-label: .6875rem;
  --fs-data: .8125rem;

  --lh-tight: 1.02;
  --lh-heading: 1.14;
  --lh-body: 1.6;
  --tracking-label: .2em;
  --tracking-display: -.015em;

  /* ---------- 4. Espaçamento (base 4) ---------- */
  --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px;
  --sp-10: 64px; --sp-11: 80px; --sp-12: 112px; --sp-13: 160px;

  /* ---------- 5. Raios ---------- */
  --r-hair: 2px;    /* molduras editoriais de imagem */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;     /* campos */
  --r-lg: 22px;     /* cards */
  --r-xl: 32px;     /* painéis de vidro */
  --r-2xl: 44px;    /* superfícies-squircle */
  --r-pill: 999px;

  /* ---------- 6. Bordas finas ---------- */
  --hair: .5px;
  --stroke: 1px;
  --icon-stroke: 1.25;

  /* ---------- 7. Sombras (quentes, difusas) ---------- */
  --shadow-1: 0 1px 1px rgba(74, 14, 20, .04), 0 2px 8px -2px rgba(74, 14, 20, .06);
  --shadow-2: 0 2px 4px rgba(74, 14, 20, .04), 0 12px 28px -12px rgba(74, 14, 20, .16);
  --shadow-3: 0 4px 10px rgba(74, 14, 20, .05), 0 30px 70px -28px rgba(74, 14, 20, .32);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 .5px rgba(255, 255, 255, .45), 0 18px 48px -24px rgba(74, 14, 20, .28);

  /* ---------- 8. Movimento ----------
     Curvas fortes (Emil Kowalski): entrar/sair → ease-out · mover na tela → ease-in-out ·
     cor/hover → ease · contínuo → linear · painéis laterais → drawer. Nunca ease-in. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease:        var(--ease-out);     /* alias legado */
  --ease-soft:   var(--ease-in-out);  /* alias legado */

  --dur-press:  160ms;  /* feedback de toque */
  --dur-tip:    125ms;  /* tooltip */
  --dur-pop:    200ms;  /* menus, popovers, trocas de estado */
  --dur-modal:  250ms;  /* modal */
  --dur-toast:  400ms;  /* toast (mais lento e elegante, com ease) */
  --dur-drawer: 500ms;  /* drawer */
  --dur-exit:   150ms;  /* saídas são sempre mais rápidas que entradas */
  --dur-reveal: 600ms;  /* só páginas de apresentação */
  --dur-1: 150ms; --dur-2: 200ms; --dur-3: 250ms;  /* escala genérica · UI < 300ms */
  --stagger: 45ms;

  /* ---------- 9. Camadas ---------- */
  --z-dropdown: 40; --z-sticky: 50; --z-drawer: 80; --z-modal: 90; --z-toast: 100; --z-tooltip: 110;

  color-scheme: light;
}

/* ---------- Tema Noite (bordô) ---------- */
[data-theme="noite"] {
  --bg:             #1F0A0E;
  --bg-sunken:      #170609;
  --surface:        #2A0F14;
  --surface-raised: #33141A;
  --surface-inverse:var(--linho-300);
  --overlay:        rgba(10, 2, 4, .55);

  --glass:        rgba(58, 20, 27, .52);
  --glass-strong: rgba(52, 18, 24, .82);
  --glass-tint:   rgba(243, 231, 201, .05);
  --glass-border: rgba(243, 236, 221, .14);
  --glass-edge:   rgba(0, 0, 0, .3);

  --text:        #EFE7D8;
  --text-strong: #F8F0DE;
  --text-muted:  #C7B9A5;
  --text-subtle: #9C8B7D;
  --text-inverse:var(--bordo-900);
  --text-accent: var(--blush-300);

  --line:        rgba(243, 236, 221, .12);
  --line-strong: rgba(243, 236, 221, .24);
  --line-accent: rgba(232, 184, 164, .45);

  --action:        #EFE3C6;
  --action-hover:  #FBF2DC;
  --action-press:  #E2D3B0;
  --on-action:     var(--bordo-900);
  --action-soft:   rgba(243, 231, 201, .08);
  --action-soft-hover: rgba(243, 231, 201, .14);
  --accent:        #E9705F;

  --success: #B9C79A; --success-bg: rgba(185, 199, 154, .13);
  --warning: #E8D48A; --warning-bg: rgba(232, 212, 138, .12);
  --danger:  #F09482; --danger-bg:  rgba(240, 148, 130, .13);
  --info:    #A9C0D3; --info-bg:    rgba(169, 192, 211, .13);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(239, 227, 198, .7);
  --shadow-1: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px -2px rgba(0,0,0,.3);
  --shadow-2: 0 2px 4px rgba(0,0,0,.2), 0 14px 30px -12px rgba(0,0,0,.5);
  --shadow-3: 0 30px 70px -28px rgba(0,0,0,.7);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 .5px rgba(255,255,255,.06), 0 18px 48px -24px rgba(0,0,0,.6);
  color-scheme: dark;
}