/* ==========================================================================
   MITRA ARQUITETURA — Design tokens
   Fonte única de verdade. A LP importa este arquivo; o design system o exibe.
   ========================================================================== */

:root {
  /* ---- Cores de marca (extraídas do logotipo) ---- */
  --mitra-fendi: #B09E8A;   /* cor da marca */
  --mitra-branco: #FEFEFE;
  --mitra-preto: #1B1B1B;

  /* ---- Escala Fendi (derivada da cor da marca) ---- */
  --fendi-50:  #F6F2ED;
  --fendi-100: #EDE6DD;
  --fendi-200: #DDD2C4;
  --fendi-300: #CBBCA9;
  --fendi-400: #BEAE9A;
  --fendi-500: #B09E8A;     /* = marca */
  --fendi-600: #8A7A68;     /* só texto grande / ícones sobre claro (4.1:1) */
  --fendi-700: #6E6052;     /* texto sobre claro (6:1, AA) */
  --fendi-800: #4A4036;
  --fendi-900: #2A2622;     /* marrom-grafite dos posts */

  /* ---- Tema LIGHT (padrão) — tokens semânticos ---- */
  --bg:        #FEFEFE;                    /* fundo principal */
  --bg-alt:    #F6F2ED;                    /* areia: alterna seções */
  --bg-deep:   #1B1B1B;                    /* seção escura pontual (CTA final) */
  --fg:        #1B1B1B;                    /* texto */
  --fg-muted:  rgba(27, 27, 27, .68);
  --fg-faint:  rgba(27, 27, 27, .45);
  --accent:        #8A7A68;                /* palavra em itálico / títulos grandes (4.1:1) */
  --accent-text:   #6E6052;                /* texto pequeno, eyebrow (6:1, AA) */
  --line:      rgba(27, 27, 27, .13);
  --line-fendi: rgba(138, 122, 104, .5);

  /* Vidro padrão sobre página clara */
  --glass-bg:     rgba(254, 254, 254, .55);
  --glass-border: rgba(254, 254, 254, .8);
  --glass-blur:         blur(24px) saturate(140%);
  --glass-blur-strong:  blur(40px) saturate(150%);
  --glass-highlight:    inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-shadow:       0 24px 60px -28px rgba(70, 56, 40, .35);

  /* Vidro escuro e fendi (sobre fotos) */
  --glass-dark-bg:      rgba(27, 27, 27, .38);
  --glass-dark-border:  rgba(254, 254, 254, .2);
  --glass-light-bg:     rgba(254, 254, 254, .58);
  --glass-light-border: rgba(254, 254, 254, .75);
  --glass-fendi-bg:     rgba(176, 158, 138, .2);
  --glass-fendi-border: rgba(176, 158, 138, .5);

  /* ---- Tipografia ---- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display-xl: clamp(3.25rem, 2.1rem + 5.6vw, 7rem);   /* hero */
  --fs-display-l:  clamp(2.5rem, 1.8rem + 3.4vw, 4.75rem); /* títulos de seção */
  --fs-display-m:  clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-display-s:  clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --fs-lead:       clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body:       1rem;
  --fs-small:      .875rem;
  --fs-eyebrow:    .75rem;                                 /* caixa-alta espaçada */
  --ls-eyebrow:    .22em;
  --ls-button:     .16em;

  /* ---- Espaçamento (base 4) ---- */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 9rem;
  --section-y: clamp(5rem, 3rem + 8vw, 10rem);
  --gutter: clamp(1.25rem, .5rem + 3vw, 3.5rem);
  --container: 1240px;

  /* ---- Raios: cantos retos (decisão do Igor). Mantidos como tokens para ajuste futuro ---- */
  --r-xs: 0;
  --r-s:  0;
  --r-m:  0;
  --r-l:  0;
  --r-pill: 0;

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
}

/* Contexto sobre foto: inverte para texto claro e vidro escuro */
.on-photo {
  --fg: #FEFEFE;
  --fg-muted: rgba(254, 254, 254, .76);
  --fg-faint: rgba(254, 254, 254, .5);
  --accent: #CBBCA9;
  --accent-text: #CBBCA9;
  --line: rgba(254, 254, 254, .2);
  --line-fendi: rgba(203, 188, 169, .6);
  --glass-bg: rgba(27, 27, 27, .38);
  --glass-border: rgba(254, 254, 254, .2);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .16);
  --glass-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
  color: var(--fg);
}