/* =============================================================
   LTQ EDUCAÇÃO — LINK IN BIO
   tokens.css · fonte única de verdade do design system da página
   ============================================================= */

:root {
  /* ---------- CORES · MARCA ---------- */
  --color-brand-dark: #0A2F28;
  --color-brand-accent: #0ACE97;
  --color-brand-accent-hover: #16B364;

  /* Derivados de apoio (transparências do accent e do dark).
     Sempre derive daqui — nunca escreva rgba solto no styles.css. */
  --color-brand-dark-90: rgba(10, 47, 40, 0.90);
  --color-brand-dark-70: rgba(10, 47, 40, 0.70);
  --color-brand-dark-12: rgba(10, 47, 40, 0.12);
  --color-brand-dark-06: rgba(10, 47, 40, 0.06);

  --color-accent-40: rgba(10, 206, 151, 0.40);
  --color-accent-24: rgba(10, 206, 151, 0.24);
  --color-accent-14: rgba(10, 206, 151, 0.14);
  --color-accent-08: rgba(10, 206, 151, 0.08);

  /* ---------- CORES · TEXTO ---------- */
  --color-text-primary: #000000;
  --color-text-heading: #191919;
  --color-text-secondary: rgba(87, 87, 87, 0.8);
  --color-text-muted: #525252;
  --color-text-numeric: #40404F;
  --color-text-inverse: #FFFFFF;

  /* Texto sobre superfície escura */
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-soft: rgba(255, 255, 255, 0.72);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.52);

  /* ---------- CORES · FUNDO ---------- */
  --color-bg-base: #FFFFFF;
  --color-bg-subtle: #F6F9F7;
  --color-bg-subtle-alt: #EDFCF4;
  --color-bg-brand: #0A2F28;

  /* ---------- BORDAS ---------- */
  --color-border-accent: #0ACE97;
  --color-border-neutral: rgba(10, 47, 40, 0.10);
  --color-border-on-dark: rgba(255, 255, 255, 0.14);

  --border-accent: 1px solid var(--color-border-accent);
  --border-neutral: 1px solid var(--color-border-neutral);
  --border-on-dark: 1px solid var(--color-border-on-dark);

  /* ---------- TIPOGRAFIA ---------- */
  --font-family-base: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Escala tipográfica — os valores desktop são o teto;
     os fluid() abaixo interpolam a partir do mobile. */
  --font-size-h1: clamp(2.25rem, 1.35rem + 3.9vw, 4rem);      /* 36px → 64px */
  --line-height-h1: 1.08;
  --letter-spacing-h1: -0.0225em;                              /* -1.44px @64 */

  --font-size-h2: clamp(1.75rem, 1.28rem + 2.05vw, 2.5rem);   /* 28px → 40px */
  --line-height-h2: 1.1;
  --letter-spacing-h2: -0.02em;                                /* -0.8px @40 */

  --font-size-h3: clamp(1.375rem, 1.12rem + 1.1vw, 1.875rem); /* 22px → 30px */
  --line-height-h3: 1.32;
  --letter-spacing-h3: -0.015em;

  --font-size-h4: clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);/* 18px → 21px */
  --line-height-h4: 1.35;

  --font-size-body-lg: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);/* 16px → 18px */
  --line-height-body-lg: 1.55;

  --font-size-body: 1rem;        /* 16 / 24 */
  --line-height-body: 1.5;

  --font-size-sm: 0.875rem;      /* 14 */
  --font-size-xs: 0.75rem;       /* 12 */
  --letter-spacing-label: 0.14em;

  /* ---------- RAIOS ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-card: 0px 24px 48px -8px rgba(0, 0, 0, 0.08);
  --shadow-button-inset: 0px -4px 4.6px 0px inset rgba(0, 0, 0, 0.25);
  --shadow-accent-sm: 0px 4px 7px rgba(10, 207, 151, 0.15);
  --shadow-elevated: 0px 8px 34px -2px rgba(0, 0, 0, 0.35);

  /* ---------- ESPAÇAMENTO ---------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --section-padding-block: clamp(56px, 4vw + 40px, 112px);
  --gutter: clamp(20px, 4vw, 40px);

  /* ---------- LARGURAS ---------- */
  --width-mobile: 520px;   /* coluna editorial — o link in bio nasce aqui */
  --width-desktop: 1200px; /* container amplo do desktop */

  /* ---------- MOVIMENTO ---------- */
  --duration-fast: 200ms;
  --duration-base: 280ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- ALVO DE TOQUE ---------- */
  --tap-target: 44px;

  /* ---------- FOCO ---------- */
  /* O anel de foco usa outline (funciona sobre claro e escuro) — ver styles.css */
  --focus-outline-width: 3px;
  --focus-outline-offset: 3px;
}