/* ==========================================================================
   FMM Design System — tokens
   Versão 0.1.0 (proposta) · tema escuro como padrão do site institucional.

   Legenda de origem (veja docs/DECISOES.md):
   [oficial]    valor publicado na apresentação de identidade (p. 9–11).
   [provisório] valor oficial com divergência no material; aguarda confirmação.
   [proposto]   nova decisão de interface criada neste design system.

   Camadas:
   1. Primitivos  — paletas e escalas brutas. Não use direto em componentes.
   2. Semânticos  — papéis de interface (fundo, texto, ação, estado…).
   3. Componentes — usam somente tokens semânticos (css/fmm-components.css).
   ========================================================================== */

/* Fonte do site — Plus Jakarta Sans (SIL OFL 1.1, livre), arquivo local.
   Decisão de 06/11/2026: substitui a Galano Grotesque do manual (p. 10), que exige licença paga.
   A Galano segue só no lettering do logo, que é desenho vetorial e não depende da fonte. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ------------------------------------------------------------------
     1. PRIMITIVOS — COR
     ------------------------------------------------------------------ */

  /* Oficiais (p. 11) */
  --fmm-brand-blue: #4749cf;        /* [oficial] RGB 71 73 207 · CMYK 66 65 0 19 */
  --fmm-brand-purple: #681584;      /* [provisório] RGB 104 21 132. O hex impresso (#ff8a00) é laranja e diverge.
                                       Fora da interface: proposta v0.2 retira o roxo do logo e da luz (docs/LOGO.md). */
  --fmm-brand-ink: #192832;         /* [oficial] RGB 25 40 50 · CMYK 50 20 0 80 */
  --fmm-brand-white: #ffffff;       /* [oficial] p. 2: “tons neutros como o preto e o branco” */
  --fmm-brand-black: #000000;       /* [oficial] idem */

  /* Neutros [proposto] — rampa OKLCH com o matiz de #192832 (h ≈ 238°). */
  --fmm-neutral-950: #020608;
  --fmm-neutral-900: #050c11;
  --fmm-neutral-850: #0a141b;
  --fmm-neutral-800: #111d26;
  --fmm-neutral-750: #192832;       /* = --fmm-brand-ink */
  --fmm-neutral-700: #283842;
  --fmm-neutral-600: #404f5a;
  --fmm-neutral-500: #63717a;
  --fmm-neutral-400: #89949c;
  --fmm-neutral-300: #a9b3b9;
  --fmm-neutral-200: #cbd2d7;
  --fmm-neutral-100: #e4e8eb;
  --fmm-neutral-50:  #f3f5f7;

  /* Azul [proposto] — rampa OKLCH com o matiz de #4749cf (h ≈ 275°). */
  --fmm-blue-900: #1c1e5d;
  --fmm-blue-800: #303095;
  --fmm-blue-700: #3c39bd;
  --fmm-blue-600: #4749cf;          /* = --fmm-brand-blue */
  --fmm-blue-500: #5e68e8;
  --fmm-blue-400: #7f8ef3;
  --fmm-blue-300: #9baafd;
  --fmm-blue-200: #c0cbfc;
  --fmm-blue-100: #dae5ff;

  /* Roxo [proposto, depende do roxo provisório] — matiz de #681584 (h ≈ 315°). */
  --fmm-purple-900: #43005f;
  --fmm-purple-800: #580075;
  --fmm-purple-700: #681584;        /* = --fmm-brand-purple */
  --fmm-purple-600: #8b33ab;
  --fmm-purple-500: #a44dc5;
  --fmm-purple-400: #c06ae3;
  --fmm-purple-300: #cc9be1;
  --fmm-purple-200: #e0c0ee;
  --fmm-purple-100: #f2e0fb;

  /* Estados [proposto] — fora da marca; usados só para feedback. */
  --fmm-green-400: #72d699;
  --fmm-green-600: #349d62;
  --fmm-red-400:   #ff9b93;
  --fmm-red-600:   #c8635d;
  --fmm-amber-400: #e9b452;
  --fmm-amber-600: #af7c00;

  /* ------------------------------------------------------------------
     1b. PRIMITIVOS — TIPOGRAFIA
     ------------------------------------------------------------------ */
  --fmm-font-family-brand: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fmm-font-family-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  --fmm-font-weight-regular: 400;   /* texto corrido (equivale ao Regular do manual) */
  --fmm-font-weight-medium: 500;    /* [proposto] rótulos e eyebrow */
  --fmm-font-weight-semibold: 600;  /* [proposto] idem */
  --fmm-font-weight-bold: 700;      /* títulos e destaques (equivale ao Bold do manual) */

  /* Escala fluida [proposto]. Valores min → max entre 360 px e 1440 px. */
  --fmm-font-size-display-xl: clamp(2.75rem, 1.6rem + 5.1vw, 6rem);     /* 44 → 96 */
  --fmm-font-size-display:    clamp(2.5rem, 1.75rem + 3.3vw, 4.5rem);   /* 40 → 72 */
  --fmm-font-size-h1:         clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);  /* 34 → 56 */
  --fmm-font-size-h2:         clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);   /* 28 → 40 */
  --fmm-font-size-h3:         clamp(1.5rem, 1.4rem + 0.45vw, 1.875rem); /* 24 → 30 */
  --fmm-font-size-h4:         1.375rem;  /* 22 — ≥ 1.29× o corpo de 17 */
  --fmm-font-size-lead:       clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21 */
  --fmm-font-size-body:       1.0625rem; /* 17 */
  --fmm-font-size-body-sm:    0.9375rem; /* 15 */
  --fmm-font-size-caption:    0.8125rem; /* 13 */
  --fmm-font-size-eyebrow:    0.875rem;  /* 14 */

  --fmm-line-height-tight: 1.04;
  --fmm-line-height-heading: 1.12;
  --fmm-line-height-snug: 1.3;
  --fmm-line-height-body: 1.6;

  --fmm-letter-spacing-display: -0.035em;
  --fmm-letter-spacing-heading: -0.02em;
  --fmm-letter-spacing-body: 0;
  --fmm-letter-spacing-eyebrow: 0.08em;  /* inspirado no espaçamento da assinatura “softwares · sites · apps” */

  --fmm-measure-body: 68ch;   /* largura máxima de parágrafo */
  --fmm-measure-lead: 56ch;

  /* ------------------------------------------------------------------
     1c. PRIMITIVOS — ESPAÇO, GRID, FORMA, MOVIMENTO  [proposto]
     ------------------------------------------------------------------ */
  --fmm-space-0: 0;
  --fmm-space-0-5: 0.125rem; /* 2 */
  --fmm-space-1: 0.25rem;    /* 4 */
  --fmm-space-2: 0.5rem;     /* 8 */
  --fmm-space-3: 0.75rem;    /* 12 */
  --fmm-space-4: 1rem;       /* 16 */
  --fmm-space-5: 1.25rem;    /* 20 */
  --fmm-space-6: 1.5rem;     /* 24 */
  --fmm-space-8: 2rem;       /* 32 */
  --fmm-space-10: 2.5rem;    /* 40 */
  --fmm-space-12: 3rem;      /* 48 */
  --fmm-space-16: 4rem;      /* 64 */
  --fmm-space-20: 5rem;      /* 80 */
  --fmm-space-24: 6rem;      /* 96 */
  --fmm-space-32: 8rem;      /* 128 */
  --fmm-space-40: 10rem;     /* 160 */

  /* Breakpoints (referência; CSS custom properties não funcionam em @media):
     sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */
  --fmm-bp-sm: 480px;
  --fmm-bp-md: 768px;
  --fmm-bp-lg: 1024px;
  --fmm-bp-xl: 1280px;
  --fmm-bp-2xl: 1440px;

  --fmm-container-max: 1200px;                       /* largura útil do conteúdo */
  --fmm-container-wide: 1360px;                      /* hero e vitrines de projeto */
  --fmm-container-pad: clamp(1rem, 0.4rem + 3vw, 3rem); /* 16 → 48 */
  --fmm-grid-columns: 4;                              /* 4 · 8 (md) · 12 (lg) */
  --fmm-grid-gutter: 1rem;                            /* 16 · 24 (md) · 32 (lg) */

  --fmm-radius-xs: 6px;
  --fmm-radius-sm: 10px;
  --fmm-radius-md: 14px;
  --fmm-radius-lg: 20px;
  --fmm-radius-xl: 28px;
  --fmm-radius-pill: 999px;

  --fmm-border-width: 1px;
  --fmm-border-width-strong: 1.5px;
  --fmm-focus-width: 2px;
  --fmm-focus-offset: 3px;

  --fmm-duration-instant: 80ms;
  --fmm-duration-fast: 140ms;
  --fmm-duration-base: 220ms;
  --fmm-duration-slow: 360ms;
  --fmm-duration-reveal: 640ms;
  --fmm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --fmm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fmm-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --fmm-reveal-distance: 20px;

  --fmm-z-base: 0;
  --fmm-z-raised: 10;
  --fmm-z-sticky: 100;
  --fmm-z-header: 200;
  --fmm-z-dropdown: 300;
  --fmm-z-overlay: 400;
  --fmm-z-toast: 500;

  /* ------------------------------------------------------------------
     2. SEMÂNTICOS — TEMA ESCURO (padrão)  [proposto]
     ------------------------------------------------------------------ */

  /* Fundos e superfícies sólidas */
  --fmm-color-bg: var(--fmm-neutral-900);             /* página */
  --fmm-color-bg-alt: var(--fmm-neutral-850);         /* faixa alternada de seção */
  --fmm-color-surface-1: var(--fmm-neutral-850);      /* cards sólidos, campos */
  --fmm-color-surface-2: var(--fmm-neutral-800);      /* card em hover, popover sólido */
  --fmm-color-surface-3: var(--fmm-neutral-750);      /* elementos elevados; = azul-petróleo oficial */
  --fmm-color-overlay: rgba(2, 6, 8, 0.72);           /* véu atrás de diálogos e menu móvel */

  /* Vidro (glass). Sempre com fallback sólido — ver .fmm-glass */
  --fmm-glass-bg: rgba(17, 29, 38, 0.56);             /* neutral-800 a 56% */
  --fmm-glass-bg-strong: rgba(17, 29, 38, 0.92);      /* cabeçalho após rolagem, menus, toasts: texto legível mesmo sobre títulos brancos */
  --fmm-glass-fallback: var(--fmm-neutral-850);
  --fmm-glass-blur: 24px;
  --fmm-glass-saturate: 150%;
  --fmm-glass-border: rgba(255, 255, 255, 0.10);
  --fmm-glass-highlight: rgba(255, 255, 255, 0.07);   /* fio de luz no topo (inset) */

  /* Luz ambiente — só azul; opacidade máx. 0.35. Sem roxo (ver docs/DECISOES.md, v0.2). */
  --fmm-glow-blue: rgba(71, 73, 207, 0.30);
  --fmm-glow-soft: rgba(155, 170, 253, 0.12);

  /* Gradiente do manual (azul → roxo). Apenas referência documental: NÃO usar na interface (v0.2). */
  --fmm-gradient-brand: linear-gradient(135deg, var(--fmm-brand-blue) 0%, var(--fmm-brand-purple) 100%);

  /* Texto */
  --fmm-color-text: var(--fmm-neutral-50);            /* 18.0:1 no fundo */
  --fmm-color-text-secondary: var(--fmm-neutral-300); /*  9.2:1 */
  --fmm-color-text-tertiary: var(--fmm-neutral-400);  /*  6.4:1 · mín. 4.9:1 no pior fundo */
  --fmm-color-text-disabled: var(--fmm-neutral-600);  /* isento (WCAG 1.4.3), não usar p/ conteúdo */
  --fmm-color-text-on-accent: var(--fmm-brand-white); /* 6.7:1 no azul oficial */
  --fmm-color-text-accent: var(--fmm-blue-300);       /* 9.0:1 — destaque textual em azul */

  /* Links */
  --fmm-color-link: var(--fmm-blue-300);
  --fmm-color-link-hover: var(--fmm-blue-200);
  --fmm-color-link-visited: var(--fmm-blue-200);       /* site institucional: visitado não se distingue */

  /* Bordas */
  --fmm-color-border-subtle: rgba(255, 255, 255, 0.08); /* divisores */
  --fmm-color-border: rgba(255, 255, 255, 0.14);        /* cards */
  --fmm-color-border-strong: rgba(255, 255, 255, 0.24); /* hover de card */
  --fmm-color-border-control: var(--fmm-neutral-500);   /* campos: ≥ 3:1 (WCAG 1.4.11) */
  --fmm-color-border-control-hover: var(--fmm-neutral-400);

  /* Ação principal — azul oficial como preenchimento */
  --fmm-color-action: var(--fmm-blue-600);
  --fmm-color-action-hover: var(--fmm-blue-500);       /* texto branco 4.5:1 */
  --fmm-color-action-active: var(--fmm-blue-700);
  --fmm-color-action-disabled: var(--fmm-neutral-700);

  /* Ação secundária — vidro claro */
  --fmm-color-action-secondary: rgba(255, 255, 255, 0.08);
  --fmm-color-action-secondary-hover: rgba(255, 255, 255, 0.14);
  --fmm-color-action-secondary-active: rgba(255, 255, 255, 0.05);

  /* Seleção / foco */
  --fmm-color-focus: var(--fmm-blue-300);              /* 9.0:1 no fundo; anel 2px + 3px de afastamento */
  --fmm-color-selected: var(--fmm-blue-500);         /* 4.3:1 no fundo (WCAG 1.4.11); marca branca 4.5:1 */
  --fmm-color-selection-bg: rgba(155, 170, 253, 0.32); /* ::selection */

  /* Feedback */
  --fmm-color-success: var(--fmm-green-400);
  --fmm-color-success-bg: rgba(114, 214, 153, 0.10);
  --fmm-color-success-border: rgba(114, 214, 153, 0.40);
  --fmm-color-danger: var(--fmm-red-400);
  --fmm-color-danger-bg: rgba(255, 155, 147, 0.10);
  --fmm-color-danger-border: rgba(255, 155, 147, 0.45);
  --fmm-color-warning: var(--fmm-amber-400);
  --fmm-color-warning-bg: rgba(233, 180, 82, 0.10);
  --fmm-color-warning-border: rgba(233, 180, 82, 0.40);
  --fmm-color-info: var(--fmm-blue-300);
  --fmm-color-info-bg: rgba(155, 170, 253, 0.10);
  --fmm-color-info-border: rgba(155, 170, 253, 0.40);

  /* Elevação (no escuro, sombra apoia; quem separa é borda + luz) */
  --fmm-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --fmm-shadow-2: 0 12px 32px -12px rgba(0, 0, 0, 0.65);
  --fmm-shadow-3: 0 32px 80px -24px rgba(0, 0, 0, 0.8);
  --fmm-shadow-glass: inset 0 1px 0 var(--fmm-glass-highlight), 0 24px 48px -24px rgba(0, 0, 0, 0.7);

  /* Tipografia semântica */
  --fmm-text-display-xl: var(--fmm-font-weight-bold) var(--fmm-font-size-display-xl) / var(--fmm-line-height-tight) var(--fmm-font-family-brand);
  --fmm-text-display: var(--fmm-font-weight-bold) var(--fmm-font-size-display) / var(--fmm-line-height-tight) var(--fmm-font-family-brand);
  --fmm-text-h1: var(--fmm-font-weight-bold) var(--fmm-font-size-h1) / var(--fmm-line-height-heading) var(--fmm-font-family-brand);
  --fmm-text-h2: var(--fmm-font-weight-bold) var(--fmm-font-size-h2) / var(--fmm-line-height-heading) var(--fmm-font-family-brand);
  --fmm-text-h3: var(--fmm-font-weight-bold) var(--fmm-font-size-h3) / var(--fmm-line-height-snug) var(--fmm-font-family-brand);
  --fmm-text-h4: var(--fmm-font-weight-semibold) var(--fmm-font-size-h4) / var(--fmm-line-height-snug) var(--fmm-font-family-brand);
  --fmm-text-lead: var(--fmm-font-weight-regular) var(--fmm-font-size-lead) / 1.55 var(--fmm-font-family-brand);
  --fmm-text-body: var(--fmm-font-weight-regular) var(--fmm-font-size-body) / var(--fmm-line-height-body) var(--fmm-font-family-brand);
  --fmm-text-body-sm: var(--fmm-font-weight-regular) var(--fmm-font-size-body-sm) / 1.55 var(--fmm-font-family-brand);
  --fmm-text-caption: var(--fmm-font-weight-medium) var(--fmm-font-size-caption) / 1.45 var(--fmm-font-family-brand);
  --fmm-text-label: var(--fmm-font-weight-semibold) var(--fmm-font-size-body-sm) / 1.3 var(--fmm-font-family-brand);

  /* Seções */
  --fmm-section-space: clamp(5rem, 3rem + 8vw, 10rem);  /* 80 → 160 vertical */
  --fmm-header-height: 72px;
  --fmm-header-height-compact: 60px;

  /* Logo [proposto] — ver docs/LOGO.md */
  --fmm-logo-min-horizontal: 160px;  /* largura mínima com assinatura legível */
  --fmm-logo-min-vertical: 120px;
  --fmm-logo-min-symbol: 24px;
  --fmm-logo-header-width: 168px;  /* versão em duas tintas (proposta) */
}

