/* =====================================================================
   SPOT-ON AUTOMOTIVE DIAGNOSTICS — Colors & Type
   Source of truth — import this in any new HTML artifact.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ============ COLOR — INK (dark backgrounds, primary text) ============ */
  --ink:        #0A0B0D;   /* near-black, primary dark surface */
  --ink-2:      #14171B;   /* slightly raised dark surface */
  --ink-3:      #22272E;   /* tertiary dark / body copy on light */

  /* ============ COLOR — BONE / PAPER (light surfaces) ============ */
  --bone:       #F5F2EC;   /* warm off-white — secondary light */
  --paper:      #FAFAF7;   /* primary light surface */

  /* ============ COLOR — SIGNAL (the one accent) ============ */
  --signal:       #D62828;          /* red — the brand accent. Used sparingly. */
  --signal-deep:  #8C1818;          /* hover / pressed red */
  --signal-soft:  rgba(214,40,40,0.08); /* tinted backdrops */

  /* ============ COLOR — STEEL (greys, secondary text & borders) ============ */
  --steel:        #6B7280;
  --steel-light:  #9CA3AF;
  --line:         #E5E1D8;   /* divider on light */
  --line-dark:    #2A2E34;   /* divider on dark */

  /* ============ COLOR — LEGACY MASCOT GRADIENT (logo asset only) ============ */
  /* Use ONLY when reproducing the mascot logo. NEVER as a UI gradient. */
  --mascot-gold-light: #FBD34A;
  --mascot-gold-deep:  #E89B0E;
  --mascot-orange:     #C76A1B;

  /* ============ TYPOGRAPHY — FAMILIES ============ */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;       /* Display headings, buttons */
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif; /* Body copy */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;              /* Labels, fault codes, metadata */

  /* ============ TYPOGRAPHY — SCALE (display) ============ */
  --fs-hero:      clamp(56px, 7.5vw, 112px); /* 1.0 hero */
  --fs-display:   clamp(36px, 4vw, 56px);    /* section titles */
  --fs-display-2: clamp(28px, 3vw, 40px);    /* sub-display */
  --fs-h3:        24px;
  --fs-h4:        18px;

  /* ============ TYPOGRAPHY — SCALE (body & mono) ============ */
  --fs-lead:      17px;
  --fs-body:      15px;
  --fs-meta:      14px;
  --fs-mono-md:   12px;
  --fs-mono:      11px;
  --fs-mono-sm:   10px;
  --fs-mono-xs:    9px;

  /* ============ SPACING ============ */
  --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: 100px;
  --space-30: 120px;

  /* ============ RADIUS ============ */
  /* The brand is sharp. Most surfaces are square. */
  --radius-0: 0px;       /* default — cards, blocks */
  --radius-1: 2px;       /* subtle softening on inputs */
  --radius-pill: 999px;  /* icon circles only */

  /* ============ BORDERS ============ */
  --border-light:    1px solid var(--line);
  --border-dark:     1px solid var(--line-dark);
  --border-signal:   3px solid var(--signal);
  --border-signal-4: 4px solid var(--signal);

  /* ============ SHADOWS ============ */
  /* Used very rarely — depth comes from contrast, not blur. */
  --shadow-card:    0 1px 0 rgba(10,11,13,0.04);
  --shadow-hover:   0 12px 32px rgba(10,11,13,0.12);
  --shadow-signal:  0 0 0 8px rgba(214,40,40,0.15), 0 12px 40px rgba(0,0,0,0.4);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:   0.15s;
  --t-base:   0.25s;
  --t-slow:   0.35s;

  /* ============ LETTER SPACING ============ */
  --ls-display: -0.025em;   /* tightened headings */
  --ls-hero:    -0.035em;   /* hero — even tighter */
  --ls-mono:    0.08em;     /* monospace labels */
  --ls-mono-wide: 0.14em;   /* monospace section labels */
  --ls-mono-xwide: 0.18em;  /* small caps tags */
}

/* =====================================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply this stylesheet in any artifact to get baseline brand styling.
   ===================================================================== */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: var(--ls-display);
  line-height: 1.05;
  font-weight: 800;
  text-wrap: pretty;
}

h1 { font-size: var(--fs-hero);      font-weight: 900; line-height: 0.95; letter-spacing: var(--ls-hero); }
h2 { font-size: var(--fs-display);   font-weight: 800; }
h3 { font-size: var(--fs-display-2); font-weight: 800; }
h4 { font-size: var(--fs-h3);        font-weight: 700; }

p  { font-size: var(--fs-body); line-height: 1.55; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-3); }

/* Mono utility — for labels, codes, technical metadata */
.mono,
code, kbd, samp {
  font-family: var(--font-mono);
  letter-spacing: var(--ls-mono);
}

/* Section labels — the small red mono tag with leading rule */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--signal);
  letter-spacing: var(--ls-mono-xwide);
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--signal);
}

/* Accent italic — for the one word that pops red */
.accent { color: var(--signal); font-style: normal; }
.accent-italic { color: var(--signal); font-style: italic; }
.outline {
  -webkit-text-stroke: 1.5px currentColor;
  color: transparent;
  font-style: italic;
}