/*
 * GarageArc public site — design tokens ("Friendly shop", November 2026).
 * Single source of truth. Text/background pairs were measured for WCAG 2.x AA.
 * Documented in TECHNICAL_SPEC.md (public Design System).
 */
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/assets/marketing/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/assets/marketing/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  /* Type: one friendly sans for everything; numbers use tabular figures */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);

  --fs-xs: .75rem;   --fs-sm: .8125rem; --fs-md: .9375rem; --fs-base: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.25rem;  --fs-2xl: 1.5rem;

  /* Brand: the logo orange leads, navy anchors */
  --brand: #FF4814;          /* the logo orange: fills, accents, large type (white on it 3.4:1, large text only) */
  --brand-fill: #FF4814;     /* buttons use the logo orange with large bold white labels */
  --brand-fill-hover: #E63C0B;
  --on-brand: #FFFFFF;
  --brand-hover: #E63C0B;
  --brand-subtle: #FFF3EB;   /* warm bands */
  --brand-border: #FFD7C2;
  --brand-ink: #B23A06;      /* orange-family text on white: 5.6:1 */

  --blue: #1D4ED8;           /* links, focus, ticks: 6.7:1 on white */
  --blue-hover: #1E40AF;
  --blue-press: #1E3A8A;
  --blue-subtle: #EEF3FF;
  --blue-border: #C7D7FE;

  --navy: #0B1F3A;           /* footer, phone frames: white 16.5:1 */
  --navy-2: #16305A;
  --on-navy: #FFFFFF;
  --on-navy-muted: #A9B8CC;  /* 8.2:1 */
  --on-navy-link: #D6DEE9;   /* 12.2:1 */

  /* Neutrals */
  --paper: #FFFFFF;
  --ground: #F5F7FB;
  --ink: #0F1B2D;            /* 17.6:1 on white */
  --ink-2: #3A4658;          /* 9.2:1 on white, 8.6:1 on ground */
  --muted: #5A6577;          /* 5.9:1 on white, 5.5:1 on ground */
  --rule: #E3E8F0;
  --rule-soft: #EEF1F6;
  --rule-strong: #C9D2DF;

  /* Status */
  --success: #15703A; --success-subtle: #E8F7EE; --success-border: #BFE8CF;
  --danger: #B91C1C;  --danger-subtle: #FEF2F2;

  /* Legacy names still read by older page CSS and inline styles */
  --accent: var(--brand-fill); --accent-hover: var(--brand-fill-hover); --accent-press: var(--brand-fill-hover);
  --on-accent: var(--on-brand); --accent-subtle: var(--brand-subtle); --accent-border: var(--brand-border);
  --accent-ink: var(--brand-ink); --link: var(--blue);
  --surface: var(--paper); --surface-2: var(--ground); --surface-3: #EDF1F7; --surface-4: #E3E8EF;
  --text: var(--ink); --text-2: var(--ink-2); --subtle: var(--muted);
  --border: var(--rule); --border-strong: var(--rule-strong);
  --inverse: var(--navy); --on-inverse: var(--on-navy); --on-inverse-muted: var(--on-navy-muted);
  --focus-ring: var(--blue);

  /* Shape, depth and layout */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 1px rgba(15, 27, 45, .04);
  --shadow-md: 0 1px 2px rgba(15, 27, 45, .06), 0 12px 32px -12px rgba(15, 27, 45, .18);
  --shadow-lg: 0 2px 4px rgba(15, 27, 45, .06), 0 30px 60px -24px rgba(15, 27, 45, .32);
  --tap-min: 44px;
  --nav-h: 72px;
  --content: 1200px;
}

::selection { background: var(--brand-border); color: var(--ink); }
html { accent-color: var(--brand); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.p-num, .pn, .p-note, .pnote, .th-p, table td, .js-n { font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button, input, select, textarea { font-family: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs);
}
:where(footer) :where(a, button):focus-visible { outline-color: #FFFFFF; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--navy); color: #FFFFFF; padding: .75rem 1rem;
  border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-md);
}
.skip-link:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}