/*
 * Kry10 brand tokens — single source of truth for site styling.
 * Horizon rebrand (Aug 2026): STK Bureau typography + orange/teal/olive palette.
 *
 * Sans Book Italic, Medium Italic, and Bold are not yet in the licensed drop;
 * italic-sans and bold-sans currently fall back through the CSS stack.
 */

/* STK Bureau — licensed webfonts, self-hosted. woff2 primary, woff fallback. */
@font-face {
  font-family: "STK Bureau Sans";
  src: url("/assets/fonts/STKBureauSans-Book.woff2") format("woff2"),
       url("/assets/fonts/STKBureauSans-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "STK Bureau Sans";
  src: url("/assets/fonts/STKBureauSans-Medium.woff2") format("woff2"),
       url("/assets/fonts/STKBureauSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "STK Bureau Serif";
  src: url("/assets/fonts/STKBureauSerif-Book.woff2") format("woff2"),
       url("/assets/fonts/STKBureauSerif-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "STK Bureau Serif";
  src: url("/assets/fonts/STKBureauSerif-BookItalic.woff2") format("woff2"),
       url("/assets/fonts/STKBureauSerif-BookItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Horizon palette (2026 rebrand) — hex values synced to Figma KRY006. */
  --color-orange: #FF5715;    /* Figma S3-C1/Red */
  --color-teal:   #062C2D;    /* Figma S3-C1/Deep Green */
  --color-olive:  #585C24;    /* Figma S3-C1/Olive */
  --color-sage:   #D6DDD0;    /* Figma S3-C1/Concrete */
  --color-sky:    #DBECF6;    /* Figma S3-C1/Blue */ 
  --color-white:  #FFFFFF;    /* Figma S3-C1/White */
  --color-dark: #062C2D;
  --color-sage-muted: #BDC3AE; /* Figma Concrete 50 */
  --color-viridian-20: #364B4C;
  --color-viridian-50: #829596;

  /* Semantic roles — templates should use these, not the raw palette. */
  --color-bg: var(--color-sage);
  --color-surface: var(--color-white);
  --color-ink: var(--color-teal);
  --color-ink-inverse: var(--color-sage);
  --color-ink-muted: var(--color-viridian-50);
  --color-header-bg: var(--color-teal);
  --color-header-ink: var(--color-sage);
  --color-footer-bg: var(--color-teal);
  --color-footer-ink: var(--color-sage);
  --color-accent: var(--color-orange);
  --color-link: var(--color-teal);
  --color-link-hover: var(--color-orange);

  /* Fonts.
   * Serif — display headings (H1, H2, big quote). Italic supported.
   * Sans  — everything else: H3–H5, body, nav, buttons, footer, micro-CTAs. */
  --font-serif: "STK Bureau Serif", "Iowan Old Style", "Palatino", "Georgia", serif;
  --font-sans:  "STK Bureau Sans", "Inter", "Helvetica Neue", "Arial", sans-serif;

  /* Type scale — H1/H2 keep the fluid clamp() so they still scale down on
   * small viewports; only the desktop top (the value at ≥1400px) and the
   * mobile floor moved, both per design review (2026-09-02). H3, H4 stay
   * flat (no viewport scaling). */
  --font-size-h1: 5rem;       /* 80px @ 1400px */
  --font-size-h2: 3rem;       /* 48px @ 1400px */
  --font-size-h3: 1.8rem;                           /* 29px */
  --font-size-h4: 1.875rem;                         /* 30px — was 26px */
  --font-size-h5: 1.375rem;                         /* 22px */
  --font-size-h6: 0.875rem;                         /* 22px */
  --font-size-body: 1.125rem;                       /* 18px */
  --font-size-small: 1rem;                          /* 16px */
  --font-size-micro: 0.8125rem;
  --font-size-wordmark: clamp(6rem, 30vw, 22rem);
  --font-size-eyebrow: 0.875rem;

  --grid-columns: repeat(12, 1fr);
  --grid-gap: 1.25rem 2.5rem; /* 20px row gap, 40px column gap */

  @media (max-width: 900px) {
    --font-size-h1: 3rem;
    --font-size-h2: 2rem;
    --grid-columns: repeat(4, 1fr);
    --grid-gap: var(--space-6) 1.25rem; /* 32px row gap, 20px column gap */
  }

  /* H5 CTA letter-spacing — 3% per design review (2026-09-02). */
  --tracking-h5: 0.03em;
  /* Nav-menu tracking — tighter than --tracking-h5 per design review; shared
   * by header nav (COMPANY/PRODUCT/NEWS/CONTACT) and footer nav so both
   * menus read at the same rhythm. */
  --tracking-nav: 0.14em;

  /* Spacing. 4pt grid. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 3.75rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* Radii — the design is largely straight-edged; only cards get soft corners. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-btn: 7px;

  /* Layout.
   * --gutter: shared horizontal inset for site chrome AND every home-page
   * section. Nav logo, hero copy, principles, sector cards, CTA copy, and
   * footer all reference this so everything aligns on the same left/right
   * axis at every viewport width. Fluid clamp: 1rem on tiny phones,
   * scales through 4vw, caps at 4rem on wide desktop (matches the old
   * --space-8 = 4rem inset on the nav).
   * --content-max: legacy cap kept only for text-heavy content pages
   * (article/section/people/contact main), NOT used on the home page. */
  --gutter: 2.5rem;
  --content-max: 72rem;
  --content-narrow: 52rem;

  @media (max-width: 900px) {
    --gutter: 1.375rem;
  }

  /* --measure: comfortable line-length ceiling for body paragraphs on
   * very wide viewports. Prevents 2500px lines of prose. */
  --measure: 32rem;
}