/* =========================================================================
   EXACT BR — COLORS & TYPE
   Brazilian financial/strategic consulting for SMBs.
   Aesthetic: dark-mode professional, sober, premium consulting.
   ========================================================================= */

/* ---- Webfonts ------------------------------------------------------------
   - Inter: local variable fonts (brand-supplied .ttf in /fonts/).
   - Plus Jakarta Sans + JetBrains Mono: still served via Google Fonts;
     swap to local files when brand assets are supplied.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
/* JetBrains Mono kept on CDN (utility only, not a brand pillar). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- BRAND COLORS ---------------------------------------------------- */
  /* Primary signature: near-black background. Used as the canvas of the brand. */
  --exact-ink:           #080A0C;   /* signature background — quase preto */
  --exact-ink-2:         #0F1316;   /* one step up, for elevated surfaces */
  --exact-ink-3:         #161B1F;   /* card/panel background on dark */
  --exact-ink-4:         #1F252A;   /* hover / pressed on dark surfaces  */

  /* Accent: Exact orange. Strategic, never saturated, never decorative. */
  --exact-orange:        #F17522;   /* primary accent — CTAs, key data    */
  --exact-orange-hover:  #FF8638;   /* +brightness for hover              */
  --exact-orange-press:  #D6601A;   /* darker for active/pressed          */
  --exact-orange-soft:   #F1752214; /* 8% tint background                 */
  --exact-orange-line:   #F1752266; /* 40% for accent borders/grid emphasis */

  /* Light mode (alternative surface) */
  --exact-paper:         #FFFFFF;
  --exact-paper-2:       #FAFAF9;
  --exact-paper-3:       #F4F4F2;

  /* ---- NEUTRAL SCALE (cool grays on dark) ------------------------------ */
  --gray-50:  #F5F6F7;
  --gray-100: #E6E8EA;
  --gray-200: #C9CED3;
  --gray-300: #A2A9B0;
  --gray-400: #767D84;
  --gray-500: #525960;
  --gray-600: #383E44;
  --gray-700: #262B30;
  --gray-800: #181C20;
  --gray-900: #0E1115;

  /* ---- SEMANTIC FOREGROUND (on dark) ---------------------------------- */
  --fg-1:                #F5F6F7;   /* primary text, headings              */
  --fg-2:                #C9CED3;   /* secondary body / labels             */
  --fg-3:                #767D84;   /* tertiary, captions, hints           */
  --fg-4:                #525960;   /* disabled / decorative               */
  --fg-accent:           var(--exact-orange);

  /* ---- SEMANTIC FOREGROUND (on light) --------------------------------- */
  --fg-1-on-light:       #080A0C;
  --fg-2-on-light:       #383E44;
  --fg-3-on-light:       #767D84;

  /* ---- SURFACES ------------------------------------------------------- */
  --bg-canvas:           var(--exact-ink);
  --bg-elevated:         var(--exact-ink-2);
  --bg-card:             var(--exact-ink-3);
  --bg-hover:            var(--exact-ink-4);

  /* ---- LINES & DIVIDERS ----------------------------------------------- */
  --line-1:              rgba(255,255,255,0.06);   /* hairline divider     */
  --line-2:              rgba(255,255,255,0.10);   /* card border          */
  --line-3:              rgba(255,255,255,0.16);   /* emphasized border    */
  --line-accent:         var(--exact-orange-line);
  --line-on-light:       rgba(8,10,12,0.10);

  /* ---- DATA-VIZ semantics (financial) --------------------------------- */
  --data-positive:       #4FC38A;   /* receita, ganhos                     */
  --data-negative:       #E5484D;   /* despesas, perdas                    */
  --data-neutral:        #C9CED3;   /* baseline / total                    */
  --data-highlight:      var(--exact-orange); /* dado-chave em destaque    */
  --grid-line:           rgba(255,255,255,0.06);

  /* ---- TYPOGRAPHY: families ------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-number:  'Plus Jakarta Sans', system-ui, sans-serif;  /* dados numéricos */

  /* ---- TYPE SCALE — semantic role variables --------------------------- */
  /* Display (capas, números grandes) */
  --t-display-size:     96px;
  --t-display-line:     1.02;
  --t-display-weight:   700;
  --t-display-tracking: -0.03em;

  /* H1 — section openers */
  --t-h1-size:          56px;
  --t-h1-line:          1.06;
  --t-h1-weight:        700;
  --t-h1-tracking:      -0.025em;

  /* H2 — slide titles */
  --t-h2-size:          40px;
  --t-h2-line:          1.12;
  --t-h2-weight:        700;
  --t-h2-tracking:      -0.02em;

  /* H3 — sub-section */
  --t-h3-size:          28px;
  --t-h3-line:          1.2;
  --t-h3-weight:        600;
  --t-h3-tracking:      -0.015em;

  /* H4 — card headings */
  --t-h4-size:          20px;
  --t-h4-line:          1.3;
  --t-h4-weight:        600;
  --t-h4-tracking:      -0.01em;

  /* Eyebrow / overline */
  --t-eyebrow-size:     12px;
  --t-eyebrow-line:     1.2;
  --t-eyebrow-weight:   600;
  --t-eyebrow-tracking: 0.14em;

  /* Body */
  --t-body-size:        16px;
  --t-body-line:        1.55;
  --t-body-weight:      400;
  --t-body-tracking:    0;

  /* Body small */
  --t-body-sm-size:     14px;
  --t-body-sm-line:     1.5;
  --t-body-sm-weight:   400;

  /* Caption */
  --t-caption-size:     12px;
  --t-caption-line:     1.45;
  --t-caption-weight:   400;

  /* KPI / big number */
  --t-kpi-size:         72px;
  --t-kpi-line:         1.0;
  --t-kpi-weight:       700;
  --t-kpi-tracking:     -0.03em;

  /* Table data (tabular-nums numbers) */
  --t-data-size:        14px;
  --t-data-line:        1.4;
  --t-data-weight:      500;

  /* ---- SPACING -------------------------------------------------------- */
  --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:  96px;
  --space-10: 128px;

  /* ---- RADII ---------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;     /* default for cards, buttons; sober, not friendly */
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- SHADOWS / ELEVATION ------------------------------------------- */
  /* Dark UI rarely uses shadows; emphasis comes from surface + border.   */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.35),
              0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-accent-glow: 0 0 0 1px rgba(241,117,34,0.32),
                        0 8px 28px rgba(241,117,34,0.18);

  /* ---- MOTION --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================================
   BASE & SEMANTIC ELEMENT STYLES
   ========================================================================== */

