/* =============================================================
   Humanists UK — Design System
   Colors, type, and semantic tokens.
   Based on the 2017 Visual Brand Guidelines (v2) and the 2018
   Style Guide. Five-colour core palette + black/white.
   ============================================================= */

/* -------- Webfonts -------- */
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('fonts/Rubik-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Shorelines Script';
  src: url('fonts/ShorelinesScript-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- Core palette (from Brand Guidelines page 04) -------- */
  --huk-purple:        #702F8A;  /* Pantone 526   — primary brand purple */
  --huk-blue:          #4C4184;  /* Pantone 7672  — "Humanists UK Blue" (also referred to as Indigo) */
  --huk-indigo:        #4C4184;  /* alias of --huk-blue, kept for back-compat */
  --huk-yellow:        #FFCC33;  /* Pantone 123 */
  --huk-teal:          #00C7B1;  /* Pantone 3265 */
  --huk-orange:        #E87722;  /* Pantone 158 */
  --huk-green:         #4FA754;  /* derived — campaigning green; pairs with black text. Not in 2017 master palette; flagged for confirmation. */
  --huk-black:         #000000;
  --huk-white:         #FFFFFF;

  /* Soft variants for backgrounds and tints (derived; not part of the master palette but used in app surfaces) */
  --huk-purple-tint:   #F2EAF7;
  --huk-yellow-tint:   #FFF6D9;
  --huk-teal-tint:     #DDF7F3;
  --huk-orange-tint:   #FCE6D5;
  --huk-blue-tint:     #E8E6F1;
  --huk-indigo-tint:   #E8E6F1;  /* alias */

  /* Neutrals — for UI surfaces (greys derived to match the warm character of brand) */
  --huk-grey-900:      #1A1A1A;
  --huk-grey-700:      #444444;
  --huk-grey-500:      #767676;
  --huk-grey-300:      #C7C7C7;
  --huk-grey-200:      #E4E4E4;
  --huk-grey-100:      #F2F2F2;
  --huk-grey-50:       #F8F7F5;  /* warm off-white page background */

  /* -------- Semantic foreground / background -------- */
  --fg1: var(--huk-grey-900);    /* primary text */
  --fg2: var(--huk-grey-700);    /* secondary text */
  --fg3: var(--huk-grey-500);    /* muted text, captions */
  --fg-on-dark: var(--huk-white);
  --link: var(--huk-purple);
  --link-hover: var(--huk-indigo);

  --bg-page: var(--huk-white);
  --bg-soft: var(--huk-grey-50);
  --bg-card: var(--huk-white);
  --bg-inverse: var(--huk-purple);

  --border: var(--huk-grey-200);
  --border-strong: var(--huk-grey-300);

  /* -------- Type families -------- */
  --font-primary: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-secondary: 'Calibri', 'Rubik', system-ui, sans-serif;  /* Microsoft fallback per guidelines */
  --font-script: 'Shorelines Script', 'Brush Script MT', cursive; /* sparingly, for journey-line key words */

  /* -------- Type scale (designed for screen; print rules in Style Guide) -------- */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   42px;
  --text-4xl:   56px;
  --text-5xl:   72px;
  --text-6xl:   96px;

  /* -------- Weights -------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;
  --weight-black:    900;

  /* -------- Line heights -------- */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* -------- Spacing (8-pt rhythm) -------- */
  --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-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* -------- Shadows (soft, warm) -------- */
  --shadow-sm:  0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-md:  0 4px 12px rgba(26, 26, 26, 0.08);
  --shadow-lg:  0 12px 32px rgba(26, 26, 26, 0.12);
  --shadow-xl:  0 24px 60px rgba(26, 26, 26, 0.18);

  /* -------- Layout -------- */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =============================================================
   Semantic typographic styles
   - Headlines: Rubik Bold/Black, often ALL CAPS for campaigning.
   - Body: Rubik Regular/Light, set comfortably.
   - Script (Shorelines): only on the journey line, sparingly.
   ============================================================= */

html, body {
  font-family: var(--font-primary);
  color: var(--fg1);
  background: var(--bg-page);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display / headings ------------------------------------------------- */
.huk-display {
  font-family: var(--font-primary);
  font-weight: var(--weight-black);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.huk-h1 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
}

.huk-h2 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
}

.huk-h3 {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
}

/* Body --------------------------------------------------------------- */
.huk-lead {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-base);
  color: var(--fg1);
}

.huk-body {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg1);
}

.huk-small {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--fg2);
}

.huk-caption {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* Special: Shorelines script — for "journey-line" key words ---------- */
.huk-script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--huk-purple);
}

/* Equality bracket — a brand motif: two horizontal rules (top + bottom) in a
   brand colour framing a block of content (a headline, paragraph, or stack
   of lines). NOT square brackets and NOT a single keyword; it wraps an
   entire passage, full-width, with generous vertical padding. Rules are
   solid, fairly heavy (3-6px on print, ~3px on screen). Apply `.huk-bracket`
   to the wrapping block. */
.huk-bracket {
  border-top: 3px solid var(--huk-purple);
  border-bottom: 3px solid var(--huk-purple);
  padding: 14px 0;
}
.huk-bracket--yellow { border-color: var(--huk-yellow); }
.huk-bracket--teal { border-color: var(--huk-teal); }
.huk-bracket--orange { border-color: var(--huk-orange); }
.huk-bracket--white { border-color: var(--huk-white); }

/* Links -------------------------------------------------------------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--link-hover); }

/* HTML element defaults --------------------------------------------- */
h1 { font: var(--weight-bold) var(--text-4xl)/var(--lh-tight) var(--font-primary); margin: 0 0 var(--space-5); }
h2 { font: var(--weight-bold) var(--text-2xl)/var(--lh-snug) var(--font-primary); margin: 0 0 var(--space-4); }
h3 { font: var(--weight-medium) var(--text-xl)/var(--lh-snug) var(--font-primary); margin: 0 0 var(--space-3); }
h4 { font: var(--weight-medium) var(--text-lg)/var(--lh-snug) var(--font-primary); margin: 0 0 var(--space-3); }
p  { margin: 0 0 var(--space-4); }

code, pre, kbd {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
}