/* Timber — design system (brand #ff7304, walnut #ae5725)
 * Generated from design/homepage.png by scripts/build-timber-design.mjs.
 * Injected as `designCss` ahead of every template's own CSS.
 * Variable names follow the canonical token vocabulary (TOKEN_VAR_DOC).
 * Mobile-first: base styles target ~360px, breakpoints add up from there.
 */
:root {
  color-scheme: light;

  /* ---- tonal ramps ------------------------------------------------------ */
  --color-primary-50: #fff7f0;
  --color-primary-100: #ffebdc;
  --color-primary-200: #ffd8b9;
  --color-primary-300: #ffbc87;
  --color-primary-400: #ff9745;
  --color-primary-500: #ff7304;
  --color-primary-600: #d96306;
  --color-primary-700: #b25308;
  --color-primary-800: #87410a;
  --color-primary-900: #5c2f0b;

  --color-secondary-50: #f1f1f1;
  --color-secondary-100: #dddddd;
  --color-secondary-200: #bcbcbc;
  --color-secondary-300: #8c8c8c;
  --color-secondary-400: #4d4d4d;
  --color-secondary-500: #0f0f0f;
  --color-secondary-600: #0f0f0f;
  --color-secondary-700: #0f0f0f;
  --color-secondary-800: #0f0f0f;
  --color-secondary-900: #0f0f0f;

  --color-neutral-50: #fafafa;
  --color-neutral-100: #f4f4f5;
  --color-neutral-200: #e4e4e7;
  --color-neutral-300: #d4d4d8;
  --color-neutral-400: #a1a1aa;
  --color-neutral-500: #71717a;
  --color-neutral-600: #52525b;
  --color-neutral-700: #3f3f46;
  --color-neutral-800: #27272a;
  --color-neutral-900: #18181b;

  --color-accent-50: #faf5f2;
  --color-accent-100: #f4e7e0;
  --color-accent-200: #e8d0c2;
  --color-accent-300: #d8ae96;
  --color-accent-400: #c3835e;
  --color-accent-500: #ae5725;
  --color-accent-600: #954b21;
  --color-accent-700: #7b401e;
  --color-accent-800: #5f331a;
  --color-accent-900: #422616;

  --color-success-50: #f1f9f5;
  --color-success-100: #def2e7;
  --color-success-200: #bde5ce;
  --color-success-300: #8dd2ab;
  --color-success-400: #50b97e;
  --color-success-500: #12a150;
  --color-success-600: #128a46;
  --color-success-700: #11723b;
  --color-success-800: #115830;
  --color-success-900: #103e24;

  --color-warning-50: #fef9f0;
  --color-warning-100: #fcf2db;
  --color-warning-200: #f8e5b8;
  --color-warning-300: #f3d285;
  --color-warning-400: #edb942;
  --color-warning-500: #e6a100;
  --color-warning-600: #c48a02;
  --color-warning-700: #a17205;
  --color-warning-800: #7b5808;
  --color-warning-900: #543e0a;

  --color-error-50: #fdf2f2;
  --color-error-100: #fae2e0;
  --color-error-200: #f4c4c1;
  --color-error-300: #ed9a94;
  --color-error-400: #e3645a;
  --color-error-500: #d92d20;
  --color-error-600: #b9281d;
  --color-error-700: #98231b;
  --color-error-800: #741e18;
  --color-error-900: #501914;

  --color-info-50: #f1fafe;
  --color-info-100: #ddf2fc;
  --color-info-200: #bce6f9;
  --color-info-300: #8bd4f4;
  --color-info-400: #4dbcef;
  --color-info-500: #0ea5e9;
  --color-info-600: #0e8dc6;
  --color-info-700: #0e75a3;
  --color-info-800: #0f5a7c;
  --color-info-900: #0f3f55;

  /* ---- role aliases (soft = background, strong = text drawn on it) ------- */
  --color-primary: var(--color-primary-500);
  --color-primary-on: #0f0f0f;
  --color-primary-container: #ffebdc;
  --color-primary-on-container: #5c2f0b;
  --color-primary-soft: #f0d9c7;
  --color-primary-strong: #87410a;

  --color-secondary: var(--color-secondary-500);
  --color-secondary-on: #ffffff;
  --color-secondary-container: #dddddd;
  --color-secondary-on-container: #0f0f0f;
  --color-secondary-soft: #c9c9c9;
  --color-secondary-strong: #0f0f0f;

  --color-neutral: var(--color-neutral-500);
  --color-neutral-on: #ffffff;
  --color-neutral-container: #f4f4f5;
  --color-neutral-on-container: #18181b;
  --color-neutral-soft: #d9d8da;
  --color-neutral-strong: #52525b;

  --color-accent: var(--color-accent-500);
  --color-accent-on: #ffffff;
  --color-accent-container: #f4e7e0;
  --color-accent-on-container: #422616;
  --color-accent-soft: #e3d4cc;
  --color-accent-strong: #7b401e;

  --color-success: var(--color-success-500);
  --color-success-on: #0f0f0f;
  --color-success-container: #def2e7;
  --color-success-on-container: #103e24;
  --color-success-soft: #cae0d3;
  --color-success-strong: #115830;

  --color-warning: var(--color-warning-500);
  --color-warning-on: #0f0f0f;
  --color-warning-container: #fcf2db;
  --color-warning-on-container: #543e0a;
  --color-warning-soft: #ece0c6;
  --color-warning-strong: #7b5808;

  --color-error: var(--color-error-500);
  --color-error-on: #ffffff;
  --color-error-container: #fae2e0;
  --color-error-on-container: #501914;
  --color-error-soft: #eacdcb;
  --color-error-strong: #98231b;

  --color-info: var(--color-info-500);
  --color-info-on: #0f0f0f;
  --color-info-container: #ddf2fc;
  --color-info-on-container: #0f3f55;
  --color-info-soft: #c9e1ec;
  --color-info-strong: #0f5a7c;

  /* ---- semantic surfaces ------------------------------------------------ */
  --surface: #edecec;
  --surface-card: #ffffff;
  --surface-muted: #f4f4f5;
  --text: #0f0f0f;
  --text-muted: #52525b;
  --border-subtle: #d4d4d8;

  /* ---- typography ------------------------------------------------------- */
  /* Urbanist is a VARIABLE font (100..900): any weight is real, none synthesized. */
  --font-heading: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-display-lg: clamp(4.8125rem, 2.231rem + 11.474vw, 16rem);
  --text-display: clamp(2.625rem, 1.788rem + 3.718vw, 6.25rem);
  --text-headline: clamp(2.3125rem, 1.577rem + 3.269vw, 5.5rem);
  --text-title: clamp(1.25rem, 0.846rem + 1.795vw, 3rem);
  --text-subtitle: clamp(1.375rem, 1.288rem + 0.385vw, 1.75rem);
  --text-body: 1.25rem;
  --text-label: 1rem;
  --leading-display-lg: 1;
  --leading-display: 1.1;
  --leading-headline: 1.1;
  --leading-title: 1.1;
  --leading-subtitle: 1.3;
  --leading-body: 1.6;
  --leading-label: 1.4;
  --weight-display-lg: 700;
  --weight-display: 700;
  --weight-headline: 700;
  --weight-title: 700;
  --weight-subtitle: 700;
  --weight-body: 400;
  --weight-label: 600;

  /* ---- spacing (4px rhythm) --------------------------------------------- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 120px;

  /* ---- shape & elevation ------------------------------------------------ */
  --radius-sm: 20px;
  --radius-md: 40px;
  --radius-lg: 48px;
  --radius-pill: 999px;
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(15, 15, 15, 0.05), 0 2px 8px rgba(15, 15, 15, 0.04);
  --elevation-2: 0 6px 16px rgba(15, 15, 15, 0.07), 0 16px 32px rgba(15, 15, 15, 0.06);
  --elevation-3: 0 12px 32px rgba(15, 15, 15, 0.10), 0 40px 72px rgba(15, 15, 15, 0.12);
}

/* ---- reset + base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); }
h1 { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-display); letter-spacing: -0.02em; }
h2 { font-size: var(--text-headline); line-height: var(--leading-headline); font-weight: var(--weight-headline); letter-spacing: -0.02em; }
h3 { font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--weight-title); letter-spacing: -0.01em; }
h4 { font-size: var(--text-subtitle); line-height: var(--leading-subtitle); font-weight: var(--weight-subtitle); }
p { margin: 0 0 var(--space-4); }
small { font-size: var(--text-label); color: var(--text-muted); }
a { color: var(--color-primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 2px;
}
img, svg, video { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

/* ---- layout utilities --------------------------------------------------- */
/* box-sizing is border-box globally, so the padding is INSIDE max-width:
   1664 - 2*32 = a 1600px content column. On the mockup's
   1920 canvas that lands content at exactly 160..1760 — the gutters it actually has. */
.container {
  width: 100%;
  max-width: 1664px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 48rem) { .container { padding-inline: 32px; } }

.grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}