/* ============================================================
   genz design system — colors & typography tokens
   Use via CSS custom properties.
   Main font theme: Inter (loaded locally from /fonts).
   ============================================================ */

/* -------- Inter (variable, opsz + wght) loaded locally -------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-variation-settings: "opsz" 18;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-variation-settings: "opsz" 18;
}
/* Display-optical-size alias — Inter at opsz 28 for large headlines */
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-variation-settings: "opsz" 28;
}
@font-face {
  font-family: "Inter Display";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-variation-settings: "opsz" 28;
}

:root {
  /* -------- color: surfaces -------- */
  --bg: #EAE7E1;            /* warm cream — primary background */
  --bg-elev: #F2EFE9;       /* slightly lifted surface */
  --bg-sunken: #E0DCD4;     /* slightly recessed surface */
  --bg-deep: #1E1B15;       /* dark surface (footer, dark sections) */

  /* -------- color: foreground -------- */
  --fg: #162F29;            /* British Racing Green — primary text */
  --fg-strong: #1E1B15;     /* near-black — strongest text */
  --fg-muted: #5A5A50;      /* secondary copy */
  --fg-subtle: #897A5D;     /* chamoisee — captions, meta */
  --fg-on-dark: #EAE7E1;    /* on dark surfaces */

  /* -------- color: brand & accents -------- */
  --brand: #295B4F;         /* deep green — buttons, links */
  --brand-hover: #1E4538;   /* darker on hover */
  --brand-soft: #D6DDD7;    /* tinted brand surface */

  --accent-blue: #5986C5;   /* silver blue — agent UI, highlights */
  --accent-warm: #897A5D;   /* chamoisee — subtle UI */
  --accent-yellow: #DCCC7B; /* pop accent (sparingly) */
  --accent-orange: #D07F44; /* pop accent (sparingly) */

  /* -------- color: lines -------- */
  --line: rgba(22, 47, 41, 0.14);        /* default 1px hairline */
  --line-strong: rgba(22, 47, 41, 0.28); /* emphasized hairline */
  --line-soft: rgba(22, 47, 41, 0.06);   /* dividers in soft sections */

  /* -------- color: status -------- */
  --status-success: #295B4F;
  --status-info: #5986C5;
  --status-warning: #D07F44;
  --status-danger: #B04A2A;

  /* -------- type: families --------
     Inter is now the single, unified font theme.
     --font-display is Inter at the larger optical size (28pt) for headlines.
     --font-sans is Inter at the standard optical size (18pt) for UI/body.
     --font-serif is kept as an alias pointing to Inter so existing markup
     that references `var(--font-serif)` continues to render in Inter.
  */
  --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* -------- type: scale (clamped for fluid display) -------- */
  --fs-display: clamp(56px, 8vw, 96px);  /* hero headlines */
  --fs-h1: clamp(44px, 5.6vw, 72px);     /* section openers */
  --fs-h2: clamp(32px, 4vw, 48px);       /* subsection headlines */
  --fs-h3: 28px;                          /* card titles */
  --fs-h4: 20px;                          /* small headers */
  --fs-lead: 22px;                        /* lead paragraph */
  --fs-body: 17px;                        /* default body */
  --fs-small: 14px;
  --fs-meta: 12px;                        /* captions, eyebrows */

  /* -------- type: line-height -------- */
  --lh-tight: 1.05;        /* display, tight */
  --lh-snug: 1.2;          /* h2/h3 */
  --lh-body: 1.6;          /* paragraphs */
  --lh-loose: 1.75;        /* long-form reading */

  /* -------- type: tracking -------- */
  --ls-tight: -0.035em;    /* large display headlines (Inter likes a tighter cut at scale) */
  --ls-snug: -0.02em;      /* h2/h3 */
  --ls-normal: 0;
  --ls-eyebrow: 0.12em;    /* uppercase eyebrows */

  /* -------- spacing scale (8pt-ish, with editorial generosity) -------- */
  --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;
  --space-11: 160px;

  /* -------- layout -------- */
  --container: 1200px;
  --gutter: 32px;

  /* -------- radii (subtle) -------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* -------- elevation (very restrained — editorial) -------- */
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--line);
  --shadow-sm: 0 1px 2px rgba(22, 47, 41, 0.04), 0 0 0 1px var(--line);
  --shadow-md: 0 6px 24px -8px rgba(22, 47, 41, 0.10);
  --shadow-lift: 0 18px 48px -16px rgba(22, 47, 41, 0.18);

  /* -------- motion -------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Semantic typography classes
   All classes use Inter. Display sizes use the "Inter Display"
   optical-size alias (opsz 28); UI/body uses the standard cut
   (opsz 18). Hierarchy is carried by weight + size, not family.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.t-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-muted);
}

.t-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--fg-subtle);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}

.t-italic-serif {
  /* legacy class name retained for compatibility — now renders Inter italic */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

/* ============================================================
   Utility base
   ============================================================ */

.bg { background: var(--bg); color: var(--fg); }
.bg-elev { background: var(--bg-elev); }
.bg-deep { background: var(--bg-deep); color: var(--fg-on-dark); }