/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — AutoCheck RD
   Shared tokens and utilities. All prototypes import this file.
   DO NOT add page-specific styles here.
═══════════════════════════════════════════════════════════════ */

:root {
  /* === COLORS === */
  --primary:        #1456c8;
  --primary-dark:   #0d3d8f;
  --primary-soft:   #e8f0fd;
  --primary-light:  rgba(20, 86, 200, 0.08);
  --success:        #0a8a4f;
  --success-soft:   #e6f5ee;

  --ink:            #0f172a;
  --text:           #334155;
  --muted:          #64748b;
  --faint:          #94a3b8;

  --border:         #e2e8f0;
  --border-soft:    #eef2f7;

  --bg-white:       #ffffff;
  --bg-light:       #f8fafc;
  --bg-surface:     #f1f5f9;

  /* === TYPOGRAPHY === */
  --font-display:   'Outfit', sans-serif;
  --font-body:      'Plus Jakarta Sans', sans-serif;

  /* === SCALE === */
  --h1:    clamp(2.1rem, 4.5vw, 3.4rem);
  --h2:    clamp(1.5rem, 2.5vw, 2rem);
  --h3:    1.1rem;
  --body:  1rem;
  --small: 0.875rem;

  /* === WEIGHTS === */
  --weight-h1:   800;
  --weight-h2:   700;
  --weight-h3:   600;
  --weight-body: 400;
  --weight-bold: 600;

  /* === SPACING === */
  --hero-pad-top:    80px;
  --hero-pad-bottom: 64px;
  --section-pad:     80px 20px;
  --section-gap:     80px;

  /* === RADIUS === */
  --radius-sm:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md:    0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg:    0 12px 24px -10px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 4px rgba(20, 86, 200, 0.22);

  /* === CONTAINER === */
  --container-max: 1180px;
  --container-pad: 20px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Base elements ── */
body {
  font-family: var(--font-body);
  font-size: var(--body);
  font-weight: var(--weight-body);
  color: var(--ink);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: var(--weight-h1);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: var(--weight-h2);
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--h3);
  font-weight: var(--weight-h3);
  color: var(--ink);
  line-height: 1.4;
}

/* ── Utilities ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--section-pad);
}

.card {
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  background: var(--bg-white);
  box-shadow: var(--shadow-md);
}

.card-sm {
  border-radius: var(--radius-sm);
  padding: 24px 20px;
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
}