/*
 * Fonts and design tokens. Ported from web/src/styles/fonts.css and tokens.css in
 * Shady-C/kiwisan-group-website. Base values are the 390 px mobile artboard; larger screens
 * override them below (mobile-first). Breakpoints: 640, 960 and 1280 px.
 */

/* Self-hosted variable fonts from the UI kit (Latin subset). Preloaded in base.njk. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
}

/* Metric-matched fallbacks so text does not jump when the web fonts arrive. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 96.12%;
  ascent-override: 76.47%;
  descent-override: 27.57%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 112.83%;
  ascent-override: 85.79%;
  descent-override: 22.25%;
  line-gap-override: 0%;
}

:root {
  --navy: #001029;
  --navy-2: #0A1D3C;
  --orange: #E5742C;       /* on navy only: slash, rules, primary button. Never text on light grounds. */
  --orange-text: #A9531A;  /* small orange text on white / mist (AA on both) */
  --silver: #AEADB0;       /* secondary text on navy */
  --ink: #3D4759;          /* body text on white */
  --ink-soft: #5D6678;     /* tertiary text on white (AA on mist) */
  --mist: #F3F4F6;
  --rule: #DADDE3;
  --rule-navy: rgba(255, 255, 255, .12);
  --error: #9F2D28;        /* form feedback (UI kit functional colours) */
  --success: #235A43;
  --input: #737D8C;        /* input border */

  --serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --sans: "Montserrat", "Montserrat Fallback", "Helvetica Neue", Arial, sans-serif;

  --gutter: 24px;
  --rail: 364px;           /* section-label column (desktop) */
  --measure: 840px;        /* single reading column (desktop) */
  --band: 88px;            /* vertical section padding */
  --slash: 29deg;          /* the K/G slash, from vertical */
}

/* Tablet: wider gutter, same rhythm as mobile */
@media (min-width: 640px) {
  :root { --gutter: 40px; }
}

/* Desktop: 1440 px artboard values */
@media (min-width: 960px) {
  :root {
    --gutter: 80px;
    --band: 128px;
  }
}