/* Westland brand tokens
   Fonts: self-host from ../fonts/ (below) or load Outfit from Google Fonts:
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"> */

@font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/outfit-400.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/outfit-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/outfit-600.woff2") format("woff2"); }

:root {
  /* Core brand */
  --wl-teal: #1D5B57;        /* primary — wordmark, headings, primary buttons */
  --wl-teal-deep: #12302E;   /* dark surfaces, footer, body text on light */
  --wl-teal-hover: #174A47;  /* primary button hover */
  --wl-mist: #EFF3EC;        /* light section background */
  --wl-white: #FFFFFF;

  /* Pixel-sun spectrum (top of the sun to the bottom) */
  --wl-sun-gold: #F6C21C;
  --wl-sun-amber: #F2A81E;
  --wl-sun-olive: #C9BF3A;
  --wl-sun-lime: #8DBB45;
  --wl-leaf: #4C9A4A;        /* green industries */
  --wl-sea-green: #2E8B6E;
  --wl-ocean: #1F6FA8;       /* blue industries */

  /* Roles */
  --wl-bg: var(--wl-white);
  --wl-surface: var(--wl-mist);
  --wl-text: var(--wl-teal-deep);
  --wl-text-muted: #4A615F;
  --wl-heading: var(--wl-teal);
  --wl-link: var(--wl-ocean);
  --wl-primary: var(--wl-teal);
  --wl-on-primary: var(--wl-white);
  --wl-highlight: var(--wl-sun-gold);   /* use on dark surfaces only */
  --wl-border: #D5DED8;

  /* Type */
  --wl-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wl-weight-regular: 400;
  --wl-weight-medium: 500;
  --wl-weight-semibold: 600;
  --wl-text-xs: 0.8125rem;
  --wl-text-sm: 0.9375rem;
  --wl-text-base: 1.0625rem;
  --wl-text-lg: 1.25rem;
  --wl-text-xl: 1.625rem;
  --wl-text-2xl: 2.125rem;
  --wl-text-3xl: 2.875rem;
  --wl-text-4xl: 3.75rem;
  --wl-leading-tight: 1.15;
  --wl-leading-body: 1.6;
  --wl-tracking-heading: -0.01em;
  --wl-tracking-label: 0.08em;

  /* Shape & spacing (8px grid) */
  --wl-radius-sm: 6px;
  --wl-radius: 10px;
  --wl-radius-lg: 16px;
  --wl-space-1: 4px;
  --wl-space-2: 8px;
  --wl-space-3: 12px;
  --wl-space-4: 16px;
  --wl-space-5: 24px;
  --wl-space-6: 32px;
  --wl-space-7: 48px;
  --wl-space-8: 64px;
  --wl-space-9: 96px;
}