/* tokens.css — ContractorMate look and feel. Change a value here, the whole site follows.
   Light ("graphite, signal orange and teal") is the default; dark ("graphite night shift") is the second look (toggle in header, or system setting).
   cm.css adds the shape language (hard edges, offset shadows, stripes). Variable names match the engine, so colours are mapped:
   --amber = the main call-out colour (hi-vis orange / yellow), --violet = teal, --mint = "good / working". */
:root{
  --font-display: "Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.9rem, 9vw, 6.4rem);
  --fs-h2: clamp(2.1rem, 5vw, 3.6rem);
  --fs-h3: 1.4rem;
  --fs-body: 1.125rem;
  --fs-small: .9rem;

  --gutter: 16px;
  --maxw: 1180px;
  --radius: 6px;
  --radius-sm: 4px;
  --section-y: clamp(56px, 9vw, 112px);

  --avatar-width: 232px;
  --avatar-ratio: 9 / 16;
  --avatar-right: 24px;
  --avatar-top-min: 96px;
  --avatar-bottom-gap: 24px;
  --avatar-mobile-size: 76px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .3s;
}
:root, :root[data-theme="light"]{
  --bg: #e9ecee;
  --bg-2: #dbe0e3;
  --surface: #ffffff;
  --surface-2: #f3f5f6;
  --line: #1b2127;
  --line-soft: rgba(27,33,39,.22);
  --text: #14181c;
  --muted: #3f4a54;
  --amber: #c2410c;
  --amber-ink: #ffffff;
  --mint: #0f766e;
  --violet: #0f766e;
  --warn: #b42318;
  --glow-a: rgba(194,65,12,.25);
  --glow-b: rgba(15,118,110,.20);
  --glass: rgba(255,255,255,.94);
  --shadow: 6px 6px 0 rgba(20,24,28,.88);
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg: #1b1f23;
  --bg-2: #14171a;
  --surface: #252a30;
  --surface-2: #2e353c;
  --line: #f1f3f4;
  --line-soft: rgba(241,243,244,.22);
  --text: #f1f3f4;
  --muted: #b4bec7;
  --amber: #ff6a1a;
  --amber-ink: #17110c;
  --mint: #2dd4bf;
  --violet: #2dd4bf;
  --warn: #ff7a4d;
  --glow-a: rgba(255,106,26,.25);
  --glow-b: rgba(45,212,191,.18);
  --glass: rgba(37,42,48,.95);
  --shadow: 6px 6px 0 rgba(255,106,26,.9);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#1b1f23;--bg-2:#14171a;--surface:#252a30;--surface-2:#2e353c;--line:#f1f3f4;--line-soft:rgba(241,243,244,.22);
    --text:#f1f3f4;--muted:#b4bec7;--amber:#ff6a1a;--amber-ink:#17110c;--mint:#2dd4bf;--violet:#2dd4bf;
    --warn:#ff7a4d;--glow-a:rgba(255,106,26,.25);--glow-b:rgba(45,212,191,.18);--glass:rgba(37,42,48,.95);
    --shadow:6px 6px 0 rgba(255,106,26,.9);color-scheme:dark;
  }
}
@media (min-width: 900px){
  :root{ --gutter: 32px; }
}