/* KhuselaGuard design tokens.
 *
 * Brand colours are exact and must not be changed. Everything else is derived
 * from them. Contrast ratios (WCAG 2.x) are noted for every text pairing we use;
 * AA needs 4.5:1 for body text, 3:1 for large text and UI outlines.
 *
 * Gold is the alert colour. Use it for: the moment an animal leaves its camp,
 * the primary button on dark sections, and very little else. Never use gold
 * for text on a light background (1.97:1 on white). Use it as a fill with
 * charcoal text on it (8.83:1).
 */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 62% 100%;
  font-style: normal;
  font-display: swap;
}

/* Arial, resized to Archivo's metrics, so text doesn't jump when the web
 * font arrives (values from scripts/build_fonts.py). */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
  size-adjust: 97.94%;
  ascent-override: 89.65%;
  descent-override: 21.44%;
  line-gap-override: 0%;
}

:root {
  /* Brand (exact) */
  --kg-green-900: #1B5E20; /* Primary Green: headers, primary buttons, logo */
  --kg-green-700: #2E7D32; /* Bright Green: hover states, highlights */
  --kg-charcoal: #1A1A1A;  /* Charcoal: body text, dark sections */
  --kg-gold: #F9A825;      /* Accent Gold: alert moments, primary CTA on dark */

  /* Derived neutrals (warm, from gold + charcoal) */
  --kg-bone: #F5F2EA;      /* page background. charcoal on it 15.56, green-900 7.03, green-700 4.58 */
  --kg-sand: #E9E4D8;      /* alternate light sections. charcoal 13.72, green-900 6.20, muted 5.41 */
  --kg-white: #FFFFFF;     /* form fields */
  --kg-line: #D6D0C2;      /* decorative rules only (1.37 on bone). Never as a field border. */
  --kg-muted: #5E5A51;     /* secondary text on light. 6.14 on bone, 5.41 on sand */
  --kg-field: #6B665C;     /* form field borders. 5.10 on bone (UI needs 3:1) */
  --kg-on-dark: #F5F2EA;   /* text on charcoal 15.56, on green-900 7.03 */
  --kg-on-dark-muted: #DCD7CB; /* secondary text on charcoal 12.12, on green-900 5.48 */
  --kg-line-dark: rgba(245, 242, 234, 0.18); /* decorative rules on dark */

  /* The app's own colours, for the sections that show the app. */
  --kg-paper: #F3F3F0;     /* app, day */
  --kg-night: #101010;     /* app, night */
  --kg-lime: #E3F65A;      /* the app's night accent. Only on the app-coloured sections; charcoal on it 15.4 */

  /* Functional (not brand): form errors only. 5.84 on bone, 6.54 on white, 5.15 on sand */
  --kg-error: #B3261E;

  /* Type */
  --font: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --stretch-display: 68%;
  --stretch-heading: 78%;
  --stretch-ui: 88%;
  /* The whole scale. Every heading on the site is one of these: nothing sets
   * its own size. */
  --text-label: 0.875rem;  /* 14px: small capitals above a heading */
  --text-sm: 0.9375rem;    /* 15px: captions, legal small print */
  --text-base: 1.125rem;   /* 18px body: read outdoors on a phone */
  --text-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);    /* 22-26: questions, list titles */
  --text-h3-lg: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);       /* 24-32: titles of steps, cards and captions */
  --text-h2-doc: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);   /* 28-40: headings inside a long document */
  --text-feature: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);    /* 28-48: a headline or a quotation given room */
  --text-h2: clamp(2.25rem, 1.45rem + 3.2vw, 4rem);        /* 36-64: every section */
  --text-h1: clamp(2.625rem, 1.6rem + 4.2vw, 4.75rem);     /* 42-76: every page */
  --text-hero: clamp(3.1rem, 1.35rem + 6.6vw, 7.5rem);     /* the home page only */
  --measure: 66ch;

  /* Space */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --section: clamp(64px, 9vw, 136px);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  /* Shape and motion */
  --radius: 3px;
  --radius-lg: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 64px;
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}