/* ------------------------------------------------------------------
   Flipper Hub — Foundations (Colors & Type)
   Sampled from the product: SaaS web app, Inter typeface,
   bright friendly blue primary (#3A82F6), very light off-white canvas,
   generous rounded corners, flat cards with 1px soft borders.
   ------------------------------------------------------------------ */

/* ---------- Type ---------- */
/* Inter — local TTFs (optical sizes: 18pt for UI ≤16px, 24pt for display/KPIs).
   Google Fonts import kept as a fallback in case the relative font paths fail. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400;
  src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500;
  src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600;
  src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700;
  src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800;
  src: url('fonts/Inter_18pt-ExtraBold.ttf') format('truetype'); font-display: swap; }
/* Display optical size — use via font-family: 'Inter Display' for headlines ≥20px */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500;
  src: url('fonts/Inter_24pt-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600;
  src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700;
  src: url('fonts/Inter_24pt-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 800;
  src: url('fonts/Inter_24pt-ExtraBold.ttf') format('truetype'); font-display: swap; }

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
               Monaco, 'Liberation Mono', monospace;

  /* Type scale (rem, 16px base) */
  --fs-xs:   0.75rem;   /* 12 — meta, timestamps */
  --fs-sm:   0.8125rem; /* 13 — secondary labels */
  --fs-base: 0.875rem;  /* 14 — default body in app chrome */
  --fs-md:   1rem;      /* 16 — primary content */
  --fs-lg:   1.125rem;  /* 18 — emphasized body */
  --fs-xl:   1.375rem;  /* 22 — card titles */
  --fs-2xl:  1.75rem;   /* 28 — greetings, page titles */
  --fs-3xl:  2.125rem;  /* 34 — KPI numbers */
  --fs-4xl:  2.75rem;   /* 44 — hero */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --lts-tight:   -0.02em;
  --lts-snug:    -0.01em;
  --lts-normal:  0;
  --lts-wide:    0.02em;
  --lts-caps:    0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ------------------------------------------------------------------
     Marketing display scale — fluid clamp() tokens.
     Use these in marketing pages (Home, Sobre, Plataforma, Preços, Conteúdo).
     The .fh-h*, --fs-* tokens above are for app/UI chrome (smaller scale).
     ------------------------------------------------------------------ */
  --t-display-xl: clamp(48px, 6.2vw, 84px);  /* Hero H1, statements de impacto */
  --t-display-lg: clamp(36px, 4.4vw, 56px);  /* Section H2 (dobras principais) */
  --t-display-md: clamp(28px, 3.2vw, 40px);  /* Sub-section H2, dobras secundárias */
  --t-display-sm: clamp(22px, 2.2vw, 28px);  /* Card title h3, pull-quotes */
  --t-display-xs: 20px;                       /* Card subtitle, callouts */

  /* Body — marketing */
  --t-lede:     clamp(17px, 1.3vw, 20px);     /* Lede após H1 */
  --t-body-lg:  17px;                          /* Body em dobras grandes */
  --t-body:     15px;                          /* Body padrão em cards */
  --t-body-sm:  13px;                          /* Meta, labels longos */
  --t-eyebrow:  12px;                          /* Eyebrow / 01 · Etc */
}

/* ---------- Brand ---------- */
:root {
  /* Primary — Flipper blue (sampled from the logo) */
  --brand-50:  #EFF5FF;
  --brand-100: #DCE9FE;
  --brand-200: #BCD5FD;
  --brand-300: #8FB7FB;
  --brand-400: #6090F8;
  --brand-500: #3A82F6;  /* ← primary */
  --brand-600: #2A6FE0;
  --brand-700: #1F58BC;
  --brand-800: #1C4897;
  --brand-900: #1C3E79;

  /* Accent — Flipper Coins gold (the sidebar badge) */
  --coin-50:   #FFF9E6;
  --coin-100:  #FEEDB0;
  --coin-300:  #F6CE5A;
  --coin-500:  #E0A828;   /* ← coin gold */
  --coin-700:  #8A6410;

  /* Chart secondary (violet seen in donut chart) */
  --accent-violet-300: #B38FE6;
  --accent-violet-500: #7A4FC7;
}

/* ---------- Neutrals (off-white canvas + warm-cool slate) ---------- */
:root {
  --white: #FFFFFF;
  --neutral-0:  #FFFFFF;
  --neutral-25: #FAFBFC;  /* app canvas */
  --neutral-50: #F5F7FA;
  --neutral-100:#EEF1F5;
  --neutral-150:#E4E8EE;  /* card/divider border */
  --neutral-200:#D7DCE3;
  --neutral-300:#B8C0CC;
  --neutral-400:#8E97A4;
  --neutral-500:#6B7482;
  --neutral-600:#4D5562;
  --neutral-700:#353B46;
  --neutral-800:#242932;
  --neutral-900:#14181F;
}

/* ---------- Semantic ---------- */
:root {
  /* Surface */
  --bg-canvas:     var(--neutral-25);   /* main app background */
  --bg-surface:    var(--white);        /* cards */
  --bg-surface-2:  var(--neutral-50);   /* subdued surface (nested) */
  --bg-muted:      var(--neutral-100);  /* input bg, hover row */
  --bg-hover:      var(--neutral-50);   /* row hover */
  --bg-active:     var(--brand-50);     /* selected nav item bg */
  --bg-overlay:    rgba(20, 24, 31, 0.48);

  /* Foreground */
  --fg-strong:  var(--neutral-900);     /* headings */
  --fg-default: var(--neutral-800);     /* body */
  --fg-muted:   var(--neutral-500);     /* secondary */
  --fg-subtle:  var(--neutral-400);     /* meta/labels */
  --fg-disabled:var(--neutral-300);
  --fg-on-brand:var(--white);
  --fg-link:    var(--brand-600);

  /* Borders */
  --border-subtle: var(--neutral-150);
  --border-default:var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus:  var(--brand-500);

  /* Status */
  --success-50:  #E6F7EE;
  --success-500: #12B76A;
  --success-700: #027A48;

  --warn-50:    #FFF6E6;
  --warn-500:   #F59E0B;
  --warn-700:   #B45309;

  --danger-50:  #FEECEC;
  --danger-500: #EF4444;
  --danger-700: #B42318;

  --info-50:    var(--brand-50);
  --info-500:   var(--brand-500);

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* Shadows (subtle, product is flat) */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 4px -1px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 12px 24px -4px rgba(16, 24, 40, 0.10);
  --shadow-ring-brand: 0 0 0 3px rgba(58, 130, 246, 0.22);
  --shadow-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.22);

  /* Spacing scale (4px base) */
  --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;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ---------- Semantic Type (ready-to-use classes) ---------- */

.fh-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--lts-tight);
  color: var(--fg-strong);
}
.fh-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--lts-snug);
  color: var(--fg-strong);
}
.fh-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
.fh-kpi {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--lts-tight);
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}
.fh-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-default);
}
.fh-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-default);
}
.fh-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}
.fh-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
}
.fh-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--lts-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.fh-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}