@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

/* ===============================
   STEP CAR — Design Token System v2
   White Core + Black Depth + Orange Precision
=============================== */
:root{
  /* =========================
     FONT FAMILIES
  ========================== */
  --sc-font-family-heading: 'Oswald', sans-serif;
  --sc-font-family-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* =========================
     FONT WEIGHTS
  ========================== */
  --sc-font-weight-regular: 400;
  --sc-font-weight-medium: 500;
  --sc-font-weight-semibold: 600;
  --sc-font-weight-bold: 700;

  /* =========================
     FONT SIZES
  ========================== */
  --sc-font-size-xs: 12px;
  --sc-font-size-sm: 14px;
  --sc-font-size-md: 16px;
  --sc-font-size-lg: 18px;
  --sc-font-size-xl: 24px;
  --sc-font-size-2xl: 32px;
  --sc-font-size-3xl: 40px;
  --sc-font-size-hero: 56px;

  /* =========================
     LINE HEIGHTS
  ========================== */
  --sc-line-tight: 1.2;
  --sc-line-normal: 1.5;
  --sc-line-relaxed: 1.7;

  /* =========================
     BRAND / BACKGROUND
  ========================== */
  --sc-color-bg-primary: #FAFAFA;
  --sc-color-bg-secondary: #FFFFFF;
  --sc-color-bg-dark: #0E0E0E;
  --sc-color-bg-dark-soft: #161616;

  /* =========================
     BRAND ACCENT
  ========================== */
  --sc-color-accent: #FF9E0C;
  --sc-color-accent-hover: #E68900;
  --sc-color-accent-soft: #FFF3E0;

  /* =========================
     TEXT COLORS
  ========================== */
  --sc-color-text-primary: #111111;
  --sc-color-text-secondary: #4B5563;
  --sc-color-text-muted: #9CA3AF;
  --sc-color-text-on-dark: #FFFFFF;
  --sc-color-text-on-dark-muted: #D1D5DB;

  /* =========================
     BORDERS / DIVIDERS
  ========================== */
  --sc-color-border: #E5E7EB;
  --sc-color-border-strong: #D1D5DB;
  --sc-color-border-dark: rgba(255,255,255,0.12);

  /* =========================
     SEMANTIC COLORS
  ========================== */
  --sc-color-success: #22C55E;
  --sc-color-warning: #F59E0B;
  --sc-color-error: #EF4444;
  --sc-color-info: #3B82F6;

  /* =========================
     SPACING (8px grid)
  ========================== */
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 16px;
  --sc-space-4: 24px;
  --sc-space-5: 32px;
  --sc-space-6: 48px;
  --sc-space-7: 64px;
  --sc-space-8: 96px;

  /* =========================
     RADIUS
  ========================== */
  --sc-radius-sm: 6px;
  --sc-radius-md: 12px;
  --sc-radius-lg: 16px;
  --sc-radius-xl: 24px;
  --sc-radius-pill: 999px;

  /* =========================
     SHADOWS (light UI)
  ========================== */
  --sc-shadow-soft: 0 4px 16px rgba(0,0,0,0.05);
  --sc-shadow-medium: 0 8px 24px rgba(0,0,0,0.08);
  --sc-shadow-strong: 0 12px 40px rgba(0,0,0,0.12);

  /* =========================
     TRANSITIONS
  ========================== */
  --sc-transition-fast: 0.15s ease;
  --sc-transition-normal: 0.25s ease;
  --sc-transition-slow: 0.40s ease;

  /* =========================
     LAYOUT
  ========================== */
  --sc-container-max: 1200px;
  --sc-container-narrow: 960px;
  --sc-header-height: 80px;
  --sc-header-bg: #0F0F12;
  --sc-header-text: #FAFAFA;
  --sc-header-border-width: 0px;

  /* =========================
     COMPONENT TOKENS: BUTTONS
  ========================== */
  --sc-btn-height: 52px;
  --sc-btn-radius: var(--sc-radius-md);

  --sc-btn-primary-bg: var(--sc-color-accent);
  --sc-btn-primary-text: #FFFFFF;
  --sc-btn-primary-hover-bg: var(--sc-color-accent-hover);

  --sc-btn-secondary-bg: transparent;
  --sc-btn-secondary-text: var(--sc-color-text-primary);
  --sc-btn-secondary-border: var(--sc-color-border-strong);
  --sc-btn-secondary-hover-bg: rgba(17,17,17,0.04);

  /* =========================
     COMPONENT TOKENS: INPUTS
  ========================== */
  --sc-input-height: 48px;
  --sc-input-radius: var(--sc-radius-md);
  --sc-input-bg: #FFFFFF;
  --sc-input-text: var(--sc-color-text-primary);
  --sc-input-placeholder: #9CA3AF;
  --sc-input-border: var(--sc-color-border);
  --sc-input-border-hover: #D1D5DB;
  --sc-input-border-focus: var(--sc-color-accent);
  --sc-input-focus-ring: 0 0 0 3px rgba(255,158,12,0.15);

  /* =========================
     COMPONENT TOKENS: CARDS
  ========================== */
  --sc-card-radius: var(--sc-radius-lg);
  --sc-card-light-bg: var(--sc-color-bg-secondary);
  --sc-card-light-text: var(--sc-color-text-primary);
  --sc-card-light-border: rgba(17,17,17,0.06);
  --sc-card-light-shadow: var(--sc-shadow-soft);
  --sc-card-dark-bg: var(--sc-color-bg-dark);
  --sc-card-dark-text: var(--sc-color-text-on-dark);
  --sc-card-dark-muted: var(--sc-color-text-on-dark-muted);
  --sc-card-dark-border: rgba(255,255,255,0.10);
  --sc-card-dark-shadow: 0 12px 40px rgba(0,0,0,0.35);

  /* =========================
     COMPONENT TOKENS: BADGES / PILLS
  ========================== */
  --sc-badge-radius: var(--sc-radius-pill);
  --sc-badge-padding-y: 6px;
  --sc-badge-padding-x: 10px;
  --sc-badge-success-bg: rgba(34,197,94,0.12);
  --sc-badge-success-text: #16A34A;
  --sc-badge-warning-bg: rgba(245,158,11,0.14);
  --sc-badge-warning-text: #B45309;
  --sc-badge-error-bg: rgba(239,68,68,0.14);
  --sc-badge-error-text: #B91C1C;

  /* =========================
     STEP / PROGRESS
  ========================== */
  --sc-step-bg: rgba(255,158,12,0.14);
  --sc-step-border: rgba(255,158,12,0.35);
  --sc-step-active-bg: var(--sc-color-accent);
  --sc-step-active-text: #111111;
  --sc-step-inactive-text: var(--sc-color-text-muted);

  /* =========================
     LEGACY MAPPINGS
  ========================== */
  --sc-bg: var(--sc-color-bg-primary);
  --sc-accent: var(--sc-color-accent);
  --sc-text: var(--sc-color-text-primary);
  --sc-muted: var(--sc-color-text-secondary);
  --sc-card-bg: var(--sc-card-light-bg);
  --sc-card-text: var(--sc-card-light-text);
  --sc-card-border: var(--sc-card-light-border);
  --sc-card-shadow: var(--sc-card-light-shadow);
  --sc-primary: var(--sc-color-bg-dark);
  --sc-hero-dark: #141414;
  --sc-hero-dark-2: #1a1a1a;
  --sc-hero-radius: 34px;
}