/* Grid responsivo */
@media (min-width: 768px) {
  :root { --fmm-grid-columns: 8; --fmm-grid-gutter: 1.5rem; --fmm-header-height: 76px; }
}
@media (min-width: 1024px) {
  :root { --fmm-grid-columns: 12; --fmm-grid-gutter: 2rem; --fmm-header-height: 80px; }
}

/* Movimento reduzido: sem deslocamentos; transições quase instantâneas. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fmm-duration-fast: 1ms;
    --fmm-duration-base: 1ms;
    --fmm-duration-slow: 1ms;
    --fmm-duration-reveal: 1ms;
    --fmm-reveal-distance: 0px;
  }
}

/* Transparência reduzida: vidro vira superfície sólida. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --fmm-glass-bg: var(--fmm-glass-fallback);
    --fmm-glass-bg-strong: var(--fmm-neutral-800);
    --fmm-glow-blue: transparent;
    --fmm-glow-soft: transparent;
  }
}

/* Contraste alto do sistema: bordas mais firmes. */
@media (prefers-contrast: more) {
  :root {
    --fmm-color-text-secondary: var(--fmm-neutral-200);
    --fmm-color-text-tertiary: var(--fmm-neutral-300);
    --fmm-color-border: rgba(255, 255, 255, 0.4);
    --fmm-color-border-subtle: rgba(255, 255, 255, 0.28);
    --fmm-glass-bg: var(--fmm-neutral-850);
  }
}