/* ==========================================================================
   Belas Frases de Amor 2026 — Design Tokens
   Componentes consomem SOMENTE tokens (nunca hex cru).
   Marca: coral #FF555D. Dark completo via [data-theme="dark"].
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand: escala coral Belas Frases de Amor (#FF555D) --- */
  --c-coral-50:  #FFF1F2;
  --c-coral-100: #FFE1E3;
  --c-coral-200: #FFC7CB;
  --c-coral-300: #FF9DA3;
  --c-coral-400: #FF767E;
  --c-coral-500: #FF555D;   /* Primary — marca */
  --c-coral-600: #EE3540;
  --c-coral-700: #C81E29;   /* links / active */
  --c-coral-800: #AB171D;   /* vermelho escuro de apoio */
  --c-coral-900: #7F1319;

  /* --- Neutro escuro de marca --- */
  --c-ink:       #3C3C3C;   /* dark da marca */

  /* --- Superfícies claras quentes (paper) --- */
  --c-paper:     #FFF9F9;   /* fundo do site */
  --c-surface:   #FFFFFF;   /* cards */
  --c-surface-2: #FFF1F2;   /* superfície sutil / hover */

  /* --- Texto --- */
  --c-text:      #2B2226;   /* quase-preto quente — AAA sobre paper */
  --c-text-soft: #4A4148;
  --c-muted:     #6E6570;   /* AA sobre paper */
  --c-on-coral:  #FFFFFF;   /* texto sobre primary */

  /* --- Bordas e linhas --- */
  --c-border:        #F1DEE0;
  --c-border-strong: #E4C9CD;

  /* --- Feedback --- */
  --c-success:  #1E9E5A;
  --c-danger:   #D13438;
  --c-whatsapp: #25D366;   /* fixo de marca */

  /* --- Foco (acessibilidade) --- */
  --c-focus: #1D6FE0;      /* ring azul de alto contraste em qualquer fundo */

  /* --- Tokens semânticos (o dark override reescreve só estes) --- */
  --bg:            var(--c-paper);
  --surface:       var(--c-surface);
  --surface-2:     var(--c-surface-2);
  --text:          var(--c-text);
  --text-soft:     var(--c-text-soft);
  --muted:         var(--c-muted);
  --border:        var(--c-border);
  --border-strong: var(--c-border-strong);
  --brand:         var(--c-coral-500);
  --brand-strong:  var(--c-coral-600);
  --link:          var(--c-coral-700);
  --header-bg:     var(--c-surface);
  --header-text:   var(--c-ink);

  /* ====================== Tipografia ====================== */
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-xl:   clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-2xl:  clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --fs-3xl:  clamp(2.25rem, 1.6rem + 3vw, 3.25rem);

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.7;
  --lh-quote: 1.55;
  --tracking-tight: -0.01em;

  /* ====================== Espaçamento (base-4) ====================== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ====================== Raio ====================== */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ====================== Sombras quentes ====================== */
  --sh-1: 0 1px 2px rgba(127, 19, 25, 0.06);
  --sh-2: 0 4px 16px rgba(127, 19, 25, 0.08);
  --sh-3: 0 12px 32px rgba(127, 19, 25, 0.12);

  /* ====================== Containers ====================== */
  --w-prose:   680px;
  --w-content: 1120px;
  --w-wide:    1280px;
  --header-h:  60px;
  --subnav-h:  44px;

  /* ====================== Z-index ====================== */
  --z-base: 1; --z-dropdown: 10; --z-sticky: 20; --z-header: 30;
  --z-overlay: 40; --z-drawer: 50; --z-modal: 60; --z-toast: 70;

  /* ====================== Motion ====================== */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 150ms; --dur: 220ms; --dur-slow: 320ms;
}

/* ====================== Dark mode (tokens) ====================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #171415;
  --surface:       #211D1F;
  --surface-2:     #2A2426;
  --text:          #F5EDEE;
  --text-soft:     #D8CDD0;
  --muted:         #A79DA0;
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --brand:         #FF767E;
  --brand-strong:  #FF9DA3;
  --link:          #FF9DA3;
  --header-bg:     #2A1113;
  --header-text:   #FFFFFF;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-2: 0 4px 20px rgba(0, 0, 0, 0.42);
  --sh-3: 0 12px 36px rgba(0, 0, 0, 0.5);
}

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