/* Design tokens.
   Every color, font, size, space, radius and shadow the site uses is defined
   here, in two layers:
   - Brand: the raw values from the brand guidelines. Change these to re-skin.
   - Roles: what each value is for. The rest of the CSS refers only to roles,
     so a role can be pointed at a different brand value without touching
     component styles. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

:root {
  /* Brand palette */
  --brand-navy: #1D2B36;
  --brand-cream: #F6F2EA;
  --brand-gold: #B79355;
  --brand-warm-gray: #6E6A60;
  --brand-stone: #E6E0D4;
  --brand-white: #FFFFFF;

  /* Brand typefaces, with the fallbacks the guidelines name */
  --brand-font-sans: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --brand-font-serif: 'Source Serif 4', 'Georgia', serif;

  /* Text */
  --color-text: var(--brand-navy);
  --color-text-muted: var(--brand-warm-gray);
  --color-heading: var(--brand-navy);
  --color-link: var(--brand-navy);
  --color-link-hover: var(--brand-navy);
  /* Gold is decoration only on light backgrounds (2.9:1), never text. */
  --color-link-underline-hover: var(--brand-gold);

  /* Surfaces */
  --color-bg: var(--brand-white);
  --color-surface: var(--brand-white);
  --color-surface-muted: var(--brand-cream);
  --color-surface-dark: var(--brand-navy);

  /* Lines */
  --color-border: var(--brand-stone);
  /* Form controls need a border that reads as an edge, which stone alone doesn't. */
  --color-border-strong: color-mix(in srgb, var(--brand-warm-gray) 45%, var(--brand-stone));
  --color-accent: var(--brand-gold);

  /* Actions */
  --color-primary: var(--brand-navy);
  --color-primary-hover: color-mix(in srgb, var(--brand-navy) 82%, var(--brand-white));
  --color-on-primary: var(--brand-cream);
  --color-focus: var(--brand-navy);

  /* On dark surfaces (crisis bar, callouts) */
  --color-on-dark: var(--brand-cream);
  --color-on-dark-muted: color-mix(in srgb, var(--brand-cream) 85%, var(--brand-navy));
  /* Gold on navy is 5:1, which the guidelines allow for headings and labels. */
  --color-on-dark-accent: var(--brand-gold);
  --color-focus-on-dark: var(--brand-gold);

  /* Overlays */
  --color-overlay: color-mix(in srgb, var(--brand-navy) 55%, transparent);
  --color-backdrop: color-mix(in srgb, var(--brand-navy) 92%, black);

  /* Status colors sit outside the brand palette, which defines none. */
  --color-success: #008000;
  --color-success-bg: #48C774;
  --color-warning: #FFC107;
  --color-warning-bg: #FFF8E1;
  --color-warning-strong: #FFDD57;
  --color-danger: #F14668;
  --color-danger-bg: #FEECF0;

  /* Font roles */
  --font-heading: var(--brand-font-sans);
  --font-body: var(--brand-font-serif);
  --font-ui: var(--brand-font-sans);
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights. Jost is loaded at 400 and 500, Source Serif 4 at 400 and 600. */
  --weight-regular: 400;
  --weight-heading: 400;
  --weight-heading-strong: 500;
  --weight-ui-strong: 500;
  --weight-body-strong: 600;

  /* Type scale, from the guidelines' web sizes */
  --text-display: 4rem;
  --text-h1: 2.75rem;
  --text-h2: 1.875rem;
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-body: 1.0625rem;
  --text-lead: 1.1875rem;
  --text-small: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-quote: 1.5rem;
  --text-label: 0.8125rem;

  --leading-display: 1.1;
  --leading-h1: 1.15;
  --leading-h2: 1.2;
  --leading-body: 1.5;
  --leading-relaxed: 1.7;
  --leading-quote: 1.4;

  /* Labels echo FOUNDATION in the logo: medium caps, +20% tracking. */
  --tracking-label: 0.2em;

  /* Spacing */
  --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: 4rem;

  /* Layout */
  --container-width: 1200px;
  --container-gutter: 15px;
  --container-gutter-mobile: 10px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Shadows, tinted navy rather than black so they sit in the palette */
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--brand-navy) 8%, transparent);
  --shadow-md: 0 2px 8px color-mix(in srgb, var(--brand-navy) 10%, transparent);
  --shadow-lg: 0 4px 12px color-mix(in srgb, var(--brand-navy) 14%, transparent);
  --shadow-xl: 0 4px 20px color-mix(in srgb, var(--brand-navy) 40%, transparent);
}

@media (max-width: 768px) {
  :root {
    --text-display: 2.75rem;
    --text-h1: 2rem;
    --text-h2: 1.5rem;
    --text-h3: 1.25rem;
    --text-quote: 1.25rem;
  }
}