/* =============================================================
   VI Solutions — Core tokens
   Colors & Type for Individuelle KI & IT Lösungen
   ============================================================= */

/* Fonts — Inter for UI/body, Space Grotesk as an alt display pairing.
   The logo word "solutions" is bold-rounded sans (geometric). Inter Tight
   Bold is the closest web-safe approximation. Montserrat is an accepted
   alternative per brief. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Inter+Tight:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -----------------------------------------------------------
     COLOR — Brand
     ----------------------------------------------------------- */
  --vi-black:        #000000;   /* Primary. Authority, structure. */
  --vi-orange:       #FE9436;   /* Accent. Sampled from the logo. */
  --vi-orange-600:   #F57D14;   /* Hover / press darken */
  --vi-orange-300:   #FFBA7A;   /* Subtle tint / disabled */
  --vi-orange-100:   #FFEBD6;   /* Background wash */
  --vi-white:        #FFFFFF;

  /* Neutral ramp — cool-leaning, tech-forward */
  --vi-gray-50:      #FAFAFA;
  --vi-gray-100:     #F4F4F5;
  --vi-gray-200:     #E4E4E7;
  --vi-gray-300:     #D4D4D8;
  --vi-gray-400:     #A1A1AA;
  --vi-gray-500:     #71717A;
  --vi-gray-600:     #52525B;
  --vi-gray-700:     #3F3F46;
  --vi-gray-800:     #27272A;
  --vi-gray-900:     #18181B;

  /* Semantic status */
  --vi-success:      #16A34A;
  --vi-warn:         #F59E0B;
  --vi-danger:       #DC2626;
  --vi-info:         #0284C7;

  /* -----------------------------------------------------------
     COLOR — Semantic (use these in components)
     ----------------------------------------------------------- */
  --fg-1:            var(--vi-black);      /* Primary text */
  --fg-2:            var(--vi-gray-700);   /* Body copy */
  --fg-3:            var(--vi-gray-500);   /* Meta / captions */
  --fg-disabled:     var(--vi-gray-400);
  --fg-on-dark:      var(--vi-white);
  --fg-on-accent:    var(--vi-black);      /* On orange */

  --bg-1:            var(--vi-white);      /* Page */
  --bg-2:            var(--vi-gray-50);    /* Surface */
  --bg-3:            var(--vi-gray-100);   /* Surface alt */
  --bg-inverse:      var(--vi-black);
  --bg-accent:       var(--vi-orange);
  --bg-accent-soft:  var(--vi-orange-100);

  --border-1:        var(--vi-gray-200);
  --border-2:        var(--vi-gray-300);
  --border-strong:   var(--vi-black);
  --border-accent:   var(--vi-orange);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */
  --font-sans:       'Inter', 'Inter Tight', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:    'Inter Tight', 'Inter', 'Montserrat', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* Type scale (desktop-first; reduce ~15% for mobile) */
  --fs-display-2xl: 80px;  --lh-display-2xl: 1.02;  --ls-display-2xl: -0.03em;
  --fs-display-xl:  64px;  --lh-display-xl:  1.04;  --ls-display-xl:  -0.025em;
  --fs-display-lg:  52px;  --lh-display-lg:  1.06;  --ls-display-lg:  -0.02em;
  --fs-h1:          40px;  --lh-h1:          1.1;   --ls-h1:          -0.02em;
  --fs-h2:          32px;  --lh-h2:          1.15;  --ls-h2:          -0.015em;
  --fs-h3:          24px;  --lh-h3:          1.25;  --ls-h3:          -0.01em;
  --fs-h4:          20px;  --lh-h4:          1.3;   --ls-h4:          -0.005em;
  --fs-body-lg:     18px;  --lh-body-lg:     1.55;
  --fs-body:        16px;  --lh-body:        1.6;
  --fs-body-sm:     14px;  --lh-body-sm:     1.55;
  --fs-caption:     12px;  --lh-caption:     1.4;
  --fs-eyebrow:     13px;  --lh-eyebrow:     1.2;   --ls-eyebrow: 0.14em;

  /* -----------------------------------------------------------
     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 — the logo is heavily rounded; carry that DNA
     ----------------------------------------------------------- */
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    14px;
  --radius-lg:    20px;    /* default card */
  --radius-xl:    28px;
  --radius-2xl:   40px;
  --radius-pill:  999px;   /* buttons, tags */

  /* -----------------------------------------------------------
     SHADOWS / ELEVATION
     ----------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 18px 48px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 28px 72px rgba(0, 0, 0, 0.16);
  --shadow-accent: 0 10px 30px rgba(254, 148, 54, 0.35);
  --ring-accent:   0 0 0 4px rgba(254, 148, 54, 0.25);
  --ring-focus:    0 0 0 3px rgba(0, 0, 0, 0.9);

  /* -----------------------------------------------------------
     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:    200ms;
  --dur-slow:    320ms;
}

/* =============================================================
   Semantic type classes — ready-to-use
   ============================================================= */
.vi-display-2xl {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-display-2xl);
  letter-spacing: var(--ls-display-2xl);
  color: var(--fg-1);
}
.vi-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  color: var(--fg-1);
}
.vi-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--ls-display-lg);
  color: var(--fg-1);
}
.vi-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--fg-1);
}
.vi-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--fg-1);
}
.vi-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--fg-1);
}
.vi-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-1);
}
.vi-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-2);
}
.vi-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.vi-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-2);
}
.vi-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-3);
}
.vi-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--vi-orange-600);
}
.vi-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  color: var(--fg-1);
}

/* Utility to mark the signature "solutions" orange dot */
.vi-dot::after {
  content: '';
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  border-radius: 999px;
  background: var(--vi-orange);
  margin-left: 0.08em;
  margin-bottom: 0.05em;
  vertical-align: baseline;
}