/* =============================================================
   Automovve — Colors & Type Tokens
   Lifted directly from the Brand Identity v1.0 (April 2026)
   ------------------------------------------------------------- */

/* --- Webfonts ------------------------------------------------
   Manrope (sans) is the system family. Geist Mono is kept
   for eyebrows, tags and metadata — both pulled from Google Fonts.
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ============ COLOR — Primary ============ */
  --color-ink-900: #0B1020;   /* Deep Ink — primary brand */
  --color-ink-800: #121833;
  --color-ink-700: #1B2347;
  --color-ink-600: #2A3566;
  --color-ink-500: #3F4D80;

  /* ============ COLOR — Accent (action) ============ */
  --color-volt-700: #7BAA1F;
  --color-volt-600: #A8D830;
  --color-volt-500: #C6F24E;  /* Volt Lime — primary accent */
  --color-volt-400: #D6F778;
  --color-volt-200: #EDFAB6;

  /* ============ COLOR — Support / Secondary ============ */
  --color-sky-500: #3B82F6;
  --color-sky-50:  #EFF5FF;

  /* ============ COLOR — State ============ */
  --color-success:    #16A572;
  --color-success-bg: #E6F6EF;
  --color-warning:    #E8A93B;
  --color-warning-bg: #FBF1DC;
  --color-danger:     #DC4848;
  --color-danger-bg:  #FBE9E9;

  /* ============ COLOR — Neutrals (warm) ============ */
  --color-paper:    #FAFAF7;  /* Warm off-white — base surface */
  --color-surface:  #FFFFFF;
  --color-line:     #E7E7E1;
  --color-line-2:   #D9D9D1;
  --color-mute:     #6E6E66;  /* Muted text */
  --color-text:     #15151A;  /* Body text */

  /* ============ SEMANTIC — Foreground / Background ============ */
  --fg-1: var(--color-text);          /* primary text */
  --fg-2: #3A3A40;                    /* secondary text (body p) */
  --fg-3: var(--color-mute);          /* tertiary / mute */
  --fg-inverse: var(--color-paper);   /* text on dark */

  --bg-1: var(--color-paper);         /* app background */
  --bg-2: var(--color-surface);       /* card surface */
  --bg-inverse: var(--color-ink-900); /* dark surface */

  --border-1: var(--color-line);
  --border-2: var(--color-line-2);

  --accent: var(--color-volt-500);
  --accent-hover: var(--color-volt-600);
  --accent-press: var(--color-volt-700);
  --on-accent: var(--color-ink-900);  /* text on Volt fills */

  /* ============ TYPOGRAPHY — Families ============ */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ============ TYPOGRAPHY — Scale ============ */
  --fs-display: 64px;   --lh-display: 64px;   --ls-display: -0.04em;
  --fs-h1:      40px;   --lh-h1:      42px;   --ls-h1:      -0.03em;
  --fs-h2:      28px;   --lh-h2:      32px;   --ls-h2:      -0.02em;
  --fs-h3:      24px;   --lh-h3:      29px;   --ls-h3:      -0.015em;
  --fs-body:    16px;   --lh-body:    25px;   --ls-body:    0;
  --fs-caption: 13px;   --lh-caption: 18px;   --ls-caption: 0;
  --fs-mono:    13px;   --lh-mono:    18px;   --ls-mono:    0.02em;
  --fs-eyebrow: 11px;   --lh-eyebrow: 14px;   --ls-eyebrow: 0.14em;

  /* ============ TYPOGRAPHY — Weight ============ */
  --fw-regular: 400;
  --fw-medium:  500;   /* Default for headings + emphasis */
  --fw-semibold:600;
  --fw-bold:    700;

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

  /* ============ RADII ============ */
  --radius-sm:   8px;
  --radius-md:   12px;   /* default for inputs */
  --radius-lg:   16px;   /* default for cards */
  --radius-xl:   24px;   /* large surfaces */
  --radius-pill: 999px;  /* buttons, tags */

  /* ============ ELEVATION (light, blurred) ============ */
  --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.06);
  --shadow-md: 0 8px 24px -16px rgba(11, 16, 32, 0.16);
  --shadow-lg: 0 30px 80px -20px rgba(11, 16, 32, 0.35);

  /* ============ MOTION ============ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES — apply directly
   ============================================================= */
.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  text-wrap: balance;
}
.t-h1, h1.t-h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  text-wrap: balance;
}
.t-h2, h2.t-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  text-wrap: balance;
}
.t-h3, h3.t-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
  text-wrap: pretty;
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-3);
}
.t-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--fg-1);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-regular);
}