/* ============================================================
   NORTHERN COMMERCE — Design System Foundations
   colors_and_type.css  ·  Brand Refresh, April 2026
   ============================================================ */

/* ---------- FONT FACES ---------- */
/* Brand display serif. Real brand font is Freight Text Pro (Semibold).
   Source Serif 4 is bundled as the documented fallback. */
@font-face {
  font-family: "FreightText Pro";
  src: url("fonts/FreightTextPro-Semibold.otf") format("opentype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Italic.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* Brand UI sans — TWK Lausanne (self-hosted, full weight range + italics). Inter is the documented fallback. */
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-100.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-100Italic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-200.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-200Italic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-300.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-300Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-400.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-400Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-500.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-500Italic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-600.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-600Italic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-700.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-700Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-800.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-800Italic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-900.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-900Italic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-1000.otf") format("opentype");
  font-weight: 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TWK Lausanne";
  src: url("fonts/TWKLausanne-1000Italic.otf") format("opentype");
  font-weight: 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---- Brand color ---- */
  --northern-red:        #CF2035; /* primary brand red — CTAs, accents, icons */
  --northern-red-hover:  #B01C2E; /* darkened red for hover */
  --northern-red-bright: #D81E3A; /* hero radial glow / bright accent */
  --northern-red-deep:   #BD2536; /* logo mark triangle */

  /* ---- Ink & neutrals ---- */
  /* Charcoal is the single near-black across the brand — text, dark sections, all. */
  --charcoal:     #282828; /* THE dark color */
  --ink:          #282828; /* alias: primary text */
  --dark-bg:      #282828; /* alias: dark section background */
  --dark-bg-2:    #282828; /* alias: deepest dark */
  --ink-pure:     #000000; /* reserved for alpha scrims/gradients only */

  --gray-700:     #514E53; /* strong secondary text */
  --gray-600:     #6E6A70; /* body / muted text — the workhorse gray */
  --gray-400:     #AFABAB; /* placeholder, muted icons, hairline on light */
  --gray-300:     #E5E5E5; /* default border / divider */
  --gray-200:     #F0F0F0;
  --gray-100:     #F8F8F8; /* field fill, subtle surface tint */
  --white:        #FFFFFF;

  /* ---- Surfaces ---- */
  --surface:           var(--white);
  --surface-tint:      var(--gray-100);
  --surface-dark:      var(--dark-bg);
  --border:            var(--gray-300);
  --border-strong:     var(--gray-400);

  /* ---- Semantic text ---- */
  --text-primary:      var(--ink);
  --text-secondary:    var(--gray-600);
  --text-on-dark:      var(--white);
  --text-on-dark-soft: rgba(255,255,255,0.72);

  /* ---- Hero gradient (dark with red glow, top-left bias) ---- */
  --hero-bg: radial-gradient(120% 120% at 18% 8%, rgba(216,30,58,0.34) 0%, rgba(40,40,40,0.35) 34%, rgba(40,40,40,0.35) 100%), #282828;

  /* ---- Typography families ---- */
  --font-serif: "FreightText Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:  "TWK Lausanne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Type scale (desktop) ---- */
  --fs-display:  60px;  --lh-display: 1.2;   /* hero H1 */
  --fs-h1:       48px;  --lh-h1: 1.2;
  --fs-h2:       43px;  --lh-h2: 1.2;        /* section heading */
  --fs-h3:       32px;  --lh-h3: 1.25;
  --fs-h4:       24px;  --lh-h4: 1.3;        /* card title (serif) */
  --fs-h5:       20px;  --lh-h5: 1.35;       /* small serif heading */
  --fs-card-title: 20px; --lh-card-title: 1.2; /* sans card title */
  --fs-lead:     20px;  --lh-lead: 1.6;
  --fs-body:     18px;  --lh-body: 1.7;
  --fs-small:    16px;  --lh-small: 1.7;
  --fs-caption:  14px;  --lh-caption: 1.7;
  --fs-prefix:   16px;  --ls-prefix: 1px;    /* eyebrow / section prefix */

  /* ---- Radii ---- */
  --radius-pill:   1000px; /* buttons, search, tags */
  --radius-card:   20px;   /* content / icon cards */
  --radius-media:  50px;   /* large image/case-study masks */
  --radius-sm:     6px;    /* small thumbnails, inline media */
  --radius-input:  0px;    /* form fields are square */

  /* ---- Elevation ---- */
  --shadow-card:  0px 3px 11px 1px rgba(0,0,0,0.04);
  --shadow-pop:   0px 8px 28px rgba(0,0,0,0.10);

  /* ---- Spacing rhythm (8pt base) ---- */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 80px; --space-8: 128px;

  /* ---- Layout ---- */
  --page-gutter: 120px;  /* desktop section side padding @1920 */
  --max-content: 1680px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES  (opt-in: wrap in .northern-type)
   ============================================================ */
.northern-type { color: var(--text-primary); font-family: var(--font-sans); }

.northern-type .display,
.northern-type h1.display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.northern-type h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: -0.01em;
}
.northern-type h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: -0.005em;
}
.northern-type h3 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-h3); line-height: var(--lh-h3);
}
.northern-type h4 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-h4); line-height: var(--lh-h4);
}
.northern-type h5 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-h5); line-height: var(--lh-h5);
}
.northern-type .prefix {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-prefix); line-height: 1.7;
  letter-spacing: var(--ls-prefix);
  color: var(--text-secondary);
}
.northern-type .lead {
  font-family: var(--font-sans); font-weight: 300;
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  color: var(--text-secondary);
}
.northern-type p,
.northern-type .body {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.northern-type .caption {
  font-family: var(--font-sans); font-size: var(--fs-caption);
  line-height: var(--lh-caption); color: var(--text-secondary);
}
.northern-type .card-title {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-card-title); line-height: var(--lh-card-title);
  color: var(--text-primary);
}