/* GENERATED FILE — DO NOT EDIT.
   Flattened at build time from packages/ds/src/styles/ (the single source of
   truth for design tokens, shared with the portal + staff apps).
   Edit the tokens there and re-run `npm run build -w @groundwork/marketing`. */

/* ============================================================
   AS Homes & Construction — Design System
   Global entry point. Consumers link THIS file only.
   Keep this file a list of @imports — no rules inline.
   ============================================================ */
/* ---- ./tokens/fonts.css ---- */
/* AS Homes — Webfonts
   Chosen to echo the heavy, square wordmark: Archivo (sturdy grotesque) for display,
   Hanken Grotesk for warm, legible UI/body, Spline Sans Mono for figures & quote numbers.
   Served from Google Fonts. These are intentional choices, not stand-ins. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

/* ---- ./tokens/colors.css ---- */
/* ============================================================
   AS Homes & Construction — Colour tokens
   Brand DNA: ink-black wordmark + one bright red accent (the
   roof window). Neutral cool-grey ramp carries the UI; red is
   the only chroma used for primary action & brand moments.
   ============================================================ */
:root {
  /* --- Brand red (sampled from the logo window: rgb 232,24,32) --- */
  --red-50:  #fdecec;
  --red-100: #fbd6d7;
  --red-200: #f6a9ac;
  --red-300: #f17a7f;
  --red-400: #ee4b53;
  --red-500: #e8181f;  /* BRAND RED */
  --red-600: #c8141a;  /* hover */
  --red-700: #a41116;  /* active / pressed */
  --red-800: #7d0e12;
  --red-900: #560a0d;

  /* --- Neutral ink ramp (950 = logo black) --- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fafafa;
  --neutral-50:  #f5f5f6;
  --neutral-100: #ececee;
  --neutral-200: #dcdce0;
  --neutral-300: #c3c3ca;
  --neutral-400: #9a9aa4;
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  --neutral-900: #18181b;
  --neutral-950: #0e0f11;  /* INK — logo black */

  /* --- Semantic accents (used sparingly, for status only) --- */
  --green-50:  #e7f6ee;  --green-500: #1e9e5a;  --green-600: #178049;  --green-700: #0f6238;
  --amber-50:  #fdf1dd;  --amber-500: #e8920c;  --amber-600: #c4790a;  --amber-700: #9a5f08;
  --blue-50:   #e8effb;  --blue-500:  #2563c9;  --blue-600:  #1f53aa;  --blue-700:  #18408a;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */
  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--neutral-950);
  --surface-hover:   var(--neutral-50);
  --surface-active:  var(--neutral-100);

  /* Text */
  --text-strong:   var(--neutral-950);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-on-brand: var(--neutral-0);
  --text-inverse:  var(--neutral-0);
  --text-link:     var(--red-600);

  /* Brand / primary action */
  --brand:        var(--red-500);
  --brand-hover:  var(--red-600);
  --brand-active: var(--red-700);
  --brand-tint:   var(--red-50);
  --brand-on:     var(--neutral-0);

  /* Borders & lines */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--red-500);

  /* Status — job pipeline & quote states */
  --status-lead-fg:     var(--neutral-700);  --status-lead-bg:     var(--neutral-100);
  --status-quoted-fg:   var(--blue-700);     --status-quoted-bg:   var(--blue-50);
  --status-won-fg:      var(--green-700);     --status-won-bg:     var(--green-50);
  --status-hold-fg:     var(--amber-700);     --status-hold-bg:    var(--amber-50);
  --status-complete-fg: var(--neutral-0);     --status-complete-bg: var(--neutral-800);
  --status-lost-fg:     var(--red-700);       --status-lost-bg:    var(--red-50);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(232, 24, 31, 0.28);
}

/* ---- ./tokens/typography.css ---- */
/* ============================================================
   AS Homes — Typography tokens
   Display: Archivo (heavy, square — echoes the wordmark)
   UI/Body: Hanken Grotesk (warm, legible)
   Figures: Spline Sans Mono (quote totals, line items, refs)
   ============================================================ */
:root {
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;   /* base UI */
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 46px;
  --text-6xl: 60px;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;  /* display only — the wordmark weight */

  /* Line heights */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;   /* uppercase eyebrows / labels */

  /* Semantic roles */
  --display-font:  var(--font-display);
  --heading-font:  var(--font-display);
  --body-font:     var(--font-sans);
  --label-font:    var(--font-sans);
  --figure-font:   var(--font-mono);
}

/* ---- ./tokens/layout.css ---- */
/* ============================================================
   AS Homes — Spacing, radius, shadow, layout tokens
   4px base grid. Medium radii (clean/modern, matching the site).
   ============================================================ */
:root {
  /* Spacing — 4px base */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;    /* inputs, buttons */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   16px;   /* panels, modals */
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* Shadows — soft, neutral, low-spread (modern SaaS) */
  --shadow-xs:  0 1px 2px rgba(14, 15, 17, 0.06);
  --shadow-sm:  0 1px 3px rgba(14, 15, 17, 0.08), 0 1px 2px rgba(14, 15, 17, 0.04);
  --shadow-md:  0 4px 12px rgba(14, 15, 17, 0.08), 0 2px 4px rgba(14, 15, 17, 0.04);
  --shadow-lg:  0 12px 28px rgba(14, 15, 17, 0.12), 0 4px 8px rgba(14, 15, 17, 0.05);
  --shadow-xl:  0 24px 48px rgba(14, 15, 17, 0.16);

  /* Layout */
  --sidebar-w:    248px;
  --topbar-h:     60px;
  --content-max:  1200px;
  --container-pad: 24px;

  /* Motion */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);   /* @kind other */
  --dur-fast:  120ms;   /* @kind other */
  --dur-base:  180ms;   /* @kind other */
  --dur-slow:  280ms;   /* @kind other */
}

/* ---- ./tokens/base.css ---- */
/* ============================================================
   AS Homes — Base element styles & utility primitives
   Light reset + sensible defaults so cards/kits inherit the
   brand without per-file boilerplate.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Tabular figures everywhere numbers matter */
.as-figure { font-family: var(--figure-font); font-variant-numeric: tabular-nums; }

/* Uppercase eyebrow / micro-label */
.as-eyebrow {
  font-family: var(--label-font);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

::selection { background: var(--red-500); color: #fff; }