/* Carvantage design tokens
   The core UI is light and editorial, with near-black brand bands and coral
   used as a precise signal colour. */

:root {
  color-scheme: light;

  /* ---- Raw colours (from the brand kit, v3, plus a dark scale) ---- */
  --black-1: #0E1013;      /* deepest: hero, footer, brand bands */
  --graphite-0: #15181C;   /* page */
  --graphite-1: #1D2024;   /* cards and surfaces */
  --graphite: #23262B;     /* logo tile, second surface */
  --graphite-2: #2B2F34;
  --graphite-line: #3A3E44;
  --coral: #E8452A;        /* signal coral: logo corners, brackets, hairline accents */
  --coral-deep: #C2361E;
  --coral-bright: #FF6A4D; /* bright coral: buttons, links and highlights, graphite text on top (5.4:1) */
  --offwhite: #F4F4F2;
  --offwhite-2: #E6E6E3;   /* hover on off-white buttons */
  --page-grey: #EFF0F0;
  --white: #FFFFFF;
  --grey-100: #E4E6E8;
  --grey-200: #C3C6CB;
  --grey-300: #B9BDC3;
  --grey-400: #A3A7AD;
  --grey-500: #5E666E;
  --grey-600: #4C5157;
  --ink: #202327;
  --green-400: #5CC489;
  --amber-400: #F0B64A;
  --red-400: #FF7B70;
  --green-700: #236440;
  --amber-700: #8F5A00;
  --red-700: #B3261E;

  /* ---- Jobs: light editorial canvas ---- */
  --bg: var(--offwhite);
  --surface: var(--white);
  --surface-2: var(--page-grey);
  --text: var(--ink);
  --text-2: var(--grey-600);
  --text-3: var(--grey-500);
  --line: var(--grey-100);
  --line-strong: var(--grey-200);
  --accent: var(--coral-deep);
  --accent-bg: var(--coral-bright);
  --accent-ink: var(--black-1);
  --inverse: var(--ink);
  --inverse-hover: var(--black-1);
  --on-inverse: var(--offwhite);

  /* ---- Jobs: the near-black "brand" bands ---- */
  --brand: var(--black-1);
  --brand-card: var(--graphite-1);
  --brand-line: #22262B;
  --on-brand: var(--offwhite);
  --on-brand-2: var(--grey-200);
  --on-brand-3: var(--grey-400);
  --brand-accent: var(--coral-bright);

  /* ---- Jobs: states ---- */
  --ok: var(--green-700);
  --warn: var(--amber-700);
  --sold: var(--grey-500);
  --error: var(--red-700);
  --focus: var(--coral-bright);

  /* ---- Type ----
     Scale at 16px root. Body stays ~17px; display steps are a touch stronger
     than before, with separate line-heights for tight titles vs body copy. */
  --f-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Barlow", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-label: "Barlow Semi Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;
  --t-1: 0.8125rem;  /* 13px — micro caps / meta */
  --t0: 0.9375rem;   /* 15px — small UI, card meta */
  --t1: 1.0625rem;   /* 17px — body */
  --t2: 1.25rem;     /* 20px — lede / card titles */
  --t3: 1.5rem;      /* 24px — h3 / prices */
  --t4: 1.875rem;    /* 30px — section h2 floor */
  --t5: 2.25rem;     /* 36px — mid display */
  --t6: 2.75rem;     /* 44px — page h1 floor */
  --t7: 3.5rem;      /* 56px — display reference */
  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --track-display: -0.03em;
  --track-tight: -0.02em;
  --track-label: 0.1em;

  /* ---- Space (4px grid) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --s9: 48px; --s10: 64px; --s11: 80px; --s12: 96px;

  /* ---- Radius ---- */
  --r1: 3px; --r2: 6px; --r3: 8px; --r4: 12px; --r5: 16px; --r-pill: 999px;

  /* ---- Motion ---- */
  --fast: 120ms;
  --slow: 240ms;

  /* ---- Widths ---- */
  --w-narrow: 560px;
  --w-text: 860px;
  --w-page: 1248px;

  /* ---- Shadow ---- */
  --shadow: 0 2px 5px rgba(14, 16, 19, .06), 0 18px 42px rgba(14, 16, 19, .10);
}