/* ============================================================
   FALCHET E MARQUES — DESIGN TOKENS
   Sobriedade moderna · Humanização · Azul como acento
   ============================================================ */

/* ---------- Fonts ---------- */
/* Gotham is proprietary — use the .otf files bundled in /fonts for
   internal prototypes, slides, brand materials. For the live web
   product (Next.js), Gotham must be licensed per-domain or replaced
   with Montserrat (Google Fonts), which shares geometric proportions
   and renders very close at the display & body weights we use. */

@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Thin.otf")          format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-ThinItalic.otf")    format("opentype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-ExtraLight.otf")    format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-ExtraLightItalic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Light.otf")         format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Book.otf")          format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Italic.otf")        format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Medium.otf")        format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Bold.otf")          format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-BoldItalic.otf")    format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Black.otf")         format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham-Ultra.otf")         format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

/* Web fallback stack — Montserrat on Google Fonts is the closest
   open-source substitute for Gotham. Load in HTML head when needed:
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> */

:root {
  /* ============================================================
     COLOR — Brand palette (from Manual de Marca, 2021)
     ============================================================ */

  /* Core brand — logomarca é monocromática */
  --fm-black:         #000000;   /* Pantone Black 6 C */
  --fm-white:         #FFFFFF;
  --fm-gray-dark:     #808384;   /* PMS Cool Grey 8 C */
  --fm-gray-light:    #D1D9DB;   /* PMS 7541 C */
  --fm-blue:          #141E96;   /* Pantone 286 C — cor de destaque */

  /* Neutrals — extended ramp derived from the brand grays.
     Use sparingly; the brand stays near the endpoints. */
  --fm-ink-950:       #0A0A0B;
  --fm-ink-900:       #141416;
  --fm-ink-800:       #1F2023;
  --fm-ink-700:       #3A3C3F;
  --fm-ink-600:       #5C5F62;
  --fm-ink-500:       #808384;   /* = gray-dark */
  --fm-ink-400:       #9FA3A5;
  --fm-ink-300:       #B8BEC0;
  --fm-ink-200:       #D1D9DB;   /* = gray-light */
  --fm-ink-100:       #E6EBEC;
  --fm-ink-50:        #F4F6F7;
  --fm-ink-25:        #FAFBFB;

  /* Blue accent — usar com parcimônia, só em destaques/CTAs/links */
  --fm-blue-900:      #0B1063;
  --fm-blue-800:      #0F1780;
  --fm-blue-700:      #141E96;   /* = fm-blue — valor oficial */
  --fm-blue-600:      #2330B0;
  --fm-blue-500:      #3A48C6;
  --fm-blue-100:      #E4E6F4;
  --fm-blue-50:       #F1F2FA;

  /* Semantic — derived so they coexist with the sober neutral base.
     Success/warning/error only appear in alerts/forms, never in marketing. */
  --fm-success:       #1F7A55;
  --fm-success-bg:    #E8F3EE;
  --fm-warning:       #B97407;
  --fm-warning-bg:    #FBF1E0;
  --fm-error:         #B3261E;
  --fm-error-bg:      #FBEAE9;
  --fm-info:          #141E96;  /* info usa o próprio azul institucional */
  --fm-info-bg:       #E4E6F4;

  /* Área-de-atuação tags — um tom de azul por vertical, para
     distinguir conteúdo sem introduzir cores novas. Imobiliário é
     o azul institucional; as outras são variações sutis dele. */
  --fm-area-imob:     #141E96;
  --fm-area-empr:     #0B1063;
  --fm-area-suc:      #3A48C6;

  /* ---------- Semantic foreground / background ---------- */
  --fg-primary:       var(--fm-ink-900);
  --fg-secondary:     var(--fm-ink-700);
  --fg-muted:         var(--fm-ink-500);
  --fg-subtle:        var(--fm-ink-400);
  --fg-inverse:       var(--fm-white);
  --fg-accent:        var(--fm-blue-700);
  --fg-link:          var(--fm-blue-700);

  --bg-page:          var(--fm-white);
  --bg-surface:       var(--fm-white);
  --bg-raised:        var(--fm-ink-25);
  --bg-sunken:        var(--fm-ink-50);
  --bg-inverse:       var(--fm-black);
  --bg-accent:        var(--fm-blue-700);
  --bg-accent-soft:   var(--fm-blue-50);

  --border-subtle:    var(--fm-ink-100);
  --border-default:   var(--fm-ink-200);
  --border-strong:    var(--fm-ink-400);
  --border-focus:     var(--fm-blue-700);

  /* ============================================================
     TYPE
     ============================================================ */
  --font-sans: "Gotham", "Montserrat", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights — a marca valoriza os extremos (finos elegantes + bolds de impacto) */
  --fw-thin:    100;  /* @kind font */
  --fw-light:   300;  /* @kind font */
  --fw-book:    400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-black:   800;  /* @kind font */

  /* Type scale — modular, ~1.2 ratio. Body mínimo 16px (WCAG AA). */
  --fs-overline: 12px;   /* UPPERCASE, letter-spacing alto */
  --fs-caption:  13px;
  --fs-small:    14px;
  --fs-body:     16px;
  --fs-body-lg:  18px;
  --fs-h6:       18px;
  --fs-h5:       20px;
  --fs-h4:       24px;
  --fs-h3:       32px;
  --fs-h2:       44px;
  --fs-h1:       64px;
  --fs-display:  88px;

  /* Line heights — mais alto no body para leitura fluida */
  --lh-tight:    1.05;   /* @kind font */ /* display, H1 */
  --lh-snug:     1.15;   /* @kind font */ /* H2–H4 */
  --lh-normal:   1.35;   /* @kind font */ /* H5–H6, leads */
  --lh-relaxed:  1.6;    /* @kind font */ /* body */
  --lh-loose:    1.75;   /* @kind font */ /* artigo long-form */

  /* Letter-spacing — Gotham é geométrica; títulos grandes pedem aperto,
     labels pequenas em caixa alta pedem abertura. */
  --ls-display:  -0.02em;  /* @kind font */
  --ls-tight:    -0.01em;  /* @kind font */
  --ls-normal:   0;        /* @kind font */
  --ls-wide:     0.08em;   /* @kind font */
  --ls-wider:    0.14em;   /* @kind font */ /* overline / tagline estilo logomarca */

  /* ============================================================
     SPACING — base 8px
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADII — 2–4px mantém a sobriedade. Evitar pill/arredondados grandes.
     ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;   /* raro — cards maiores */
  --radius-lg:   8px;   /* usar só em modais / e-books */
  --radius-pill: 999px; /* exclusivo para badges de área */

  /* ============================================================
     ELEVATION — sombras muito sutis. A marca é clean.
     ============================================================ */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-sm:    0 1px 3px rgba(10, 10, 11, 0.06), 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-md:    0 4px 12px rgba(10, 10, 11, 0.06), 0 2px 4px rgba(10, 10, 11, 0.04);
  --shadow-lg:    0 12px 32px rgba(10, 10, 11, 0.08), 0 4px 8px rgba(10, 10, 11, 0.04);
  --shadow-focus: 0 0 0 3px rgba(20, 30, 150, 0.28);

  /* ============================================================
     MOTION — discreto, funcional. Nada de bounce teatral.
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-narrow: 720px;   /* artigo de blog */
  --container-base:   1120px;  /* padrão institucional */
  --container-wide:   1280px;  /* marketing full */
  --grid-gutter:      24px;  /* @kind spacing */
  --grid-columns:     12;    /* @kind other */

  /* Breakpoints (exposed as vars for reference — use in @media below) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* ============================================================
   SEMANTIC TYPE UTILITIES — classes ready to drop into markup
   ============================================================ */

body, .fm-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-book);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.fm-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.fm-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

.fm-h2, h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.fm-h3, h3 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

.fm-h4, h4 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.fm-h5, h5 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
}

.fm-h6, h6 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h6);
  line-height: var(--lh-normal);
}

.fm-lead {
  font-weight: var(--fw-light);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.fm-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}

.fm-small, small {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

.fm-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* Overline — UPPERCASE com tracking amplo, ecoa a tagline "SOCIEDADE DE ADVOGADOS"
   que aparece na logomarca. Usado em eyebrow labels, categorias, metadados. */
.fm-overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fm-tagline {
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

a, .fm-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
a:hover, .fm-link:hover { border-bottom-color: currentColor; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--fm-blue-700);
  color: var(--fm-white);
}