/* ============================================================
   COERE — Design System · tokens.css
   Fundações de cor, tipografia, forma, espaço, sombra e movimento.
   Equivalente ao colors_and_type.css citado no design system,
   com os @font-face apontando para ./assets/fontes/.

   Uso:
     <link rel="stylesheet" href="tokens.css">
   ============================================================ */

/* ---------- Fontes ---------- */
@font-face {
  font-family: "Figtree";
  src: url("assets/fontes/Figtree-Light.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fontes/Figtree-LightItalic.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Phosphor";
  src: url("assets/fontes/Phosphor.woff2") format("woff2"),
       url("assets/fontes/Phosphor.woff") format("woff"),
       url("assets/fontes/Phosphor.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Phosphor-Bold";
  src: url("assets/fontes/Phosphor-Bold.woff2") format("woff2"),
       url("assets/fontes/Phosphor-Bold.woff") format("woff"),
       url("assets/fontes/Phosphor-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  /* ---------- Paleta de marca (bruta) ---------- */
  --moss-green:      #325A41; /* PRINCIPAL */
  --golden-yellow:   #EBCD50; /* acento / detalhes / campo eventual */
  --graphite-green:  #141E19; /* quase-preto verde — texto escuro e superfícies inversas */
  --petroleum-green: #1E372D; /* verde secundário */
  --mist-gray:       #F0F0F0; /* superfícies claras / fundo de página */
  --white:           #FFFFFF;

  /* ---------- Tints e degraus derivados ---------- */
  --moss-600:        #2A4D37;
  --moss-400:        #4C7558;
  --moss-200:        #A9C2B2;
  --moss-050:        #E6EEE9;
  --yellow-600:      #D4B43A;
  --yellow-200:      #F6EBB4;
  --line-on-light:   #D8D9D6; /* fio de borda sobre superfície clara */
  --line-on-dark:    #2C3A33; /* fio de borda sobre superfície escura */

  /* ---------- Semântico: superfícies ---------- */
  --bg:              var(--mist-gray);
  --bg-raised:       var(--white);
  --bg-inverse:      var(--graphite-green);
  --bg-brand:        var(--moss-green);
  --bg-accent:       var(--golden-yellow);

  /* ---------- Semântico: texto ---------- */
  --fg1:             var(--graphite-green); /* primário no claro */
  --fg2:             #46554D;               /* secundário no claro */
  --fg3:             #6E7B74;               /* legenda / apoio no claro */
  --fg-on-dark-1:    var(--mist-gray);      /* primário sobre escuro */
  --fg-on-dark-2:    #B4C0B9;               /* secundário sobre escuro */
  --fg-on-brand:     var(--mist-gray);      /* texto sobre moss */
  --fg-accent-ink:   var(--graphite-green); /* única tinta sobre amarelo */

  /* ---------- Semântico: interação ---------- */
  --link:            var(--moss-green);
  --focus-ring:      var(--golden-yellow);

  /* ---------- Famílias tipográficas ---------- */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Pesos ---------- */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 900;

  /* ---------- Raios ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;    /* cards */
  --r-pill: 999px; /* estádio — a forma assinatura da marca */
  --r-card: 32px;  /* card amplo do sistema 2.0 */

  /* ---------- Escala de espaço (base 4px) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;  /* ritmo de seção */
  --sp-8: 64px;  /* ritmo de seção */
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- Sombras (contidas, esverdeadas) ---------- */
  --shadow-sm: 0 1px 2px rgba(20,30,25,0.06);
  --shadow-md: 0 6px 20px rgba(20,30,25,0.08);
  --shadow-lg: 0 18px 48px rgba(20,30,25,0.12);

  /* ---------- Superfícies do campo escuro 2.0 ---------- */
  --surface-dark:       #0D1F17;
  --surface-dark-deep:  #081711;
  --surface-dark-mid:   #10251B;
  --surface-dark-soft:  #17382A;
  --surface-cream:      #F0F0F0;
  --glass-dark:         rgba(13,31,23,.58);
  --glass-dark-active:  rgba(17,43,31,.68);
  --glass-line:         rgba(240,240,240,.16);
  --glass-line-active:  rgba(240,240,240,.24);
  --glow-gold:          rgba(235,205,80,.34);
  --glow-green:         rgba(50,90,65,.30);

  /* ---------- Movimento ---------- */
  --motion-fast:    180ms; /* interação: hover, foco, seta */
  --motion-medium:  280ms;
  --motion-reveal:  720ms; /* entrada de seção */
  --motion-ambient: 46s;   /* aurora, órbitas, fundo contínuo */
  --ease-out:   cubic-bezier(.2,0,0,1);
  --ease-fluid: cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   RAMPA DE TIPO — display forte contra corpo regular
   ============================================================ */
.coere-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.coere-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.coere-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.coere-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.coere-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.coere-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.coere-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: 16px;
  line-height: 1.6;
}
.coere-small {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: 14px;
  line-height: 1.5;
}
.coere-caption {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg3);
}
.coere-mono {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ============================================================
   CARROSSEL — escala para posts 1080×1350 (Instagram)
   Spec em pt: título 20 / texto 10 / texto pequeno 8,
   mapeado para a tela de 1080px (≈3.6×).
   Ênfase é <strong>/<em>: peso maior E cor diferente.
   ============================================================ */
.coere-ig-title {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 72px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.coere-ig-text {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.coere-ig-textsm {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: 28px;
  line-height: 1.25;
}
.coere-ig-title strong, .coere-ig-title em,
.coere-ig-text strong, .coere-ig-text em {
  font-weight: var(--w-bold);
  font-style: inherit;
  color: var(--moss-green);
}
.coere-ig-textsm strong, .coere-ig-textsm em {
  font-weight: var(--w-semibold);
  font-style: inherit;
  color: var(--moss-green);
}

/* ============================================================
   ÍCONES
   As classes .ph / .ph-bold e o mapa de nomes vivem em
   assets/icones/phosphor.css e assets/icones/phosphor-bold.css.
   Carregue-os depois deste arquivo:
     <link rel="stylesheet" href="assets/icones/phosphor.css">
     <link rel="stylesheet" href="assets/icones/phosphor-bold.css">
   ============================================================ */

/* ============================================================
   MOVIMENTO REDUZIDO — loops e respostas espaciais neutralizados
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}