/* ==========================================================
   Closer Branding — Design Tokens v1.0
   "Essência antes da estética"
   Mobile-first · P&B editorial · sem cor de destaque
   ========================================================== */


:root {
  /* ---------- COR · primitivos (escala neutra quente) ---------- */
  --gray-0:   #FFFFFF;
  --gray-50:  #F6F5F2;
  --gray-100: #EEEDEA;  /* paper — fundo principal */
  --gray-200: #E2E0DB;
  --gray-300: #D4D2CC;  /* marca d'água */
  --gray-400: #B3B1AB;
  --gray-500: #8A8984;  /* só decorativo (contraste 3:1) */
  --gray-600: #5C5B57;  /* texto secundário (AA 5.9:1) */
  --gray-700: #3D3C39;
  --gray-800: #262624;
  --gray-900: #111111;  /* ink — texto e superfícies escuras */
  --gray-950: #0A0A0A;

  /* ---------- COR · semânticos ---------- */
  --color-bg:            var(--gray-100);
  --color-bg-raised:     var(--gray-50);
  --color-bg-inverse:    var(--gray-900);
  --color-text:          var(--gray-900);
  --color-text-muted:    var(--gray-600);
  --color-text-inverse:  var(--gray-100);
  --color-text-inverse-muted: var(--gray-400);
  --color-border:        var(--gray-300);
  --color-border-strong: var(--gray-900);
  --color-watermark:     var(--gray-300);
  --color-focus:         var(--gray-900);
  --color-overlay:       rgba(17, 17, 17, .55);

  /* ---------- TIPOGRAFIA · famílias ---------- */
  --font-display: 'Poppins', system-ui, sans-serif;           /* títulos, botões, etiquetas */
  --font-body:    'Merriweather', Georgia, serif;             /* textos corridos */
  --font-hand:    'Caveat', 'Segoe Print', cursive;       /* anotações manuscritas */

  /* ---------- TIPOGRAFIA · escala fluida (360px → 1280px) ---------- */
  --text-display: clamp(3rem, 1.6rem + 6.2vw, 7.5rem);    /* 48 → 120  hero "Closer Branding" */
  --text-h1:      clamp(2.25rem, 1.5rem + 3.3vw, 4.5rem);  /* 36 → 72   títulos de seção */
  --text-h2:      clamp(1.75rem, 1.35rem + 1.8vw, 3rem);   /* 28 → 48   destaque/manifesto */
  --text-h3:      clamp(1.25rem, 1.1rem + .6vw, 1.625rem); /* 20 → 26   títulos de card */
  --text-lead:    clamp(1.0625rem, 1rem + .35vw, 1.3125rem);/* 17 → 21 */
  --text-body:    1rem;      /* 16 — nunca menor no celular */
  --text-small:   .875rem;   /* 14 */
  --text-label:   .75rem;    /* 12 — etiquetas em caixa alta */
  --text-hand:    clamp(1.625rem, 1.4rem + 1vw, 2.25rem);   /* 26 → 36 */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --leading-tight: .95;   /* display */
  --leading-snug: 1.1;    /* títulos */
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;/* Merriweather corrido */

  --tracking-tight: -.035em;
  --tracking-normal: 0;
  --tracking-wide: .12em;  /* etiquetas */

  --measure: 62ch;         /* largura máx. de leitura */

  /* ---------- ESPAÇO · base 4px ---------- */
  --space-1: .25rem;  /* 4 */
  --space-2: .5rem;   /* 8 */
  --space-3: .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: 6rem;    /* 96 */
  --space-10: 8rem;   /* 128 */

  --section-y: clamp(4.5rem, 3rem + 7vw, 10rem);  /* respiro entre seções */
  --gutter:    clamp(1.25rem, .8rem + 2vw, 3rem); /* margem lateral */
  --container: 1240px;
  --container-narrow: 760px;

  /* ---------- FORMA ---------- */
  --radius-0: 0;          /* padrão: editorial, cantos retos */
  --radius-sm: 2px;
  --radius-pill: 999px;   /* só botões e flutuante */
  --border-hair: 1px solid var(--color-border);
  --border-ink: 1.5px solid var(--color-border-strong);

  /* ---------- ELEVAÇÃO (mínima — a hierarquia vem do contraste) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(17,17,17,.06), 0 4px 16px rgba(17,17,17,.06);
  --shadow-float: 0 6px 24px rgba(17,17,17,.22);

  /* ---------- MOVIMENTO ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 150ms;    /* hover, foco */
  --dur-base: 280ms;    /* toggles, menus */
  --dur-reveal: 800ms;  /* entrada ao rolar */
  --reveal-distance: 24px;

  /* ---------- CAMADAS ---------- */
  --z-watermark: 0;
  --z-content: 1;
  --z-header: 50;
  --z-float: 60;
  --z-cookie: 70;

  /* ---------- ALVOS DE TOQUE ---------- */
  --tap-min: 48px;
  --header-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-reveal: 0ms; --reveal-distance: 0px; --dur-base: 0ms; }
}