/* ============================================================
   MGF — tokens de marca
   GERADO POR tools/extract_tokens.py — NÃO EDITAR À MÃO.
   Fonte de verdade: `MGF Design System - completo.html`.
   Para alterar um token, altere o design system e rode:
       python tools/extract_tokens.py
   ============================================================ */

/* ============================================================
   MGF Consultoria Financeira — Color tokens
   Palette is intentionally tiny: navy + white dominate,
   gold is a pointed accent. Never set body copy in gold.
   ============================================================ */

:root {
  /* ---- Brand base palette ---- */
  --mgf-navy: #111A2D;          /* primary — deep navy, dark surfaces & text on light */
  --mgf-white: #FFFFFF;         /* base — negative space, light surfaces */
  --mgf-gold: #E1B024;          /* accent — fine lines, dividers, icons, hero numerals */

  /* ---- Navy ramp (atmospheric depth, never neon) ---- */
  --mgf-navy-900: #0B1320;      /* deepest — vignette, footer wells */
  --mgf-navy-800: #111A2D;      /* canonical navy */
  --mgf-navy-700: #1A2540;      /* raised navy surface / card on navy */
  --mgf-navy-600: #243152;      /* hairline borders on navy, hover wells */
  --mgf-navy-500: #3A4866;      /* muted navy line */

  /* ---- Gold ramp (gold-leaf, bronze → light leaf — never flat yellow) ---- */
  --mgf-gold-bronze: #A67C1A;   /* darkest leaf — shadow side of a gradient */
  --mgf-gold-deep: #C69320;     /* deep gold */
  --mgf-gold: #E1B024;          /* canonical gold */
  --mgf-gold-light: #EBC85A;    /* light leaf — highlight side of a gradient */
  --mgf-gold-pale: #F4E3B0;     /* palest — gold tint on light, faint fills */

  /* Gold-leaf gradient — use for fine rules, numerals, metallic detail */
  --mgf-gold-leaf: linear-gradient(135deg, #A67C1A 0%, #E1B024 38%, #F4E3B0 60%, #C69320 100%); /* @kind color */
  --mgf-gold-leaf-h: linear-gradient(90deg, #A67C1A 0%, #E1B024 45%, #EBC85A 70%, #C69320 100%); /* @kind color */

  /* ---- Warm support neutrals (old-whisky leather / amber, used sparingly) ---- */
  --mgf-whisky-900: #3A2A18;    /* deep matte leather */
  --mgf-whisky-700: #6E5230;    /* aged caramel */
  --mgf-whisky-500: #9A7A4E;    /* worn amber */
  --mgf-whisky-200: #E6D8C2;    /* faint parchment */
  --mgf-cream: #FBF8F1;         /* warm off-white paper */

  /* ---- Cool neutrals on light ---- */
  --mgf-ink-700: #2A3144;       /* softened navy for long body copy */
  --mgf-ink-500: #5A6175;       /* secondary text on light */
  --mgf-ink-300: #9AA0AE;       /* tertiary / captions */
  --mgf-line-200: #E4E6EB;      /* hairline border on light */
  --mgf-line-100: #F1F2F5;      /* faint fill / track on light */

  /* ============================================================
     Semantic aliases — author against THESE in components
     ============================================================ */

  /* Surfaces */
  --surface-base: var(--mgf-white);
  --surface-cream: var(--mgf-cream);
  --surface-card: var(--mgf-white);
  --surface-inverse: var(--mgf-navy-800);
  --surface-inverse-raised: var(--mgf-navy-700);
  --surface-inverse-well: var(--mgf-navy-900);

  /* Text on light */
  --text-strong: var(--mgf-navy-800);
  --text-body: var(--mgf-ink-700);
  --text-muted: var(--mgf-ink-500);
  --text-faint: var(--mgf-ink-300);

  /* Text on navy */
  --text-on-inverse: var(--mgf-white);
  --text-on-inverse-muted: #B4BCCB;
  --text-on-inverse-faint: #6E768A;

  /* Accent */
  --accent: var(--mgf-gold);
  --accent-deep: var(--mgf-gold-deep);
  --accent-soft: var(--mgf-gold-pale);
  --accent-leaf: var(--mgf-gold-leaf); /* @kind color */

  /* Lines & borders */
  --border-on-light: var(--mgf-line-200);
  --border-on-inverse: var(--mgf-navy-600);
  --rule-accent: var(--mgf-gold);

  /* Focus ring */
  --focus-ring: rgba(225, 176, 36, 0.55);
}

/* ============================================================
   MGF Consultoria Financeira — Typography tokens
   Display: Playfair Display (titles, covers, dividers only)
   Body:    Raleway (Medium/Regular for prose; ExtraLight only
            for large numerals / oversized decorative words)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Weights ---- */
  --fw-display-regular: 400; /* @kind font */
  --fw-display-medium: 500; /* @kind font */
  --fw-display-semibold: 600; /* @kind font */
  --fw-display-bold: 700; /* @kind font */

  --fw-extralight: 200; /* @kind font */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Type scale (rem, 16px base) ---- */
  --fs-display-1: 4.5rem;   /* 72px — cover hero */
  --fs-display-2: 3.5rem;   /* 56px — section opener */
  --fs-h1: 2.75rem;         /* 44px */
  --fs-h2: 2rem;            /* 32px — slide title floor */
  --fs-h3: 1.5rem;          /* 24px */
  --fs-h4: 1.25rem;         /* 20px */
  --fs-lead: 1.375rem;      /* 22px — standfirst */
  --fs-body: 1.0625rem;     /* 17px */
  --fs-body-sm: 0.9375rem;  /* 15px */
  --fs-caption: 0.8125rem;  /* 13px */
  --fs-overline: 0.75rem;   /* 12px — small-caps labels */

  /* ---- Line heights ---- */
  --lh-tight: 1.08; /* @kind other */
  --lh-snug: 1.25; /* @kind other */
  --lh-body: 1.65; /* @kind other */
  --lh-relaxed: 1.8; /* @kind other */

  /* ---- Letter-spacing ---- */
  --ls-display: -0.01em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.08em; /* @kind other */
  --ls-overline: 0.22em; /* @kind other */
}

/* ============================================================
   MGF Consultoria Financeira — Spacing & layout tokens
   Generous negative space is a brand value ("respiro").
   8px base rhythm.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Layout ---- */
  --content-max: 1200px; /* @kind spacing */
  --prose-max: 68ch;     /* @kind other */
  --gutter: var(--space-6); /* @kind spacing */
  --gutter-lg: var(--space-9); /* @kind spacing */

  /* ---- Radii — restrained, editorial. Sharp corners read as classic. ---- */
  --radius-0: 0;          /* default for blocks, dividers, cover frames */
  --radius-sm: 2px;       /* inputs, tags */
  --radius-md: 4px;       /* buttons, cards */
  --radius-lg: 8px;       /* large surfaces, dialogs */
  --radius-pill: 999px;   /* avatars, status dots only */

  /* ---- Border widths ---- */
  --bw-hair: 1px; /* @kind spacing */
  --bw-1: 1.5px; /* @kind spacing */
  --bw-2: 2px; /* @kind spacing */
}

