/* ============================================================
   The Nichols Group — Core Type & Colour Tokens
   Single source of truth for the WordPress theme.
   Typeface: Helvetica Neue LT (Thin 35 / Roman 55 / Bold 75)
   ------------------------------------------------------------ */

/* ── Webfonts ──────────────────────────────────────────────────────────────── */
/*
   Helvetica Neue LT is served via fonts.com (licensed).
   The stylesheet is enqueued in functions.php using the NG_FONTS_COM_URL constant.
   fonts.com delivers @font-face rules for weights 300 / 400 / 700 automatically,
   so no local @font-face declarations are needed here.
*/

:root {
  /* ── Brand core ────────────────────────────────────────────── */
  --brand-purple-700: #6959AB;   /* Deep primary — headings, CTAs */
  --brand-purple-500: #7E76B6;   /* Mid — supporting graphics */
  --brand-purple-400: #8F8CC2;   /* Soft — subtle accents, links on dark */
  --brand-purple-100: #D4D3E9;   /* Tint — backgrounds, surfaces, borders */

  /* ── Extended (derived, harmonic) ─────────────────────────── */
  --brand-purple-900: #3D3370;
  --brand-purple-800: #524596;
  --brand-purple-050: #F1F0F8;

  /* Anniversary mark only */
  --brand-pink-500: #E59BBD;
  --brand-blue-400: #7FC6DE;

  /* ── Neutrals ──────────────────────────────────────────────── */
  --neutral-000: #FFFFFF;
  --neutral-050: #F7F7FA;
  --neutral-100: #EDEDF2;
  --neutral-200: #D9D9E0;
  --neutral-300: #B8B8C2;
  --neutral-400: #8A8A96;
  --neutral-500: #5F5F6B;
  --neutral-700: #363641;
  --neutral-900: #1A1A22;

  /* ── Semantic colour roles ─────────────────────────────────── */
  --bg-page:       var(--neutral-000);
  --bg-surface:    var(--neutral-000);
  --bg-subtle:     var(--brand-purple-050);
  --bg-muted:      var(--neutral-100);
  --bg-inverse:    var(--brand-purple-900);
  --bg-brand:      var(--brand-purple-700);
  --bg-brand-soft: var(--brand-purple-100);

  --fg-1:          var(--neutral-900);
  --fg-2:          var(--neutral-700);
  --fg-3:          var(--neutral-500);
  --fg-4:          var(--neutral-400);
  --fg-on-brand:   var(--neutral-000);
  --fg-brand:      var(--brand-purple-700);
  --fg-link:       var(--brand-purple-700);
  --fg-link-hover: var(--brand-purple-800);

  --border-1:      var(--neutral-200);
  --border-2:      var(--neutral-100);
  --border-brand:  var(--brand-purple-400);
  --divider:       var(--brand-purple-100);

  /* ── Status ────────────────────────────────────────────────── */
  --status-success: #2E8B6B;
  --status-warning: #C78A1F;
  --status-danger:  #B4402B;
  --status-info:    var(--brand-purple-500);

  /* ── Type stack ────────────────────────────────────────────── */
  --font-sans: "Helvetica Neue LT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ── Type scale ────────────────────────────────────────────── */
  --fs-display: 4.5rem;
  --fs-h1:      3.0rem;
  --fs-h2:      2.25rem;
  --fs-h3:      1.625rem;
  --fs-h4:      1.25rem;
  --fs-lead:    1.25rem;
  --fs-body:    1.0rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --fw-thin:    300;
  --fw-regular: 400;
  --fw-bold:    700;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-xwide:   0.18em;

  /* ── 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-0:    0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(26, 26, 34, 0.05), 0 1px 1px rgba(26, 26, 34, 0.04);
  --shadow-2: 0 4px 12px rgba(57, 45, 112, 0.08), 0 1px 2px rgba(26, 26, 34, 0.04);
  --shadow-3: 0 12px 32px rgba(57, 45, 112, 0.12), 0 2px 6px rgba(26, 26, 34, 0.06);
  --shadow-focus: 0 0 0 3px rgba(105, 89, 171, 0.35);

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.3, 0.1, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      400ms;

  /* ── Brand gradients ───────────────────────────────────────── */
  --grad-anniversary: linear-gradient(135deg, #7FC6DE 0%, #8F8CC2 45%, #6959AB 100%);
  --grad-purple-wash: linear-gradient(180deg, #F1F0F8 0%, #FFFFFF 100%);
}

/* ── Element defaults ──────────────────────────────────────────────────────── */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4) 0;
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: var(--fw-thin);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--fw-regular); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--fw-bold); letter-spacing: 0; }

.display {
  font-size: clamp(56px, 8vw, 104px);
  font-weight: var(--fw-thin);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.lead {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: var(--lh-body);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
  max-width: 60ch;
}
.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: var(--fw-bold);
  color: var(--fg-brand);
}

p { margin: 0 0 var(--space-4) 0; text-wrap: pretty; max-width: 68ch; }

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover  { color: var(--fg-link-hover); }
a:focus-visible { outline: 2px solid var(--brand-purple-700); outline-offset: 2px; }

small, .small { font-size: var(--fs-small); color: var(--fg-3); }

code, pre { font-family: var(--font-mono); font-size: 0.9em; }

hr { border: 0; height: 1px; background: var(--divider); margin: var(--space-6) 0; }

::selection { background: var(--brand-purple-100); color: var(--brand-purple-900); }