html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Theme switch — light surface mode */
.theme-light {
  background: var(--exact-paper);
  color: var(--fg-1-on-light);
  --bg-canvas: var(--exact-paper);
  --bg-card: var(--exact-paper-2);
  --bg-hover: var(--exact-paper-3);
  --fg-1: var(--fg-1-on-light);
  --fg-2: var(--fg-2-on-light);
  --fg-3: var(--fg-3-on-light);
  --line-1: rgba(8,10,12,0.06);
  --line-2: rgba(8,10,12,0.10);
  --line-3: rgba(8,10,12,0.18);
  --grid-line: rgba(8,10,12,0.06);
}

/* ---- Headings ----------------------------------------------------------- */
h1, .t-h1, h2, .t-h2, h3, .t-h3, h4, .t-h4, .t-display, .t-kpi {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.t-display {
  font-size: var(--t-display-size);
  line-height: var(--t-display-line);
  font-weight: var(--t-display-weight);
  letter-spacing: var(--t-display-tracking);
}
h1, .t-h1 {
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-line);
  font-weight: var(--t-h1-weight);
  letter-spacing: var(--t-h1-tracking);
}
h2, .t-h2 {
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-line);
  font-weight: var(--t-h2-weight);
  letter-spacing: var(--t-h2-tracking);
}
h3, .t-h3 {
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-line);
  font-weight: var(--t-h3-weight);
  letter-spacing: var(--t-h3-tracking);
}
h4, .t-h4 {
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-line);
  font-weight: var(--t-h4-weight);
  letter-spacing: var(--t-h4-tracking);
}

.t-kpi {
  font-size: var(--t-kpi-size);
  line-height: var(--t-kpi-line);
  font-weight: var(--t-kpi-weight);
  letter-spacing: var(--t-kpi-tracking);
  font-variant-numeric: tabular-nums;
}

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow-size);
  font-weight: var(--t-eyebrow-weight);
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-weight: var(--t-body-weight);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.t-body-sm {
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-line);
  color: var(--fg-2);
}

.t-caption {
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  color: var(--fg-3);
}

.t-data {
  font-family: var(--font-body);
  font-size: var(--t-data-size);
  line-height: var(--t-data-line);
  font-weight: var(--t-data-weight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.t-num {
  font-family: var(--font-number);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Accent text — use sparingly */
.t-accent { color: var(--exact-orange); }

/* Links */
a {
  color: var(--exact-orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: var(--exact-orange); }

/* ---- Utility selection -------------------------------------------------- */
::selection { background: var(--exact-orange); color: #fff; }