/* =========================================================================
   TwistGen Design System — Colors & Type
   --------------------------------------------------------------------------
   Color tokens derive from the watercolor hero (deep purple/indigo wash) and
   the autumnal lifestyle photography (warm gold, muted rust). Type pairs a
   geometric all-caps display (Oswald, Google Fonts substitute) with a clean
   humanist body sans (Lato).
   Substitutions are flagged in README.md — replace fonts/ contents to swap.
   ========================================================================= */

/* Local Avenir Next LT Pro — Pan-European extended Latin (ć č đ š ž) is in the OTFs. */

/* ---- Avenir Next LT Pro (proportional) ---- */
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('assets/fonts/AvenirNextLTPro-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('assets/fonts/AvenirNextLTPro-It.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('assets/fonts/AvenirNextLTPro-Demi.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('assets/fonts/AvenirNextLTPro-DemiIt.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url('assets/fonts/AvenirNextLTPro-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Avenir Next LT Pro Condensed (display) ---- */
@font-face {
  font-family: 'Avenir Next LT Pro Cn';
  src: url('assets/fonts/AvenirNextLTPro-UltLtCn.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro Cn';
  src: url('assets/fonts/AvenirNextLTPro-Cn.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro Cn';
  src: url('assets/fonts/AvenirNextLTPro-CnIt.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro Cn';
  src: url('assets/fonts/AvenirNextLTPro-MediumCn.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro Cn';
  src: url('assets/fonts/AvenirNextLTPro-DemiCn.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro Cn';
  src: url('assets/fonts/AvenirNextLTPro-BoldCn.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro Cn';
  src: url('assets/fonts/AvenirNextLTPro-HeavyCn.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ---------- BRAND PURPLES (the watercolor hero) ---------- */
  --brand-50:  #F4EEF8;
  --brand-100: #E2D2EC;
  --brand-200: #C5A6D9;
  --brand-300: #9D6CB8;
  --brand-400: #6E3D90;  /* mid plum from watercolor */
  --brand-500: #4A2566;  /* core deep purple */
  --brand-600: #321946;  /* shadow purple */
  --brand-700: #1F0F2D;  /* near-black plum (used as page bg in dark) */
  --brand-800: #120819;
  --brand-900: #0A0410;

  /* ---------- ACCENT GOLD (autumnal warmth, action color) ---------- */
  --gold-50:  #FBF4E3;
  --gold-100: #F4E1B0;
  --gold-300: #E0BC60;
  --gold-500: #C49A30;  /* primary action accent */
  --gold-700: #8C6B16;
  --gold-900: #4A370A;

  /* ---------- WARM RUST (secondary, from sweater + sweatshirt) ---------- */
  --rust-300: #E4946A;
  --rust-500: #C56536;
  --rust-700: #7E3C18;

  /* ---------- COOL SCIENCE (DNA / cell imagery) ---------- */
  --cool-300: #8FB4E8;
  --cool-500: #3F65B5;
  --cool-700: #1E3A78;

  /* ---------- NEUTRALS ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF7F2;  /* warm off-white — content surfaces */
  --neutral-100: #F1ECE3;
  --neutral-200: #DCD4C7;
  --neutral-300: #B8AE9F;
  --neutral-400: #8A8276;
  --neutral-500: #5C564E;
  --neutral-600: #3A352F;
  --neutral-700: #25221E;
  --neutral-800: #18161300;
  --neutral-850: #131210;
  --neutral-900: #0E0E12;  /* core dark page bg */

  /* ---------- SEMANTIC: foreground/background (DARK CONTEXT default) ---------- */
  --bg-1: var(--neutral-900);   /* page */
  --bg-2: var(--brand-700);     /* raised dark surface */
  --bg-3: var(--brand-600);     /* deeper plum surface */
  --bg-cream: var(--neutral-50); /* light section surface */
  --bg-cream-soft: var(--neutral-100);

  --fg-1: var(--neutral-50);    /* primary text on dark */
  --fg-2: var(--neutral-200);   /* secondary text on dark */
  --fg-3: var(--neutral-400);   /* tertiary / muted */
  --fg-on-cream-1: var(--neutral-700);
  --fg-on-cream-2: var(--neutral-500);
  --fg-on-cream-3: var(--neutral-400);

  --accent: var(--gold-500);
  --accent-hover: var(--gold-300);
  --accent-press: var(--gold-700);

  --border-1: rgba(250, 247, 242, 0.18);
  --border-2: rgba(250, 247, 242, 0.10);
  --border-on-cream-1: rgba(37, 34, 30, 0.16);
  --border-on-cream-2: rgba(37, 34, 30, 0.08);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Avenir Next LT Pro Cn', 'Avenir Next Condensed', 'Helvetica Neue', sans-serif;
  --font-body:    'Avenir Next LT Pro', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE (display tends large; body sits 14-18) ---------- */
  --fs-display-xl: clamp(48px, 7vw, 96px);
  --fs-display-l:  clamp(36px, 5vw, 64px);
  --fs-display-m:  clamp(28px, 3.6vw, 44px);
  --fs-display-s:  clamp(22px, 2.4vw, 30px);
  --fs-eyebrow:    14px;       /* small all-caps label */
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-body-l: 18px;
  --fs-body:   16px;
  --fs-body-s: 14px;
  --fs-micro:  12px;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ---------- TRACKING ---------- */
  --tracking-display:  -0.01em;     /* slight neg on huge sizes */
  --tracking-allcaps:  0.14em;      /* nav, buttons */
  --tracking-allcaps-tight: 0.06em; /* large hero allcaps */
  --tracking-eyebrow:  0.22em;
  --tracking-body:     0;
  --tracking-button:   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: 0;
  --radius-1: 2px;
  --radius-2: 4px;     /* cards / image tiles */
  --radius-3: 8px;
  --radius-pill: 999px; /* tag chips only */

  /* ---------- BORDERS ---------- */
  --hairline: 1px solid var(--border-1);
  --hairline-cream: 1px solid var(--border-on-cream-1);
  --rule: 1px solid var(--border-2);

  /* ---------- SHADOWS ---------- */
  --shadow-card: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 32px 64px -20px rgba(0, 0, 0, 0.55);
  --shadow-hero: 0 60px 120px -30px rgba(74, 37, 102, 0.55);
  --shadow-soft: 0 8px 24px -8px rgba(0, 0, 0, 0.25);

  /* ---------- MOTION ---------- */
  --ease-house: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   500ms;
  --dur-hero:   800ms;

  /* ---------- LAYOUT ---------- */
  --content-max: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES — drop colors_and_type.css into a page and the
   following give a working set of typographic primitives matching the brand.
   ========================================================================= */

.ds-allcaps {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-allcaps);
  font-weight: 500;
}
.ds-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  color: var(--fg-3);
}
.ds-display-xl,
.ds-display-l,
.ds-display-m,
.ds-display-s {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-allcaps-tight);
  line-height: var(--lh-tight);
  margin: 0;
}
.ds-display-xl { font-size: var(--fs-display-xl); font-weight: 600; }
.ds-display-l  { font-size: var(--fs-display-l);  font-weight: 500; }
.ds-display-m  { font-size: var(--fs-display-m);  font-weight: 500; }
.ds-display-s  { font-size: var(--fs-display-s);  font-weight: 500; }

.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-allcaps-tight);
  line-height: var(--lh-snug);
  margin: 0;
}
.ds-h1 { font-size: var(--fs-h1); }
.ds-h2 { font-size: var(--fs-h2); }
.ds-h3 { font-size: var(--fs-h3); }
.ds-h4 { font-size: var(--fs-h4); letter-spacing: var(--tracking-allcaps); }

.ds-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  margin: 0;
}
.ds-p-lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  font-weight: 300;
  margin: 0;
}
.ds-micro {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  font-weight: 400;
}
.ds-link {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--dur-base) var(--ease-house);
}
.ds-link:hover { color: var(--accent-hover); }

/* When applied at the page root */
.ds-root {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.ds-root.cream {
  background: var(--bg-cream);
  color: var(--fg-on-cream-1);
}