/* Westly Group — design tokens
 *
 * Ported VERBATIM from the Claude Design system
 * (_ds/the-westly-group-design-system-019dd5b9-.../colors_and_type.css).
 * The Google Fonts @import was removed; assets/css/fonts.css self-hosts them instead.
 *
 * THIS FILE IS THE SINGLE DEFINITION OF EVERY TOKEN. theme.json references these
 * variables rather than restating their values, so the two cannot drift apart.
 *
 * Provenance warning: only --twg-blue (#007DC2) was sampled from the real logo. Every
 * other colour, radius, shadow and motion value is an "informed reconstruction" —
 * see DESIGN-HANDOFF.md section 2 before treating any of them as brand truth.
 */

/* =========================================================================
   THE WESTLY GROUP — Design System foundations
   Colors + Type tokens, plus semantic element styles.
   Import this file, or copy the :root block into your own stylesheet.
   ========================================================================= */

:root {
  /* ========== BRAND COLOR ========== */
  --twg-blue:        #007DC2;  /* primary — sampled from the logo mark */
  --twg-blue-700:    #006AA6;  /* hover */
  --twg-blue-800:    #00567F;  /* pressed / deep */
  --twg-ink:         #111418;  /* wordmark black, primary text */

  /* ---- Blue scale ---- */
  --blue-50:   #E8F4FB;
  --blue-100:  #CDE8F6;
  --blue-200:  #9BD0ED;
  --blue-300:  #5FB0DF;
  --blue-400:  #2693CF;
  --blue-500:  #007DC2;   /* = --twg-blue */
  --blue-600:  #006AA6;
  --blue-700:  #00567F;
  --blue-800:  #08405E;

  /* ---- Cool neutral scale (slightly blue-tinted greys) ---- */
  --n-0:    #FFFFFF;
  --n-50:   #F5F7F9;   /* page alt / cards on white */
  --n-100:  #EAEEF2;   /* hairline fills, chips */
  --n-200:  #D9E0E6;   /* borders */
  --n-300:  #BCC6CE;   /* disabled border, dividers on dark */
  --n-400:  #94A2AC;   /* muted icons */
  --n-500:  #6C7883;   /* secondary text */
  --n-600:  #4D5862;   /* body on light */
  --n-700:  #333C44;
  --n-800:  #1D252B;
  --n-900:  #111418;   /* = --twg-ink */

  /* ---- Dark surfaces (navy, drawn warm-cool from the photography) ---- */
  --navy-900: #0A1F2E;  /* deepest section bg */
  --navy-800: #0E2A3D;  /* dark section bg */
  --navy-700: #14384F;  /* raised dark surface */

  /* ---- Warm accent (pulled from outdoor brand photography; use sparingly) ---- */
  --sand-100: #F3EEE6;
  --sand-300: #D9C9B0;
  --clay-500: #B07B4F;

  /* ========== SEMANTIC TOKENS ========== */
  --color-bg:            var(--n-0);
  --color-bg-alt:        var(--n-50);
  --color-surface:       var(--n-0);
  --color-surface-dark:  var(--navy-800);
  --color-fg:            var(--twg-ink);     /* primary text */
  --color-fg-2:          var(--n-600);       /* body / secondary */
  --color-fg-3:          var(--n-500);       /* muted / captions */
  --color-fg-on-dark:    #FFFFFF;
  --color-fg-2-on-dark:  #AFC0CC;
  --color-primary:       var(--twg-blue);
  --color-primary-hover: var(--twg-blue-700);
  --color-primary-press: var(--twg-blue-800);
  --color-border:        var(--n-200);
  --color-border-strong: var(--n-300);
  --color-hairline:      var(--n-100);
  --color-focus-ring:    rgba(0,125,194,.40);

  /* ---- Status / signal (UI kit) ---- */
  --signal-success: #2E7D5B;
  --signal-warning: #C2820F;
  --signal-danger:  #C0392B;
  --signal-info:    var(--twg-blue);

  /* ========== TYPE FAMILIES ========== */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* geometric — echoes logo */
  --font-body:    'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* kickers, data, tags */

  /* ========== TYPE SCALE (1.250 major-third on desktop) ========== */
  --fs-display:  clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);  /* 44 → 72 hero */
  --fs-h1:       clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); /* 36 → 52 */
  --fs-h2:       clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);  /* 28 → 40 */
  --fs-h3:       1.5rem;     /* 24 */
  --fs-h4:       1.25rem;    /* 20 */
  --fs-lead:     1.3125rem;  /* 21 — intro paragraphs */
  --fs-body:     1.0625rem;  /* 17 — base */
  --fs-small:    0.9375rem;  /* 15 */
  --fs-caption:  0.8125rem;  /* 13 */
  --fs-eyebrow:  0.75rem;    /* 12 — mono kicker */

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-eyebrow: 0.18em;
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;

  /* ========== SPACING (4px base) ========== */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* ========== RADII ========== */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ========== SHADOWS / ELEVATION ========== */
  --shadow-xs: 0 1px 2px rgba(10,31,46,.06);
  --shadow-sm: 0 1px 3px rgba(10,31,46,.08), 0 1px 2px rgba(10,31,46,.06);
  --shadow-md: 0 4px 14px rgba(10,31,46,.10), 0 2px 6px rgba(10,31,46,.06);
  --shadow-lg: 0 16px 40px rgba(10,31,46,.14), 0 4px 12px rgba(10,31,46,.08);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ========== MOTION ========== */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-out:      cubic-bezier(.16,.84,.44,1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 380ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES — apply when used as a stylesheet (optional).
   ========================================================================= */
body.twg {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.twg h1, .twg h2, .twg h3, .twg h4 {
  font-family: var(--font-display);
  color: var(--color-fg);
  font-weight: 700;
  margin: 0 0 .5em;
  text-wrap: balance;
}
.twg .display { font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display); font-weight: 800; }
.twg h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); }
.twg h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.twg h3 { font-size: var(--fs-h3); line-height: 1.25; }
.twg h4 { font-size: var(--fs-h4); line-height: 1.3; }

.twg .lead { font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--color-fg-2); }
.twg p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
.twg small, .twg .caption { font-size: var(--fs-caption); color: var(--color-fg-3); }

/* Mono eyebrow / kicker label — the brand's technical signature */
.twg .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.twg a { color: var(--color-primary); text-decoration: none; }
.twg a:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

.twg .mono { font-family: var(--font-mono); }