/**
 * ARTHUR BOTELHO ARQUITETURA & INTERIORES
 * Design Tokens : Sistema de Identidade Visual v2.0
 * Referência Oficial: CAU A319847-2 | Belém/PA
 */

:root {
  /* ==========================================================================
     1. PALETA OFICIAL DA MARCA (Manual de Identidade Visual ABA)
     ========================================================================== */
  --color-true-blue:       #1E2E47; /* RGB: 30, 46, 71   | HSB: 216, 58, 28 */
  --color-eden-clay:       #C26745; /* RGB: 194, 103, 69 | HSB: 16, 64, 76  */
  --color-bubblegum-peach: #F27D90; /* RGB: 242, 125, 144| HSB: 350, 48, 95 */
  --color-maroon:          #69140E; /* RGB: 105, 20, 14  | HSB: 3, 87, 41   */
  --color-dulce-brown:     #7A4E2D; /* RGB: 122, 78, 45  | HSB: 25, 63, 48  */
  --color-deep-swamp:      #394D2B; /* RGB: 57, 77, 43   | HSB: 95, 44, 30  */
  --color-light-swamp:     #627B43; /* RGB: 98, 123, 67  | HSB: 86, 46, 48  */
  --color-pearl-beige:     #E6D5C3; /* RGB: 230, 213, 195| HSB: 30, 15, 90  */

  /* Neutros auxiliares */
  --color-white:           #FFFFFF;
  --color-black:           #0B0E14;

  /* ==========================================================================
     2. ESCALA EDITORIAL DE ROSA (Tints & Shades da Família Bubblegum Peach)
     Projetada para fundos web elegantes, serenos e não-infantis.
     ========================================================================== */
  --color-peach-50:        #FDEFF2; /* Base canvas suave (12% peach / 88% branco) */
  --color-peach-100:       #FCDEE3; /* Superfície de cards e seções alternadas */
  --color-peach-200:       #F9C4CD; /* Bordas suaves, divisores e pills inativos */
  --color-peach-300:       #F6A1AF; /* Destaque sutil de transição */
  --color-peach-400:       #F48C9E; /* Rosa intermediário */
  --color-peach-500:       #F27D90; /* Bubblegum Peach oficial (focal / badge) */
  --color-peach-600:       #DC6074; /* Estado hover do Bubblegum Peach */
  --color-peach-700:       #C14559; /* Rosa aveludado profundo */
  --color-peach-800:       #9E3344; /* Rosa escuro para contrastes específicos */
  --color-peach-900:       #6B1E2B; /* Sombra tonal */

  /* ==========================================================================
     3. PAPÉIS SEMÂNTICOS & WEB
     ========================================================================== */
  /* Fundos & Superfícies */
  --bg-canvas:             var(--color-peach-50);
  --bg-surface:            var(--color-peach-100);
  --bg-surface-elevated:   var(--color-white);
  --bg-surface-warm:       var(--color-pearl-beige);
  --bg-dark:               var(--color-true-blue);
  --bg-dark-accent:        var(--color-maroon);

  /* Tipografia */
  --text-heading:          var(--color-true-blue);
  --text-primary:          var(--color-true-blue);
  --text-body:             var(--color-true-blue);
  --text-muted:            rgba(30, 46, 71, 0.72);
  --text-subtle:           rgba(30, 46, 71, 0.48);
  --text-inverse:          var(--color-white);
  --text-inverse-muted:    rgba(255, 255, 255, 0.75);

  /* Acentos, Ações & Links */
  --accent-cta:            var(--color-maroon);          /* Botões primários, setas carmesim */
  --accent-cta-hover:      #500E0A;                      /* Hover carmesim escuro */
  --accent-secondary:      var(--color-eden-clay);       /* Terracota, tags, detalhes táteis */
  --accent-secondary-hover:#A85435;
  --accent-brand:          var(--color-bubblegum-peach); /* Ponto de luz da marca */
  --accent-nature:         var(--color-deep-swamp);      /* Toques biofílicos amazônicos */

  /* Bordas e Linhas Estruturais */
  --border-subtle:         rgba(30, 46, 71, 0.12);
  --border-peach:          var(--color-peach-200);
  --border-strong:         var(--color-true-blue);
  --border-accent:         var(--color-maroon);

  /* ==========================================================================
     4. TIPOGRAFIA (Helvetica System Stack Suíço)
     ========================================================================== */
  --font-family-base:      "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif;
  --font-family-heading:   "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif;
  --font-family-mono:      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Escala Modular Editorial */
  --font-size-display:     clamp(2.5rem, 5.5vw, 4.5rem);   /* 40px - 72px */
  --font-size-h1:          clamp(2.0rem, 3.8vw, 3.25rem);  /* 32px - 52px */
  --font-size-h2:          clamp(1.5rem, 2.5vw, 2.25rem);  /* 24px - 36px */
  --font-size-h3:          clamp(1.25rem, 1.8vw, 1.625rem);/* 20px - 26px */
  --font-size-h4:          1.125rem;                       /* 18px */
  --font-size-body-lg:     1.125rem;                       /* 18px */
  --font-size-body:        1.0rem;                         /* 16px */
  --font-size-body-sm:     0.875rem;                       /* 14px */
  --font-size-caption:     0.75rem;                        /* 12px */

  /* Pesos */
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-bold:      700;

  /* Altura de Linha */
  --line-height-tight:     1.1;
  --line-height-heading:   1.2;
  --line-height-body:      1.6;
  --line-height-relaxed:   1.8;

  /* Espaçamento entre Letras (Tracking) */
  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal: 0.0em;
  --letter-spacing-wide:   0.05em;
  --letter-spacing-tag:    0.14em; /* Caixa alta para rótulos arquitetônicos */

  /* ==========================================================================
     5. ESPAÇAMENTO & GRID ARQUITETÔNICO (Base 4px / 8px)
     ========================================================================== */
  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               20px;
  --space-6:               24px;
  --space-8:               32px;
  --space-10:              40px;
  --space-12:              48px;
  --space-16:              64px;
  --space-20:              80px;
  --space-24:              96px;
  --space-32:              128px;

  /* Layout Container */
  --container-max-width:   1360px;
  --container-gutter:      clamp(1.25rem, 3.5vw, 3rem);

  /* ==========================================================================
     6. RAIOS DE CURVATURA (Estética Arquitetônica Refinada: Geometria Precisa)
     Bordas arquitetônicas nítidas (2px a 3px).
     ========================================================================== */
  --radius-none:           0px;
  --radius-xs:             2px;
  --radius-sm:             2px;
  --radius-md:             2px;
  --radius-lg:             3px;
  --radius-pill:           2px;

  /* ==========================================================================
     7. SOMBRAS & ELEVAÇÕES (Camadas Sutis com Profundidade Arquitetônica)
     ========================================================================== */
  --shadow-subtle:         0 4px 16px -2px rgba(30, 46, 71, 0.05);
  --shadow-card:           0 12px 32px -8px rgba(30, 46, 71, 0.10), 0 4px 12px -2px rgba(30, 46, 71, 0.04);
  --shadow-elevated:       0 20px 40px -10px rgba(30, 46, 71, 0.16), 0 8px 16px -4px rgba(30, 46, 71, 0.06);

  /* ==========================================================================
     8. TRANSIÇÕES & ANIMAÇÃO (Interatividade Moderada e Ponderada)
     ========================================================================== */
  --ease-editorial:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-image:            cubic-bezier(0.25, 1, 0.5, 1);

  --duration-fast:         200ms;
  --duration-base:         350ms;
  --duration-slow:         650ms;
  --duration-crossfade:    1200ms;

  --transition-fast:       var(--duration-fast) var(--ease-editorial);
  --transition-base:       var(--duration-base) var(--ease-editorial);
  --transition-slow:       var(--duration-slow) var(--ease-editorial);
  --transition-image:      var(--duration-image) var(--ease-image);
}