/* =========================
   GLOBAL USAGE RULES
========================== */
body{
  font-family: var(--sc-font-family-base);
  font-size: var(--sc-font-size-md);
  font-weight: var(--sc-font-weight-regular);
  line-height: var(--sc-line-normal);
}

h1{
  font-family: var(--sc-font-family-heading);
  font-size: var(--sc-font-size-hero);
  font-weight: var(--sc-font-weight-semibold);
  letter-spacing: 0.5px;
  line-height: var(--sc-line-tight);
}

h2{
  font-family: var(--sc-font-family-heading);
  font-size: var(--sc-font-size-2xl);
  font-weight: var(--sc-font-weight-medium);
  letter-spacing: 0.4px;
}

h3{
  font-family: var(--sc-font-family-heading);
  font-size: var(--sc-font-size-xl);
  font-weight: var(--sc-font-weight-medium);
}

button,
.sc-cta{
  font-family: var(--sc-font-family-base);
  font-weight: var(--sc-font-weight-semibold);
  font-size: var(--sc-font-size-md);
  text-transform: none;
}

.sc-dark{
  background: var(--sc-color-bg-dark);
  color: var(--sc-color-text-on-dark);
}

/* =========================
   Base safety (avoid horizontal scroll)
========================== */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

img{
  height: auto;
  max-width: 100%;
}