@import url("https://fonts.googleapis.com/css2?family=Anton&family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
/* ===== tokens/fonts.css ===== */
/* Webfonts. SUBSTITUTION NOTE: no font binaries were supplied with the brand assets.
   Anton stands in for the condensed heavy display face used on Garage Force of Katy
   sales decks and social graphics; Figtree stands in for the geometric grotesque used
   for body copy. Replace these @import lines with @font-face rules pointing at real
   binaries if the franchise supplies them. */



/* ===== tokens/colors.css ===== */
:root{
  /* Base — brand */
  --gf-volt:#39FF14;            /* headline / accent green from decks + social */
  --gf-volt-press:#2BD40C;
  --gf-volt-soft:rgba(57,255,20,.16);
  --gf-logo-green:#6CBE45;      /* the green inside the G mark */
  --gf-green-deep:#2A7A1C;      /* shadowed lower chevron of the mark */

  /* Base — neutrals (concrete + graphite) */
  --gf-black:#000000;
  --gf-ink:#0B0B0B;
  --gf-graphite-900:#141414;
  --gf-graphite-800:#1C1C1C;
  --gf-graphite-700:#2A2A2A;
  --gf-graphite-600:#3A3A3A;
  --gf-steel-500:#6E6E6E;
  --gf-silver-400:#9A9A9A;
  --gf-silver-300:#C2C2C2;
  --gf-concrete-200:#DEDEDE;
  --gf-concrete-100:#F1F1F1;
  --gf-white:#FFFFFF;

  /* Base — semantic hues */
  --gf-success:#3FBF4A;
  --gf-warning:#F5A623;
  --gf-danger:#E23B3B;
  --gf-info:#3B87E2;
  --gf-gold:#D4A431;            /* 5-star / award badges */
  --gf-star:#39FF14;            /* review stars render green, not gold */

  /* Semantic aliases — surfaces */
  --surface-page:var(--gf-black);
  --surface-page-alt:var(--gf-concrete-100);
  --surface-card:var(--gf-graphite-900);
  --surface-card-light:var(--gf-white);
  --surface-raised:var(--gf-graphite-800);
  --surface-input:var(--gf-graphite-800);
  --surface-overlay:rgba(0,0,0,.72);

  /* Semantic aliases — text */
  --text-strong:var(--gf-white);
  --text-body:rgba(255,255,255,.86);
  --text-muted:var(--gf-silver-400);
  --text-accent:var(--gf-volt);
  --text-on-light:var(--gf-ink);
  --text-on-light-muted:#4A4A4A;
  --text-on-volt:var(--gf-black);

  /* Semantic aliases — lines */
  --border-hairline:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.28);
  --border-on-light:rgba(0,0,0,.12);
  --border-accent:var(--gf-volt);

  /* Semantic aliases — action */
  --action-primary-bg:var(--gf-volt);
  --action-primary-fg:var(--gf-black);
  --action-primary-hover:#4DFF2E;
  --action-primary-press:var(--gf-volt-press);
  --action-secondary-bg:transparent;
  --action-secondary-fg:var(--gf-white);
  --action-danger-bg:var(--gf-danger);
  --action-disabled-bg:var(--gf-graphite-700);
  --action-disabled-fg:var(--gf-steel-500);
}


/* ===== tokens/typography.css ===== */
:root{
  --font-display:"Anton","Oswald","Arial Narrow",sans-serif;
  --font-body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* Display — always uppercase, tight, condensed */
  --type-hero:clamp(48px,6.2vw,104px);
  --type-display-1:72px;
  --type-display-2:56px;
  --type-display-3:40px;
  --type-eyebrow:14px;
  --type-section:32px;

  /* Body */
  --type-lead:22px;
  --type-body:17px;
  --type-body-sm:15px;
  --type-caption:13px;
  --type-micro:11px;

  --leading-display:0.92;
  --leading-heading:1.06;
  --leading-body:1.5;
  --leading-loose:1.65;

  --tracking-display:-0.01em;
  --tracking-eyebrow:0.22em;
  --tracking-button:0.06em;
  --tracking-body:0;

  --weight-body:400;
  --weight-body-medium:500;
  --weight-body-bold:700;
  --weight-body-black:800;
}


/* ===== tokens/spacing.css ===== */
:root{
  --space-0:0;
  --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;
  --space-10:128px;

  --gutter-page:24px;
  --gutter-page-lg:64px;
  --container-max:1240px;
  --container-narrow:720px;
  --section-y:96px;
  --section-y-tight:64px;

  --radius-none:0;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-xl:24px;
  --radius-pill:999px;

  --border-width:1px;
  --border-width-thick:2px;
  --rule-accent-width:6px;
}


/* ===== tokens/elevation.css ===== */
:root{
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --shadow-card-light:0 10px 30px rgba(0,0,0,.18);
  --shadow-volt:0 0 0 1px rgba(57,255,20,.5),0 8px 28px rgba(57,255,20,.22);
  --glow-volt-text:0 0 18px rgba(57,255,20,.35);
  --inset-hairline:inset 0 1px 0 rgba(255,255,255,.06);

  /* Protection gradient: laid over photography before white text */
  --scrim-bottom:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.85) 100%); /* @kind other */
  --scrim-left:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,0) 78%); /* @kind other */
  --scrim-flat:rgba(0,0,0,.55);
}


/* ===== tokens/motion.css ===== */
:root{
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:400ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,.5,.2,1); /* @kind other */
  --press-scale:0.98; /* @kind other */
}


/* ===== tokens/base.css ===== */
body{font-family:var(--font-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--gf-volt);text-decoration:none}
a:hover{color:var(--action-primary-hover);text-decoration:underline}
.gf-display{font-family:var(--font-display);text-transform:uppercase;line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-strong)}
.gf-eyebrow{font-family:var(--font-body);font-weight:700;font-size:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-strong)}
.gf-accent{color:var(--gf-volt)}


/* ===== styles.css ===== */