/* Design tokens — exported from Figma "WoodMart. 2026" */

:root {
  /* ---------- Color ---------- */
  --text-primary: #212529;
  --text-secondary: #212529;
  --text-inverse: #ffffff;

  --surface-default: #ffffff;
  --surface-overlay: #f1f1ef;

  --background-default: #fafaf9;
  --background-subtle: #f1f1ef;
  --background-inverse: #000000;

  --border-default: #e3e2e0;
  --border-strong: #c7c5c1;

  --brand-default: #12ba71;
  --brand-active: #0b7044;

  --button-primary: #12ba71;
  --button-black: #212529;
  --button-white: #ffffff;

  --feedback-warning: #f59e0b;

  /* ---------- Spacing ---------- */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ---------- Border width ---------- */
  --border-width-thin: 1px;
  --border-width-medium: 2px;

  /* ---------- Layout ---------- */
  --layout-container-max: 1236px;
  --layout-column-gap: 20px;
  --layout-column-inner: 16px;
  --layout-page-margin: 64px;

  /* ---------- Typography ---------- */
  --font-heading: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-button: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;
  /* Not in the Figma frame — the two-column home hero needs a step between
     the 48px and 78px display sizes. */
  --font-size-6xl: 56px;
  --font-size-8xl: 78px;

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-800: 800;

  --letter-spacing-tighter: -1.5px;
  --letter-spacing-tight: -0.5px;
  --letter-spacing-normal: 0px;
  --letter-spacing-wide: 0.2px;
  --letter-spacing-wider: 0.8px;
}