/* ============================================================
   DESIGN TOKENS — Recife Flats Temporada
   Paleta: terracotta / mangue / sand (WCAG AA verificado)
   Tipos: Fraunces + Inter + JetBrains Mono
============================================================ */

:root {
   /* ---------- SOL / OURO (acento principal) ---------- */
  --sol-100: #FFF8E8;
  --sol-200: #FEEDED;
  --sol-300: #FBE3A8;
  --sol-400: #F5C96A;
  --sol-500: #E8A93A;   /* sol principal */
  --sol-600: #D4891F;
  --sol-700: #B56B14;
  --sol-800: #8F520F;
  --sol-900: #6B3C0C;

  /* ---------- ÁGUA / TEAL (apoio geral) ---------- */
  --agua-100: #E7F6F7;
  --agua-200: #C8EAED;
  --agua-300: #8FD0D6;
  --agua-400: #4FAEBA;
  --agua-500: #2A8F9C;  /* água clara, não neon */
  --agua-600: #1F6F7A;
  --agua-700: #18565E;

  /* ---------- ORLA / AZUL (Boa Viagem — praia) ---------- */
  --orla-100: #F0F7FC;
  --orla-200: #D9ECF8;
  --orla-300: #A8D2EF;
  --orla-400: #6BB3E0;
  --orla-500: #3B96CD;   /* azul médio mais claro */
  --orla-600: #2A7FB8;   /* principal — mais claro que #1F6799 */
  --orla-700: #1F6594;
  --orla-800: #133C5C;
  --orla-900: #0E2B43;
  --orla-1000: #0A1F32;

  /* ---------- MANGUE (mais aberto / menos “floresta”) ---------- */
  --mangue-100: #EEF5F1;
  --mangue-200: #D5E6DC;
  --mangue-300: #A9C9B6;
  --mangue-400: #6FA88A;
  --mangue-500: #3F8A68;
  --mangue-600: #2A6B4F;  /* navbar / blocos escuros */
  --mangue-700: #215540;
  --mangue-800: #1A4333;
  --mangue-900: #143328;
   --mangue-1000: #0E241C;

  /* ---------- AREIA / NEUTROS (mais claros e limpos) ---------- */
  
  --paper:        #FFFBF4;  /* quase branco-sol */
  --sand-200:     #F7F0E3;
  --sand-300:     #EFE4CF;
  --sand-400:     #DFCFAE;
  --sand-500:     #C8B48A;
  --sand-600:     #A89268;
  --sand-700:     #8A7450;
  --sand-800:     #6B5A42;
  --sand-900:     #5C4F41;
  --sand-1000:    #453A2F;
  --sand-1100:    #332A22;
  --ink:          #1C2A36;  /* azul-areia (praia), não mangue */
  --ink-soft:     #5A6B78;
  --line:         rgba(28, 42, 54, 0.12);

  /* terracota fica só como apoio (não manda mais no visual) */
  --terracotta-100: #FDF1EC;
  --terracotta-200: #FAE0D3;
  --terracotta-300: #F0C6A8;
  --terracotta-400: #E2A67A;
  --terracotta-500: #CD7C4E;
  --terracotta-600: #C45C26;
  --terracotta-700: #9C4128;
  --terracotta-800: #8C3A22;
  --terracotta-900: #6E2D1A;

  /* ---------- ACENTOS ---------- */
  --gold:         var(--sol-400);
  --gold-dark:    var(--sol-600);


  /* ---------- ALIASES — marca praia: azul orla + sol/areia ---------- */
  --areia:         var(--sand-200);
  --areia-escura:  var(--sand-300);
  --mare:          var(--orla-600);
  --mare-escuro:   var(--orla-800);
  --mare-claro:    var(--orla-500);
  --mare-text-soft: rgba(255, 251, 244, 0.72);
  --tijolo:        var(--sol-500);
  --tijolo-escuro: var(--sol-700);
  --coco:          var(--orla-600);
  --sol:           var(--sol-400);
  --tinta:         var(--ink);
  --branco:        var(--paper);
  --cream:         var(--sand-200);
  --cream-dark:    var(--sand-300);
  --ocean:         var(--orla-600);
  --ocean-light:   var(--orla-500);
  --clay:          var(--sol-500);
  --clay-light:    var(--sol-700);
  --sand:          var(--sol-300);
  --sand-light:    var(--sol-200);
  --sun:           var(--sol-400);
  --sun-light:     var(--sol-200);
  --sun-dark:      var(--sol-600);
  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  --white:         var(--paper);
  --black:         var(--orla-900);
  --accent:        var(--sol-500);       /* CTA = sol / amarelo praia */
  --accent-soft:   var(--sol-200);
  --accent-dark:   var(--orla-600);
  --accent-darker: var(--orla-800);
  --brand-blue:    var(--orla-500);
  --sky-soft:      var(--orla-100);
  --sky-mid:       var(--orla-300);


  /* ---------- TIPOGRAFIA ---------- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-italic:  var(--font-display);

  --fs-xs:    0.78rem;
  --fs-sm:    0.875rem;
  --fs-base:  0.9375rem;
  --fs-md:    1.125rem;
  --fs-lg:    clamp(1.15rem, 1.6vw, 1.375rem);
  --fs-xl:    clamp(1.4rem, 2.2vw, 1.75rem);
  --fs-2xl:   clamp(1.75rem, 2.8vw, 2.875rem);
  --fs-3xl:   clamp(2.2rem, 3.8vw, 3.2rem);
  --fs-display: clamp(2.5rem, 5vw, 5rem);

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.14em;

  /* ---------- ESPAÇAMENTO ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 6rem;
  --space-11: 8rem;

  /* ---------- LAYOUT ---------- */
  --container:      1180px;
  --container-max:  var(--container);
  --container-px:   32px;
  --nav-height:     72px;
  --nav-height-mobile: 64px;
  --announcement-height: 48px;
  --announcement-height-mobile: 52px;
  --roof-height: clamp(80px, 10vw, 140px);
  --house-inset: clamp(20px, 4.5vw, 56px);
  --house-border: 3px;

  /* ---------- RAIOS ---------- */
  --radius-s:     8px;
  --radius-m:     14px;
  --radius-sm:    var(--radius-s);
  --radius-md:    var(--radius-m);
  --radius-lg:    var(--radius-m);
  --radius-xl:    18px;
  --radius-pill:  999px;
  --radius-full:  9999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-card: 0 1px 2px rgba(42, 33, 24, 0.06), 0 6px 20px rgba(42, 33, 24, 0.08);
  --shadow-sm:   var(--shadow-card);
  --shadow-md:   0 8px 28px rgba(42, 33, 24, 0.12);
  --shadow-lg:   0 20px 40px rgba(42, 33, 24, 0.14);
  --shadow-clay: 0 6px 16px rgba(184, 80, 47, 0.32);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    180ms;
  --dur-base:    300ms;
  --dur-slow:    500ms;
  --dur-slower:  800ms;

  --z-base:     1;
  --z-content:  10;
  --z-overlay:  50;
  --z-nav:      100;
  --z-menu:     200;
  --z-modal:    300;

  --section-py: clamp(4rem, 7vw, 6rem);
  --fs-section-title: clamp(1.75rem, 3.2vw, 2.875rem);
  --fs-section-lead: 1.05rem;

  /* Tema semântico por bairro (padrão = praia / orla) */
  --theme-accent: var(--orla-600);
  --theme-accent-soft: var(--orla-100);
  --theme-accent-deep: var(--orla-800);
  --theme-surface: var(--orla-1000);
}

