/* ============================================================
   GARANTO SOLUÇÕES FINANCEIRAS — Colors & Type Foundation
   Brand palette sampled from the logo:
     Red    #B7171A   (rgb 183,23,26)
     Ink    #2B2E2D   (rgb 43,46,45)
     White  #FFFFFF
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --garanto-red:        #B7171A;   /* primary, from logo mark      */
  --garanto-ink:        #2B2E2D;   /* near-black, from wordmark     */
  --garanto-white:      #FFFFFF;

  /* ---------- RED SCALE ---------- */
  --red-50:   #FCECEC;
  --red-100:  #F8D6D6;
  --red-200:  #EFAEAF;
  --red-300:  #E27F80;
  --red-400:  #D14B4D;
  --red-500:  #B7171A;   /* = brand red */
  --red-600:  #9E1316;   /* hover        */
  --red-700:  #7F0F12;   /* active/press */
  --red-800:  #5E0B0D;
  --red-900:  #3D0708;

  /* ---------- NEUTRAL / INK SCALE ---------- */
  --ink-950:  #1A1C1B;
  --ink-900:  #2B2E2D;   /* = brand ink */
  --ink-800:  #3C403E;
  --ink-700:  #50544F;
  --ink-600:  #6B716D;
  --ink-500:  #8A908C;
  --ink-400:  #A8ADA9;
  --ink-300:  #C7CBC8;
  --ink-200:  #E1E4E2;
  --ink-100:  #EEF0EF;
  --ink-50:   #F6F7F6;

  /* ---------- SURFACES ---------- */
  --bg-base:      #FFFFFF;
  --bg-subtle:    #F6F7F6;   /* off-white sections */
  --bg-muted:     #EEF0EF;
  --bg-inverse:   #2B2E2D;   /* dark sections      */
  --bg-inverse-2: #1A1C1B;

  /* ---------- TEXT ---------- */
  --fg1: #2B2E2D;   /* primary text    */
  --fg2: #50544F;   /* secondary text  */
  --fg3: #8A908C;   /* muted / captions*/
  --fg-on-red:   #FFFFFF;
  --fg-on-dark:  #FFFFFF;
  --fg-on-dark-2:#C7CBC8;

  /* ---------- BORDERS ---------- */
  --border-subtle:  #E1E4E2;
  --border-default: #C7CBC8;
  --border-strong:  #8A908C;
  --border-on-dark: rgba(255,255,255,.14);

  /* ---------- SEMANTIC ---------- */
  --success:     #1E8A4C;
  --success-bg:  #E6F4EC;
  --warning:     #C8881A;
  --warning-bg:  #FBF0DD;
  --danger:      #B7171A;   /* shares brand red */
  --danger-bg:   #FCECEC;
  --info:        #2B6FB0;
  --info-bg:     #E6F0F8;

  /* ---------- ACCENT (sparingly) ---------- */
  --accent-gold: #C8A04A;   /* trust / premium financial cue */

  /* ============================================================
     TYPE
     ============================================================ */
  --font-display: 'Sora', system-ui, sans-serif;     /* headings, numerals */
  --font-body:    'Manrope', system-ui, sans-serif;  /* body, UI           */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* fluid display sizes (clamp: min / pref / max) */
  --fs-display:  clamp(2.75rem, 5vw, 4.25rem); /* @kind font */
  --fs-h1:       clamp(2.25rem, 3.6vw, 3rem);  /* @kind font */
  --fs-h2:       clamp(1.75rem, 2.6vw, 2.25rem); /* @kind font */
  --fs-h3:       1.5rem;     /* @kind font */
  --fs-h4:       1.25rem;    /* @kind font */
  --fs-lead:     1.25rem;    /* @kind font */
  --fs-body:     1rem;       /* @kind font */
  --fs-sm:       0.875rem;   /* @kind font */
  --fs-xs:       0.75rem;    /* @kind font */

  --lh-tight:    1.08;       /* @kind font */
  --lh-snug:     1.25;       /* @kind font */
  --lh-normal:   1.6;        /* @kind font */

  --tracking-eyebrow: 0.14em; /* @kind font */
  --tracking-tight:  -0.02em; /* @kind font */

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(26,28,27,.06);
  --shadow-sm: 0 2px 6px rgba(26,28,27,.07);
  --shadow-md: 0 8px 20px rgba(26,28,27,.09);
  --shadow-lg: 0 18px 40px rgba(26,28,27,.12);
  --shadow-red: 0 10px 26px rgba(183,23,26,.26);

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);     /* @kind other */
  --ease-in-out: cubic-bezier(.65,.05,.36,1);  /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur: 220ms;       /* @kind other */
  --dur-slow: 420ms;  /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

p  { margin: 0; line-height: var(--lh-normal); color: var(--fg2); text-wrap: pretty; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--garanto-red);
}

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg2); }
.caption { font-size: var(--fs-sm); color: var(--fg3); }

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }