/* =============================================================
   Kraken Commerce — Colors & Type
   Source: krakencommerce.com home + brand wallpaper SVG
   Fonts are Google-Fonts substitutions; flagged in README.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Brand color ramp ---------- */
  /* Primary purple, sampled from the brand wallpaper background (#68189C). */
  --kraken-purple-900: #2F0A47;
  --kraken-purple-800: #46106B;
  --kraken-purple-700: #58148A;
  --kraken-purple-600: #68189C;   /* core brand purple */
  --kraken-purple-500: #7B22B5;
  --kraken-purple-400: #9447CC;
  --kraken-purple-300: #B073DD;
  --kraken-purple-200: #D2A8EA;
  --kraken-purple-100: #ECD7F6;
  --kraken-purple-050: #F7EDFB;

  /* Accent — magenta/pink curved shield from the hero. */
  --kraken-magenta:    #D6209A;
  --kraken-magenta-light: #F06EBE;

  /* Accent — yellow curved shield from the hero. */
  --kraken-yellow:     #FFC619;
  --kraken-yellow-light: #FFE07A;

  /* ---------- Neutrals ---------- */
  --neutral-000: #FFFFFF;
  --neutral-050: #F7F7F8;   /* page section bg (Services panel on home) */
  --neutral-100: #EDEEF0;
  --neutral-200: #DCDEE2;
  --neutral-300: #B8BCC4;
  --neutral-400: #8A8F99;
  --neutral-500: #5E636E;
  --neutral-600: #3F434B;
  --neutral-700: #2A2D33;
  --neutral-800: #1A1C20;
  --neutral-900: #0E0F12;

  /* ---------- Semantic surface + text ---------- */
  --bg-canvas:        var(--neutral-000);
  --bg-subtle:        var(--neutral-050);
  --bg-muted:         var(--neutral-100);
  --bg-inverse:       var(--kraken-purple-600);
  --bg-inverse-deep:  var(--kraken-purple-800);

  --fg-default:       var(--neutral-800);   /* body */
  --fg-muted:         var(--neutral-500);   /* secondary copy */
  --fg-subtle:        var(--neutral-400);   /* meta, labels */
  --fg-on-inverse:    var(--neutral-000);
  --fg-link:          var(--kraken-purple-600);
  --fg-link-hover:    var(--kraken-purple-700);

  --border-default:   var(--neutral-200);
  --border-strong:    var(--neutral-300);

  /* ---------- Semantic status (derived to fit the purple/magenta/yellow palette) ---------- */
  --status-success:   #2E8B57;
  --status-warning:   #B8860B;
  --status-danger:    #B0223C;
  --status-info:      var(--kraken-purple-600);

  /* ---------- Type families ---------- */
  /* SUBSTITUTIONS: production should use Kraken's licensed faces.
     Web inspection suggests a serif very close to Source Serif (hero) and
     a humanist sans close to Source Sans (UI). Adjust if licensed files arrive. */
  --font-sans:    "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Source Serif 4", "Georgia", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Source Serif 4", "Georgia", serif;
  --font-wordmark: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; /* heavy weight, tight tracking */

  /* ---------- Type scale (rem) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* ---------- Line heights ---------- */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

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

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --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 — Kraken is mostly squared. Buttons are rectangular. ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;   /* buttons */
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- Shadows — used sparingly; the brand is flat. ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 13, 25, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 13, 25, 0.08);
  --shadow-md: 0 6px 20px rgba(15, 13, 25, 0.10);
  --shadow-lg: 0 18px 50px rgba(47, 10, 71, 0.18);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 880px;
}

/* =============================================================
   Semantic typography classes — drop-in headings/body
   The home hero uses serif for a single oversized statement.
   Section h2s ("Services", "Interactive Parts Finder") use sans.
   Body copy is sans, ~16px, generous line-height.
   ============================================================= */

.k-hero-statement {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(2.25rem, 4.4vw, 3.75rem); /* 36 → 60 */
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--fg-on-inverse);
  text-wrap: balance;
}

.k-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-default);
}

.k-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-default);
}

.k-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}

.k-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}

.k-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kraken-purple-600);
}

.k-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-default);
}

.k-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-default);
}

.k-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.k-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}

.k-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
.k-link:hover { color: var(--fg-link-hover); }

.k-code,
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.k-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}