/* ==========================================================================
   variables.css — Design tokens
   Moreno Home Conciergeries
   --------------------------------------------------------------------------
   ALTERAR AS CORES DA MARCA: mude apenas os valores deste ficheiro.
   Toda a aplicação (hóspede + administração) lê estes tokens.
   ========================================================================== */

:root {
  /* ---------- Paleta da marca ---------- */
  --black:          #0A0A0A;   /* Preto principal */
  --black-2:        #151515;   /* Preto secundário (superfícies escuras) */
  --black-3:        #1F1F1F;   /* Preto elevado (hover em superfícies escuras) */
  --cream:          #F7F3EA;   /* Creme — fundo da app */
  --cream-2:        #EFE9DC;   /* Creme mais fechado — divisores sobre creme */
  --white:          #FFFFFF;
  --gold:           #C8A96B;   /* Dourado — usar com moderação */
  --gold-soft:      #E2CFA4;   /* Dourado claro (texto sobre preto) */
  --gold-dim:       rgba(200, 169, 107, 0.14);
  --gold-line:      rgba(200, 169, 107, 0.32);

  /* ---------- Neutros ---------- */
  --gray-900:       #131313;
  --gray-800:       #2A2A2A;
  --gray-700:       #444444;
  --gray-600:       #5F5F5F;
  --gray-500:       #808080;
  --gray-400:       #A6A6A6;
  --gray-300:       #CFCAC0;
  --gray-200:       #E4DFD5;
  --gray-100:       #F1EDE5;

  /* ---------- Cores semânticas ---------- */
  --success:        #2E7D5B;
  --success-bg:     #E6F2EC;
  --warning:        #B8791E;
  --warning-bg:     #FBF0DE;
  --danger:         #B3392F;
  --danger-bg:      #FAE9E7;
  --info:           #2F5D8A;
  --info-bg:        #E7F0F8;

  /* ---------- Papéis (superfícies e texto) ---------- */
  --bg:             var(--cream);
  --surface:        var(--white);
  --surface-2:      var(--gray-100);
  --surface-dark:   var(--black);
  --surface-dark-2: var(--black-2);

  --text:           var(--gray-900);
  --text-muted:     var(--gray-600);
  --text-faint:     var(--gray-500);
  --text-on-dark:   var(--cream);
  --text-on-dark-muted: rgba(247, 243, 234, 0.62);

  --border:         var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-dark:    rgba(247, 243, 234, 0.12);

  /* ---------- Tipografia ---------- */
  /* Sem fontes externas: mantém a app rápida e 100% funcional offline. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia,
                  "Times New Roman", serif;

  --fs-xs:   0.6875rem;  /* 11px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md:   1.0625rem;  /* 17px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  1.875rem;   /* 30px */
  --fs-3xl:  2.375rem;   /* 38px */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  --tracking-wide:  0.06em;
  --tracking-wider: 0.16em;

  /* ---------- Espaçamento (escala de 4px) ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ---------- Raios ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;

  /* ---------- Sombras (discretas — luxo é subtileza) ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.05);
  --shadow-md: 0 6px 20px rgba(10, 10, 10, 0.07);
  --shadow-lg: 0 18px 44px rgba(10, 10, 10, 0.13);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 130ms;
  --t-base: 220ms;
  --t-slow: 380ms;

  /* ---------- Layout ---------- */
  --sidebar-w:   264px;
  --topbar-h:    60px;
  --bottomnav-h: 62px;
  --content-max: 1180px;

  /* Área segura (iPhone com notch / barra inferior) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- Camadas ---------- */
  --z-sticky:  100;
  --z-nav:     200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}