/* ===========================================================
   Innovative Soch — Design Tokens
   Premium agri-industrial B2B for animal feed protein ingredients
   =========================================================== */

/* SF Pro Display — for headlines, hero, display sizes */
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-Ultralight.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-UltralightItalic.otf') format('opentype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-Thin.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-ThinItalic.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-SemiboldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-Heavy.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-HeavyItalic.otf') format('opentype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SF-Pro-Display-BlackItalic.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; }

/* SF Pro Text — for body, UI copy, smaller sizes */
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-SemiboldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-Heavy.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('fonts/SF-Pro-Text-HeavyItalic.otf') format('opentype'); font-weight: 800; font-style: italic; font-display: swap; }

/* SF UI Text — legacy fallback */
@font-face { font-family: 'SF UI Text'; src: url('fonts/SFUIText-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }

/* Space Grotesk kept for tabular numerics — pairs naturally with SF Pro */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* -------------------------------------------------------
     COLOR — Brand
     ------------------------------------------------------- */
  /* Brand red — from Innovative Soch logo */
  --is-forest-900: #1A0608;        /* deep shadow */
  --is-forest-800: #B8141F;        /* PRIMARY — brand red */
  --is-forest-700: #D81E2A;        /* logo red */
  --is-forest-600: #E63946;
  --is-forest-500: #EF5563;
  --is-forest-100: #FBE4E6;        /* tint */
  --is-forest-50:  #FDF2F3;
  /* Brand black */
  --is-ink-900:    #0A0A0A;
  --is-ink-800:    #1A1A1A;        /* logo black */
  --is-ink-700:    #2A2A2A;

  --is-gold-900:   #6E5022;
  --is-gold-800:   #9A7434;
  --is-gold-700:   #B68A40;
  --is-gold-600:   #D4A24C;        /* SECONDARY — wheat gold, grain, value */
  --is-gold-500:   #DCB369;
  --is-gold-400:   #E5C68B;
  --is-gold-200:   #F2DFB8;
  --is-gold-100:   #F8ECCF;
  --is-gold-50:    #FBF5E4;

  --is-teal-700:   #0B5F58;
  --is-teal-600:   #0F766E;        /* SUCCESS / CTA accent */
  --is-teal-500:   #14938A;

  /* -------------------------------------------------------
     COLOR — Neutrals
     ------------------------------------------------------- */
  --is-slate-900:  #0F172A;        /* deepest text */
  --is-slate-800:  #1F2937;        /* HEADINGS — primary text */
  --is-slate-700:  #374151;        /* body */
  --is-slate-600:  #4B5563;        /* secondary text */
  --is-slate-500:  #6B7280;        /* tertiary, captions */
  --is-slate-400:  #9CA3AF;
  --is-slate-300:  #D1D5DB;        /* borders */
  --is-slate-200:  #E5E7EB;        /* dividers */
  --is-slate-100:  #F3F4F6;        /* subtle bg */
  --is-slate-50:   #F9FAFB;

  --is-sand-100:   #F4EFE6;        /* soft sand — section backgrounds */
  --is-sand-50:    #FAF6EE;
  --is-offwhite:   #FAFAF7;        /* default page background */
  --is-white:      #FFFFFF;

  /* -------------------------------------------------------
     COLOR — Semantic
     ------------------------------------------------------- */
  --is-bg:               var(--is-offwhite);
  --is-bg-elev:          var(--is-white);
  --is-bg-muted:         var(--is-sand-100);
  --is-bg-inverse:       var(--is-slate-800);
  --is-bg-brand:         var(--is-forest-800);
  --is-bg-brand-soft:    var(--is-forest-50);

  --is-fg:               var(--is-slate-800);     /* default body text */
  --is-fg-strong:        var(--is-slate-900);     /* headings */
  --is-fg-muted:         var(--is-slate-600);     /* secondary copy */
  --is-fg-subtle:        var(--is-slate-500);     /* captions, meta */
  --is-fg-inverse:       var(--is-offwhite);
  --is-fg-on-brand:      #F1F7F3;
  --is-fg-brand:         var(--is-forest-800);
  --is-fg-accent:        var(--is-gold-700);

  --is-border:           var(--is-slate-200);
  --is-border-strong:    var(--is-slate-300);
  --is-border-brand:     var(--is-forest-100);
  --is-border-gold:      var(--is-gold-200);

  --is-success:          var(--is-teal-600);
  --is-warning:          #B45309;
  --is-danger:           #B91C1C;
  --is-info:             #1D4ED8;

  /* -------------------------------------------------------
     TYPE — Families  (SF Pro — brand fonts, locally hosted)
     ------------------------------------------------------- */
  --is-font-display:  'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --is-font-heading:  'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --is-font-body:     'SF Pro Text', 'SF UI Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --is-font-mono:     'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace; /* numbers/stats */
  --is-font-num:      'Space Grotesk', 'SF Pro Text', system-ui, sans-serif;

  /* -------------------------------------------------------
     TYPE — Scale (modular, 1.25 ratio at the top end)
     ------------------------------------------------------- */
  --is-text-xs:    12px;
  --is-text-sm:    14px;
  --is-text-base:  16px;
  --is-text-md:    18px;
  --is-text-lg:    20px;
  --is-text-xl:    24px;
  --is-text-2xl:   30px;
  --is-text-3xl:   38px;
  --is-text-4xl:   48px;
  --is-text-5xl:   60px;
  --is-text-6xl:   76px;

  --is-leading-tight:   1.1;
  --is-leading-snug:    1.25;
  --is-leading-normal:  1.5;
  --is-leading-relaxed: 1.65;

  --is-tracking-tight:  -0.02em;
  --is-tracking-snug:   -0.01em;
  --is-tracking-normal: 0;
  --is-tracking-wide:   0.04em;
  --is-tracking-eyebrow: 0.14em;

  /* -------------------------------------------------------
     SPACING — 4px base
     ------------------------------------------------------- */
  --is-space-0:   0;
  --is-space-1:   4px;
  --is-space-2:   8px;
  --is-space-3:   12px;
  --is-space-4:   16px;
  --is-space-5:   20px;
  --is-space-6:   24px;
  --is-space-8:   32px;
  --is-space-10:  40px;
  --is-space-12:  48px;
  --is-space-16:  64px;
  --is-space-20:  80px;
  --is-space-24:  96px;
  --is-space-32:  128px;

  /* -------------------------------------------------------
     RADIUS — soft, rounded cards
     ------------------------------------------------------- */
  --is-radius-xs:   4px;
  --is-radius-sm:   8px;
  --is-radius-md:   12px;
  --is-radius-lg:   16px;   /* card default */
  --is-radius-xl:   20px;   /* large card */
  --is-radius-2xl:  28px;   /* hero panels */
  --is-radius-pill: 999px;

  /* -------------------------------------------------------
     SHADOW — subtle, layered
     ------------------------------------------------------- */
  --is-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --is-shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --is-shadow-md:  0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --is-shadow-lg:  0 12px 28px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --is-shadow-xl:  0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.08);

  --is-shadow-brand-sm: 0 4px 12px -2px rgba(15, 81, 50, 0.18);
  --is-shadow-gold-sm:  0 4px 12px -2px rgba(212, 162, 76, 0.28);
  --is-shadow-inset:    inset 0 1px 0 rgba(255, 255, 255, 0.6);

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

  /* -------------------------------------------------------
     LAYOUT
     ------------------------------------------------------- */
  --is-container:        1240px;
  --is-container-narrow: 880px;
  --is-gutter:           24px;
}