/* ============================================================
   MGF Consultoria Financeira — Effects: shadows, motion, layers
   Shadows are soft and low — "luxo silencioso", never harsh.
   Motion is calm: gentle fades and short eases, no bounce.
   ============================================================ */

:root {
  /* ---- Elevation (light surfaces) — soft, diffuse, navy-tinted ---- */
  --shadow-xs: 0 1px 2px rgba(17, 26, 45, 0.05);
  --shadow-sm: 0 2px 8px rgba(17, 26, 45, 0.06);
  --shadow-md: 0 6px 24px rgba(17, 26, 45, 0.08);
  --shadow-lg: 0 18px 48px rgba(17, 26, 45, 0.12);
  --shadow-card: 0 1px 3px rgba(17, 26, 45, 0.06), 0 8px 28px rgba(17, 26, 45, 0.07);

  /* ---- On navy: a faint warm gold glow instead of black shadow ---- */
  --shadow-on-navy: 0 18px 50px rgba(0, 0, 0, 0.45);
  --glow-gold: 0 0 0 1px rgba(225, 176, 36, 0.18), 0 8px 30px rgba(225, 176, 36, 0.10);

  /* ---- Atmospheric backgrounds (subtle, never poster-bright) ---- */
  --vignette-navy: radial-gradient(120% 90% at 50% 18%, #1A2540 0%, #111A2D 48%, #0B1320 100%); /* @kind color */
  --wash-cream: linear-gradient(180deg, #FFFFFF 0%, #FBF8F1 100%); /* @kind color */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);          /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-base: 240ms;   /* @kind other */
  --dur-slow: 420ms;   /* @kind other */

  /* ---- Z-index ladder ---- */
  --z-base: 0;        /* @kind other */
  --z-raised: 10;     /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-overlay: 1000;  /* @kind other */
  --z-toast: 1100;    /* @kind other */
}

/* ============================================================
   MGF Consultoria Financeira — base layer
   Light primitives that ride on the tokens. Not a reset framework.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-display-semibold);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); }

p { margin: 0 0 var(--space-4); max-width: var(--prose-max); text-wrap: pretty; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Small-caps overline — the brand's signature label treatment */
.mgf-overline {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Fine gold rule — the recurring divider motif */
.mgf-rule {
  height: var(--bw-hair);
  border: 0;
  background: var(--mgf-gold-leaf-h);
  width: 64px;
  margin: var(--space-5) 0;
}
.mgf-rule--full { width: 100%; }

/* Selection */
::selection { background: var(--mgf-gold-pale); color: var(--mgf-navy-800); }