/* ============================================================
   Goodfellow Design System — Colors & Type
   ------------------------------------------------------------
   Tokens derived from the public Goodfellow Advanced Materials
   website (goodfellow.com) and the multi-coloured "G" mark.
   Where exact brand values were unavailable, conservative
   substitutions are used and flagged in the README.
   ============================================================ */

/* -------------------- FONTS (Google Fonts) ------------------ */
/* Goodfellow's live site appears to use a humanist sans-serif
   stack (Open-Sans–like). We substitute Source Sans 3 — a near
   match — and a more architectural display sans (DM Sans)
   for marketing hero copy. Flagged: confirm with brand team. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND PALETTE (authoritative) ---------- */
  --brand-primary:      #495C6D;   /* Slate — workhorse UI surface / nav */
  --brand-tertiary:     #1D4159;   /* Deep navy — primary CTA, headings on light */
  --brand-lightblue:    #1A71AB;   /* Mid blue — links, info */
  --brand-brightblue:   #6CCFDF;   /* Cyan — highlights, data, accents */
  --brand-blue:         #1760AC;   /* True blue — secondary CTA */
  --brand-green:        #548139;   /* Olive green — success, positive */
  --brand-magenta:      #941252;   /* Magenta — accent CTA, commercial */

  /* ---------- BRAND ANCHOR (legacy token names → new palette) ---------- */
  --gf-navy:            var(--brand-tertiary);
  --gf-navy-700:        #143049;
  --gf-navy-800:        #0E2435;
  --gf-navy-300:        #6B8AA0;
  --gf-navy-100:        #DDE6ED;
  --gf-navy-50:         #F0F4F8;

  /* Aliases — older tokens keep working */
  --gf-blue:            var(--brand-tertiary);
  --gf-blue-700:        var(--gf-navy-700);
  --gf-blue-800:        var(--gf-navy-800);
  --gf-blue-300:        var(--gf-navy-300);
  --gf-blue-100:        var(--gf-navy-100);
  --gf-blue-50:         var(--gf-navy-50);

  --gf-magenta:         var(--brand-magenta);
  --gf-magenta-700:     #6E0D3E;
  --gf-magenta-100:     #F4DCE7;

  /* Aliases (legacy --gf-red tokens kept pointing at magenta) */
  --gf-red:             var(--brand-magenta);
  --gf-red-700:         var(--gf-magenta-700);
  --gf-red-100:         var(--gf-magenta-100);

  /* ---------- LOGO PALETTE ----------
     Colours sampled from the multi-coloured "G" mark.
     Used sparingly — for category chips, data viz, tag dots,
     not as backgrounds. */
  --logo-red:           #E2362E;
  --logo-orange:        #F08423;
  --logo-yellow:        #F5C518;
  --logo-lime:          #8BC53F;
  --logo-green:         #1F9D55;
  --logo-teal:          #1FB6B6;
  --logo-sky:           #2E9CCA;
  --logo-blue:          #2257A3;
  --logo-violet:        #6B3FA0;
  --logo-magenta:       #C4318E;
  --logo-pink:          #E66BA5;
  --logo-grey:          #6E6E70;

  /* ---------- NEUTRALS ---------- */
  --ink-1000:           #0F1620;   /* Headings */
  --ink-900:            #1B2330;   /* Body strong */
  --ink-700:            #3C4858;   /* Body */
  --ink-500:            #65718A;   /* Secondary text */
  --ink-400:            #8C97AB;   /* Tertiary / captions */
  --ink-300:            #BAC2D1;   /* Hairlines on dark */
  --ink-200:            #DCE1EA;   /* Borders */
  --ink-100:            #ECEFF4;   /* Dividers */
  --ink-50:             #F6F8FB;   /* Section bg */
  --ink-0:              #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --success:            #1F9D55;
  --success-bg:         #E6F4EC;
  --warning:            #C77A0A;
  --warning-bg:         #FBF1DD;
  --danger:             #C62828;          /* True red reserved for system errors */
  --danger-bg:          #FCE4E5;
  --info:               var(--gf-blue);
  --info-bg:            var(--gf-blue-100);

  /* ---------- FOREGROUND / BACKGROUND ROLES ---------- */
  --fg-1:               var(--ink-1000);  /* Primary text   */
  --fg-2:               var(--ink-700);   /* Body          */
  --fg-3:               var(--ink-500);   /* Secondary     */
  --fg-4:               var(--ink-400);   /* Tertiary      */
  --fg-on-brand:        var(--ink-0);
  --fg-link:            var(--gf-blue);
  --fg-link-hover:      var(--gf-blue-700);

  --bg-page:            var(--ink-0);
  --bg-subtle:          var(--ink-50);
  --bg-sunken:          var(--ink-100);
  --bg-brand:           var(--gf-blue);
  --bg-brand-soft:      var(--gf-blue-50);
  --bg-dark:            #0B1A2C;        /* Footer / inverse */

  --border-1:           var(--ink-200);
  --border-2:           var(--ink-100);
  --border-strong:      var(--ink-300);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:          'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:       'DM Sans', 'Source Sans 3', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (1.200 — minor third) ---------- */
  --fs-12: 0.750rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;

  --lh-tight:   1.12;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* ---------- SPACING (4-px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- RADII (4 & 8 rule) ----------
     Goodfellow uses only multiples of 4 — small UI gets 4 px,
     larger surfaces get 8 px. Nothing in between. */
  --r-sm:   4px;      /* Inputs, chips, small badges, hairline cards */
  --r-md:   8px;      /* Default — buttons, cards, panels */
  --r-lg:   16px;     /* Large surfaces, image masks (2× the 8 unit) */
  --r-pill: 999px;    /* Pills / segmented controls */

  /* Aliases — older code referenced --r-xs and --r-xl */
  --r-xs:   var(--r-sm);
  --r-xl:   var(--r-lg);

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(15, 22, 32, 0.06), 0 1px 1px rgba(15, 22, 32, 0.04);
  --shadow-2: 0 2px 4px rgba(15, 22, 32, 0.06), 0 4px 12px rgba(15, 22, 32, 0.06);
  --shadow-3: 0 6px 14px rgba(15, 22, 32, 0.08), 0 16px 32px rgba(15, 22, 32, 0.06);
  --shadow-focus: 0 0 0 3px rgba(29, 65, 89, 0.30);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;

  /* ---------- LAYOUT ---------- */
  --container-narrow: 880px;
  --container:        1200px;
  --container-wide:   1440px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

.t-display-1, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg-1);
}
.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--fg-1);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-40);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--fg-1);
}
.t-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  line-height: 1.2;
  font-weight: 600;
  color: var(--fg-1);
}
.t-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: 1.3;
  font-weight: 600;
  color: var(--fg-1);
}
.t-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1.35;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: 0;
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gf-blue);
}

.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.t-body-lg {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.t-body-sm {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-caption, caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-4);
  letter-spacing: 0.01em;
}

.t-stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  line-height: 1;
  font-weight: 700;
  color: var(--gf-blue);
  letter-spacing: -0.02em;
}
.t-stat-label {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.35;
  color: var(--fg-3);
  max-width: 18ch;
}

code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 0.12em 0.4em;
  border-radius: var(--r-sm);
  color: var(--ink-900);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 3px; }