/* ==========================================================================
   tokens.css — espelha specs/design.md §2 a §5 e §10.
   Se o codigo divergir do design.md, o design.md esta certo.
   ========================================================================== */

:root {
  /* --- Cor · design.md §2.1 Blush -> Rosewood ------------------------- */
  --blush-50:      #FDF6F4;
  --blush-100:     #FBEDE9;
  --blush-200:     #F5D5D6;
  --rose-300:      #E9B7B4;
  --rose-500:      #D98C93;   /* SO decorativo. Nunca sob texto branco. */
  --rosewood-700:  #B9666F;
  --rosewood-800:  #8E4A54;   /* unica cor de acao */
  --rosewood-900:  #753C45;

  /* --- Neutros quentes · §2.2 ----------------------------------------- */
  --ink-900:       #2E2A2B;
  --ink-600:       #6B6162;
  --ink-500:       #7D7374;   /* menor tom aprovado p/ texto pequeno */
  --ink-400:       #9A9091;   /* SO decorativo ou texto grande */
  --line:          #F1E4E1;
  --white:         #FFFFFF;

  /* --- Secundaria · §2.3 · maximo 2 usos por dobra --------------------- */
  --champagne:     #C4A484;

  /* --- Superficies · §2.4 --------------------------------------------- */
  --surface:       #FFFFFF;
  --surface-alt:   #FDF6F4;
  --surface-frame: #F5D5D6;
  --surface-dark:  #221F20;

  /* --- Tipografia · §3.2 ---------------------------------------------- */
  --font-sans:   Quicksand, ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-script: "Style Script", "Brush Script MT", cursive;

  /* Escala fluida · §3.3 · entre 360px e 1440px de viewport */
  --fs-logo:    clamp(1.875rem, 1.44rem + 1.85vw, 2.5rem);    /* 30 -> 40 */
  --fs-h1:      clamp(2.375rem, 1.05rem + 5.88vw, 4rem);      /* 38 -> 64 */
  --fs-h2:      clamp(1.875rem, 1.17rem + 3.14vw, 2.75rem);   /* 30 -> 44 */
  --fs-h3:      clamp(1.4375rem, 1.24rem + 0.88vw, 1.75rem);  /* 23 -> 28 */
  --fs-h4:      clamp(1.1875rem, 1.14rem + 0.19vw, 1.3125rem);/* 19 -> 21 */
  --fs-lead:    clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);/* 17 -> 19 */
  --fs-body:    clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);     /* 16 -> 17 */
  --fs-small:   clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem); /* 13 -> 14 */
  --fs-eyebrow: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);  /* 11 -> 12 */
  --fs-btn:     0.875rem;

  --lh-h1: 1.08;  --lh-h2: 1.15;  --lh-h3: 1.25;  --lh-h4: 1.30;
  --lh-lead: 1.70; --lh-body: 1.75; --lh-small: 1.60;

  --ls-h1: -0.02em;  --ls-h2: -0.015em; --ls-h3: -0.01em;
  --ls-eyebrow: 0.22em; --ls-btn: 0.12em;

  /* --- Espacamento · §4 · base 4px ------------------------------------ */
  --space-1:  0.25rem;  /*   4 */
  --space-2:  0.5rem;   /*   8 */
  --space-3:  0.75rem;  /*  12 */
  --space-4:  1rem;     /*  16 */
  --space-5:  1.5rem;   /*  24 */
  --space-6:  2rem;     /*  32 */
  --space-7:  3rem;     /*  48 */
  --space-8:  4rem;     /*  64 */
  --space-9:  5rem;     /*  80 */
  --space-10: 6rem;     /*  96 */
  --space-11: 8rem;     /* 128 */
  --space-12: 10rem;    /* 160 */

  --section-y: var(--space-9);   /* 72px-ish no mobile, ampliado em base.css */
  --gutter:    1.25rem;          /* 20px mobile */
  --container: 75rem;            /* 1200px */
  --grid-gap:  var(--space-5);   /* 24px mobile */

  /* --- Bordas e raios · §5 -------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;
  --radius-organic: 48% 52% 60% 40% / 45% 40% 60% 55%;

  /* Sombras SEMPRE quentes, tingidas de rosewood. Cinza/preto e proibido. */
  --shadow-sm: 0 2px 8px rgba(142, 74, 84, 0.04);
  --shadow-md: 0 8px 24px rgba(142, 74, 84, 0.07);
  --shadow-lg: 0 16px 40px rgba(142, 74, 84, 0.10);
  --shadow-xl: 0 24px 60px rgba(142, 74, 84, 0.12);

  /* --- Movimento · §10 · curva unica em todo o site ------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:  200ms;
  --dur-hover:  320ms;
  --dur-reveal: 600ms;
  --dur-hero:   800ms;

  /* --- Layout auxiliar ------------------------------------------------ */
  --nav-h: 96px;   /* pill flutuante: altura da pill + folga do topo */
  --measure: 62ch;
}

@media (min-width: 768px) {
  :root {
    --section-y: var(--space-10);
    --gutter: 2rem;
    --grid-gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-y: var(--space-11);
    --gutter: 2.5rem;
    --nav-h: 128px;
  }
}