/* Vinnie web tokens v1 - from the approved redesign (vinnie-redesign-handoff/tokens.css).
   Shared by the product page (/) and the Vinnie Directory. Fonts are linked from each page's <head>. */
:root {
  /* colour: ~60% stone/white, 30% charcoal, 10% rust (main action only); copper only on charcoal */
  --rust: #C0401B;        /* main button fill, white text on it */
  --rust-hover: #9E3415;
  --rust-text: #B73C19;   /* accent text on white / stone / tint */
  --copper: #E8835C;      /* accent on charcoal only */
  --charcoal: #2E2F27;    /* text, dark bands, footer */
  --muted: #5C5D53;       /* secondary text */
  --stone: #F7F4EF;       /* page background */
  --stone-2: #EFE9DF;     /* secondary buttons, placeholders */
  --line: #E2DBCF;        /* borders */
  --tint: #FBEDE6;        /* icon wells, price tiles */
  --white: #FFFFFF;
  --chat-bg: #ECE5DA;  --chat-me: #DDF3D3;  --chat-vinnie: #FFFFFF;

  /* type */
  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --fs-hero: clamp(42px, 6vw, 76px);
  --fs-h2: clamp(32px, 4vw, 52px);
  --fs-h3: clamp(24px, 2.4vw, 30px);
  --fs-lead: clamp(20px, 2.2vw, 26px);
  --fs-body: 18px;  --fs-small: 16px;  --fs-min: 14px;

  /* layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(56px, 8vw, 112px);
  --r-pill: 999px; --r-tile: 20px; --r-card: 24px; --r-panel: 28px;
  --tap-min: 48px;  --tap-hero: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--stone); color: var(--charcoal);
       font: 400 var(--fs-body)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
img { max-width: 100%; }
a { color: var(--rust-text); }
a:hover { color: var(--rust-hover); }
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
/* responsive with no media queries: cards wrap on their own */
.grid-auto { display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap-min);
  padding: 0 24px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.btn--hero { min-height: var(--tap-hero); padding: 0 28px; font-size: 20px; }
.btn--primary { background: var(--rust); color: #fff; }
.btn--primary:hover { background: var(--rust-hover); color: #fff; }
.btn--ghost { border: 2px solid var(--charcoal); color: var(--charcoal); }
.btn--ghost:hover { background: var(--stone-2); color: var(--charcoal); }
:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.band--dark :focus-visible { outline-color: var(--copper); }