/* ===========================================================
   Base / Reset-lite
   =========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: 'cv11', 'ss01';
}

body {
  margin: 0;
  background: var(--is-bg);
  color: var(--is-fg);
  font-family: var(--is-font-body);
  font-size: var(--is-text-base);
  line-height: var(--is-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===========================================================
   Semantic type
   =========================================================== */
.is-eyebrow {
  font-family: var(--is-font-heading);
  font-size: var(--is-text-xs);
  font-weight: 600;
  letter-spacing: var(--is-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--is-forest-700);
}

.is-h1, h1.is {
  font-family: var(--is-font-display);
  font-size: clamp(40px, 5.4vw, var(--is-text-6xl));
  line-height: var(--is-leading-tight);
  letter-spacing: var(--is-tracking-tight);
  font-weight: 700;
  color: var(--is-fg-strong);
  margin: 0 0 var(--is-space-6);
  text-wrap: balance;
}

.is-h2, h2.is {
  font-family: var(--is-font-heading);
  font-size: clamp(28px, 3.4vw, var(--is-text-4xl));
  line-height: var(--is-leading-tight);
  letter-spacing: var(--is-tracking-snug);
  font-weight: 700;
  color: var(--is-fg-strong);
  margin: 0 0 var(--is-space-5);
  text-wrap: balance;
}

.is-h3, h3.is {
  font-family: var(--is-font-heading);
  font-size: var(--is-text-2xl);
  line-height: var(--is-leading-snug);
  letter-spacing: var(--is-tracking-snug);
  font-weight: 700;
  color: var(--is-fg-strong);
  margin: 0 0 var(--is-space-4);
}

.is-h4, h4.is {
  font-family: var(--is-font-heading);
  font-size: var(--is-text-xl);
  line-height: var(--is-leading-snug);
  font-weight: 600;
  color: var(--is-fg-strong);
  margin: 0 0 var(--is-space-3);
}

.is-lead {
  font-family: var(--is-font-body);
  font-size: var(--is-text-lg);
  line-height: var(--is-leading-relaxed);
  color: var(--is-fg-muted);
  text-wrap: pretty;
}

.is-p {
  font-family: var(--is-font-body);
  font-size: var(--is-text-base);
  line-height: var(--is-leading-relaxed);
  color: var(--is-fg);
  text-wrap: pretty;
}

.is-small {
  font-family: var(--is-font-body);
  font-size: var(--is-text-sm);
  line-height: var(--is-leading-normal);
  color: var(--is-fg-muted);
}

.is-num, .is-stat {
  font-family: var(--is-font-num);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: var(--is-tracking-tight);
  font-weight: 600;
  color: var(--is-fg-strong);
}

.is-stat-xl {
  font-family: var(--is-font-num);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--is-forest-800);
}

.is-code {
  font-family: var(--is-font-mono);
  font-feature-settings: 'tnum' 1;
  font-size: 0.92em;
  background: var(--is-slate-100);
  padding: 2px 6px;
  border-radius: var(--is-radius-xs);
  color: var(--is-slate-800);
}