/* ============================================================
   INTERFIBRAS — Design Tokens (Colors & Type)
   Rebrand 2026 · keeps original brand hues (blue / yellow / orange)
   Sampled from logo: blue #6B87BC · subtitle #53668D
                      yellow #FFC62B · orange #F68933 · gray #858789
   ============================================================ */

/* ---- Fonts (Google Fonts substitution — see README VISUAL FOUNDATIONS) ---- */
@import url('vendor/fonts.css');

:root {
  /* ---------------------------------------------------------
     BRAND — PRIMARY BLUE (trust, fiber, connectivity)
     anchored on the logo's cornflower petal & subtitle navy
     --------------------------------------------------------- */
  --blue-50:  #EEF3FB;
  --blue-100: #D8E3F5;
  --blue-200: #B3C7EA;
  --blue-300: #8AA8DC;
  --blue-400: #6B87BC;   /* logo petal */
  --blue-500: #4A6FB5;   /* PRIMARY */
  --blue-600: #3A5A9C;
  --blue-700: #2E4A82;
  --blue-800: #233A66;
  --blue-900: #1A2C4E;   /* ink navy — dark sections */

  /* ---------------------------------------------------------
     BRAND — YELLOW (energy, speed, optimism) — CTA highlight
     --------------------------------------------------------- */
  --yellow-100: #FFF3CC;
  --yellow-200: #FFE799;
  --yellow-300: #FFD862;
  --yellow-400: #FFD24D;
  --yellow-500: #FFC62B;  /* PRIMARY YELLOW */
  --yellow-600: #F2B016;
  --yellow-700: #D69708;

  /* ---------------------------------------------------------
     BRAND — ORANGE (warmth, momentum) — yellow's gradient partner
     --------------------------------------------------------- */
  --orange-300: #FCC18A;
  --orange-400: #FBA04F;
  --orange-500: #F68933;  /* PRIMARY ORANGE */
  --orange-600: #E5731D;
  --orange-700: #C75E12;

  /* ---------------------------------------------------------
     NEUTRALS — anchored on wordmark gray #858789 (cool-neutral)
     --------------------------------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F7F9;
  --neutral-100: #EDEFF2;
  --neutral-200: #DEE2E8;
  --neutral-300: #C4CAD3;
  --neutral-400: #9AA1AC;
  --neutral-500: #767D88;  /* ≈ wordmark gray */
  --neutral-600: #585F6B;
  --neutral-700: #3E444E;
  --neutral-800: #272C34;
  --neutral-900: #14181E;

  /* ---------------------------------------------------------
     SEMANTIC — surfaces & text
     --------------------------------------------------------- */
  --bg:          var(--neutral-0);
  --bg-subtle:   var(--neutral-50);
  --bg-muted:    var(--neutral-100);
  --bg-inverse:  var(--blue-900);
  --surface:     var(--neutral-0);
  --surface-raised: var(--neutral-0);

  --fg:          var(--neutral-900);   /* primary text */
  --fg-secondary:var(--neutral-600);   /* supporting text */
  --fg-muted:    var(--neutral-400);   /* hints, captions */
  --fg-on-brand: #FFFFFF;
  --fg-on-yellow:var(--blue-900);      /* dark ink on yellow CTAs */

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --ring:          var(--blue-500);

  /* brand semantic aliases */
  --primary:        var(--blue-500);
  --primary-hover:  var(--blue-600);
  --primary-press:  var(--blue-700);
  --accent:         var(--yellow-500);
  --accent-hover:   var(--yellow-600);
  --accent-2:       var(--orange-500);

  /* status */
  --success: #2E9E6B;
  --success-bg: #E3F4EC;
  --warning: var(--orange-500);
  --warning-bg: #FDEEDD;
  --error: #D7424B;
  --error-bg: #FBE7E8;
  --info: var(--blue-500);
  --info-bg: var(--blue-50);

  /* ---------------------------------------------------------
     SIGNATURE GRADIENTS (from the logo's petal blends)
     --------------------------------------------------------- */
  --grad-energy: linear-gradient(100deg, var(--yellow-500) 0%, var(--orange-500) 100%);
  --grad-brand:  linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
  --grad-ink:    linear-gradient(160deg, var(--blue-800) 0%, var(--blue-900) 100%);
  --grad-spark:  linear-gradient(120deg, var(--blue-500) 0%, var(--blue-400) 45%, var(--yellow-500) 100%);

  /* ---------------------------------------------------------
     TYPOGRAPHY
     Display/Headings: Sora · Body/UI: Manrope
     --------------------------------------------------------- */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* fluid type scale (1.250 major-third-ish, tightened) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  3.75rem;   /* 60 */
  --text-5xl:  4.75rem;   /* 76 */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal:1.55;
  --leading-relaxed:1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.10em;  /* eyebrows / labels */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extra:   800;

  /* ---------------------------------------------------------
     SPACING (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; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* ---------------------------------------------------------
     RADII — soft, echoing the logo's lens/leaf curvature
     --------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------
     ELEVATION — soft, cool-tinted shadows (blue undertone)
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(26,44,78,0.06);
  --shadow-sm: 0 2px 6px rgba(26,44,78,0.07);
  --shadow-md: 0 8px 20px rgba(26,44,78,0.10);
  --shadow-lg: 0 18px 40px rgba(26,44,78,0.14);
  --shadow-xl: 0 28px 64px rgba(26,44,78,0.18);
  --shadow-yellow: 0 12px 28px rgba(246,137,51,0.30);
  --shadow-blue:   0 12px 28px rgba(74,111,181,0.28);

  --transition-fast: 120ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 200ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 360ms cubic-bezier(0.22,1,0.36,1); /* gentle ease-out */
}

/* ============================================================
   SEMANTIC TYPE PRESETS
   ============================================================ */
.ds-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--primary);
}
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
.ds-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg);
}
.ds-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}
.ds-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.ds-small {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}
.ds-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--fg);
}