/* ==========================================================================
   TOKENS — matheusdantas.com (Direção: Editorial Suíço & Arquitetônico)
   Cânone: DESIGN.md §15 + Extensões Light-First com Modo Escuro selecionável
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-latin-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial");
  size-adjust: 94.9%;
  ascent-override: 112.3%;
  descent-override: 31.6%;
}

:root {
  /* ---- Paleta Cânone (marca.md / DESIGN.md) ---- */
  --blue-rgb: 36, 74, 235;
  --blue-lift-rgb: 53, 89, 242;
  --blue-deep-rgb: 27, 54, 184;

  --color-blue: #244AEB;
  --color-blue-hover: #1D3BC4;
  --color-blue-tint: #EAEEFF;
  --color-ink: #1C1C1C;
  --color-ink-soft: #3A3A3A;
  --color-gray: #BABABA;
  --color-paper: #F2EFEF;
  --color-white: #FFFFFF;
  --color-line: #E4E0E0;
  --color-success: #1F9D63;
  --color-error: #D23B3B;

  /* ---- Papéis Semânticos (Light-First Editorial — Contrasta com Dantas Studio) ---- */
  --bg-base: var(--color-paper);
  --bg-surface: var(--color-white);
  --bg-subtle: #EAE5E5;
  --bg-inverse: var(--color-ink);
  --bg-header: rgba(242, 239, 239, 0.9);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-muted: #595959;
  --text-on-dark: var(--color-paper);
  --text-on-accent: var(--color-white);

  --border-grid: #D8D2D2;
  --border-strong: var(--color-ink);
  --action: var(--color-blue);
  --action-hover: var(--color-blue-hover);
  --badge-bg: var(--color-blue-tint);
  --badge-text: #1B36B8;

  /* ---- Tipografia Escalar Modular (Razão Terça Maior 1.25 · DESIGN.md §5.2 + Impeccable Typeset) ---- */
  --font-sans: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Tamanhos (Escala separada H1–H6, Lead, Body, Small, Caption, Micro Floor >= 12px) */
  --fs-display: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);          /* 40px -> 72px */
  --fs-h1: clamp(2.125rem, 3.2vw + 0.75rem, 3.5rem);         /* 34px -> 56px */
  --fs-h2: clamp(1.6875rem, 2.2vw + 0.55rem, 2.5rem);        /* 27px -> 40px */
  --fs-h3: clamp(1.3125rem, 1.1vw + 0.65rem, 1.75rem);       /* 21px -> 28px */
  --fs-h4: clamp(1.125rem, 0.5vw + 0.85rem, 1.3125rem);      /* 18px -> 21px */
  --fs-h5: clamp(1rem, 0.25vw + 0.9rem, 1.125rem);           /* 16px -> 18px */
  --fs-h6: 0.875rem;                                         /* 14px (Subhead / Overline) */
  --fs-body-l: clamp(1.0625rem, 0.25vw + 0.98rem, 1.1875rem);/* 17px -> 19px */
  --fs-body: 1rem;                                           /* 16px */
  --fs-small: 0.875rem;                                      /* 14px */
  --fs-caption: 0.8125rem;                                   /* 13px */
  --fs-micro: 0.75rem;                                       /* 12px (Piso mínimo legível) */

  /* Pesos Tipográficos por Papel */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fw-h1: var(--fw-extrabold);
  --fw-h2: var(--fw-bold);
  --fw-h3: var(--fw-bold);
  --fw-h4: var(--fw-semibold);
  --fw-h5: var(--fw-semibold);
  --fw-h6: var(--fw-bold);
  --fw-body: var(--fw-regular);

  /* Alturas de Linha (Line-Height inversamente proporcional ao corpo) */
  --lh-display: 1.04;
  --lh-h1: 1.08;
  --lh-h2: 1.14;
  --lh-h3: 1.22;
  --lh-h4: 1.30;
  --lh-h5: 1.38;
  --lh-h6: 1.42;
  --lh-body-l: 1.68;
  --lh-body: 1.62;
  --lh-small: 1.52;
  --lh-caption: 1.45;

  /* Tracking (Letter-Spacing calibrado por tamanho) */
  --ls-display: -0.035em;
  --ls-h1: -0.03em;
  --ls-h2: -0.022em;
  --ls-h3: -0.015em;
  --ls-h4: -0.01em;
  --ls-h5: -0.005em;
  --ls-h6: 0.06em;
  --ls-body: 0em;
  --ls-overline: 0.08em;

  /* ---- Espaçamento (Escala base 8) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --space-10: 120px;

  /* ---- Raios e Sombras (Elevação neutra sem halo cromático) ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-focus: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--color-blue);
  --shadow-action: 0 10px 24px rgba(18, 19, 22, 0.18);
  --shadow-float: 0 16px 40px rgba(28, 28, 28, 0.08);

  /* ---- Movimento ---- */
  --motion-fast: 150ms;
  --motion-base: 240ms;
  --motion-slow: 380ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Grid Editorial Widescreen (1680px de largura útil) ---- */
  --container-max: 1680px;
  --gutter: clamp(16px, 2.4vw, 40px);
}

/* ---- Modo Escuro Opcional (Selecionável pelo usuário) ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #1C1C1C;
  --bg-surface: #232323;
  --bg-subtle: #2B2B2B;
  --bg-inverse: #F2EFEF;
  --bg-header: rgba(28, 28, 28, 0.9);

  --text-primary: #F2EFEF;
  --text-secondary: #D4D0D0;
  --text-muted: #BABABA;

  --border-grid: #323232;
  --border-strong: #F2EFEF;
  --badge-bg: rgba(var(--blue-rgb), 0.22);
  --badge-text: #BDCBFF;
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.4);
}

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