/* Boa Viagem — azul orla (praia), sem trocar a marca global */
[data-theme="boa-viagem"] {
  --theme-accent: var(--orla-600);
  --theme-accent-soft: var(--orla-100);
  --theme-accent-deep: var(--orla-800);
  --theme-surface: var(--orla-1000);

  --agua-100: var(--orla-100);
  --agua-200: var(--orla-200);
  --agua-300: var(--orla-300);
  --agua-400: var(--orla-400);
  --agua-500: var(--orla-500);
  --agua-600: var(--orla-600);
  --agua-700: var(--orla-700);

  --mangue-500: var(--orla-500);
  --mangue-600: var(--orla-600);
  --mangue-700: var(--orla-700);
  --mangue-800: var(--orla-800);
  --mangue-900: var(--orla-900);
  --mangue-1000: var(--orla-1000);

  --mare: var(--orla-600);
  --mare-escuro: var(--orla-800);
  --mare-claro: var(--orla-500);
  --ocean: var(--orla-600);
  --ocean-light: var(--orla-500);
  --accent-dark: var(--orla-600);
  --accent-darker: var(--orla-800);
  --brand-blue: var(--orla-500);
  --sky-soft: var(--orla-100);
  --sky-mid: var(--orla-300);
  --ink: #1C2A36;
  --ink-soft: #5A6B78;
  --line: rgba(28, 42, 54, 0.12);
}

[data-theme="pina"] {
  --theme-accent: var(--mangue-600);
  --theme-accent-soft: var(--mangue-100);
  --theme-accent-deep: var(--mangue-800);
  --theme-surface: var(--mangue-1000);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}