/* ============================================================================
   EBIKESPAREPARTS — Core Design Tokens (Claude Design colors_and_type.css 1:1)
   Fontit self-hostattu erikseen (fonts.css) — @import poistettu.
   Brand: "Charged & engineered." Volt lime + machined graphite/ink + warm paper.
   ========================================================================== */

:root {
  /* BRAND — Volt (signature electric lime) */
  --volt-100: #EEFBC6;
  --volt-200: #E2F89C;
  --volt-300: #D4F46B;
  --volt-400: #C9F23F;
  --volt-500: #C2F02C;   /* primary accent */
  --volt-600: #A6D40F;   /* hover / pressed-on-light */
  --volt-700: #84AB0B;

  /* INK — warm near-black graphite (dark surfaces + primary text) */
  --ink-900: #0D0F0B;
  --ink-800: #14160F;
  --ink-700: #1D2016;
  --ink-600: #2A2E20;

  /* STEEL — warm machined neutrals */
  --steel-50:  #F6F7F2;   /* paper */
  --steel-100: #ECEEE5;
  --steel-200: #DCDFD2;
  --steel-300: #C3C8B6;
  --steel-400: #9BA28C;
  --steel-500: #6F7563;
  --steel-600: #4B5142;
  --steel-700: #33372C;
  --white: #FFFFFF;

  /* SEMANTIC STATUS */
  --success: #1F9D55;
  --success-bg: #E4F6EC;
  --warning: #E5921B;
  --warning-bg: #FCF1DC;
  --danger:  #DC3B3B;
  --danger-bg: #FBE4E4;
  --info:    #2E6BFF;     /* "spark" electric blue */
  --info-bg: #E5ECFF;

  /* SEMANTIC SURFACE & TEXT (light theme — default) */
  --bg:        var(--steel-50);
  --surface:   var(--white);
  --surface-2: var(--steel-100);
  --fg1:       var(--ink-900);
  --fg2:       var(--steel-600);
  --fg3:       var(--steel-400);
  --border:    var(--steel-200);
  --border-strong: var(--steel-300);

  --accent:    var(--volt-500);
  --accent-hover: var(--volt-600);
  --on-accent: var(--ink-900);

  --focus-ring: #6FA8FF;

  /* TYPOGRAPHY — families */
  --font-display: 'Saira', system-ui, sans-serif;
  --font-text:    'Archivo', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-display:  clamp(40px, 6vw, 72px);
  --fs-h1:       40px;
  --fs-h2:       30px;
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-xs:       12px;
  --fs-mono:     13px;

  /* RADII — tight & industrial */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* SPACING — 4px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ELEVATION — restrained, technical */
  --shadow-sm: 0 1px 2px rgba(13,15,11,.06), 0 1px 1px rgba(13,15,11,.04);
  --shadow-md: 0 4px 12px rgba(13,15,11,.08), 0 1px 3px rgba(13,15,11,.06);
  --shadow-lg: 0 18px 40px rgba(13,15,11,.14), 0 4px 10px rgba(13,15,11,.08);
  --glow-volt: 0 0 0 1px var(--volt-600), 0 6px 22px rgba(166,212,15,.45);

  --maxw: 1240px;
}

/* ==========================================================================
   BASE / SEMANTIC ELEMENT STYLES
   ========================================================================== */

.eb-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: .96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg1);
}

h1, .eb-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--fg1);
}

h2, .eb-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

h3, .eb-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--fg1);
}

h4, .eb-h4 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--fg1);
}

p, .eb-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg2);
  text-wrap: pretty;
}

.eb-sm  { font-family: var(--font-text); font-size: var(--fs-sm); line-height: 1.5; color: var(--fg2); }
.eb-caption { font-family: var(--font-text); font-size: var(--fs-xs); line-height: 1.4; color: var(--fg3); }

/* Eyebrow / kicker — small uppercase label */
.eb-kicker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-500);
}

/* Mono — part numbers, SKUs, specs, voltages */
.eb-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.01em;
  color: var(--fg1);
}

.eb-price {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }