/*
 * Design tokens of the website, written by scripts/brand.py. Do not edit this file.
 * Colours come from the app's light theme (mobile/src/v2/theme/tokens.ts) except the two greys of running
 * text, which are the site's own (WEB-18 round 3); the scales are the app's `space` and `radius`. After a
 * change in either, run scripts/brand.py (--check fails while this file is stale). WEB-15 S1.
 * The site is light only (WEB-18 S1): there is no dark scheme; the night panels keep fixed colours.
 */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Nunito-Regular-3.602.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+25B2, U+25BC, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Nunito-SemiBold-3.602.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+25B2, U+25BC, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/Nunito-Bold-3.602.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+25B2, U+25BC, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial");
  size-adjust: 101.91%;
  ascent-override: 99.20%;
  descent-override: 34.64%;
  line-gap-override: 0.00%;
}

:root {
  color-scheme: light;

  /* Surfaces, text, accent and status: the app's light scheme */
  --bg-canvas: #F2F2F7;
  --bg-surface: #FFFFFF;
  --bg-subtle: #E9E9EE;
  --border-subtle: #E3E3E8;
  --border-strong: #838388;
  --text-primary: #141414;
  --text-secondary: #3F3F45;
  --text-tertiary: #5C5C61;

  --accent: #3F4BD1;
  --accent-pressed: #323CB0;
  --accent-tint: #ECEEFC;
  --accent-text: #3540BD;
  --text-on-accent: #FFFFFF;

  --button-fill: #141414;
  --button-pressed: #3A3A3C;
  --button-text: #FFFFFF;
  --scrim: rgb(0 0 0 / 0.5);

  --status-confirmed-fg: #0E6B3A;
  --status-confirmed-bg: #E6F5EC;
  --status-pending-fg: #7A4D00;
  --status-pending-bg: #FFF3D6;
  --status-failed-fg: #A3211B;
  --status-failed-bg: #FDEBEA;
  --status-unknown-fg: #48484A;
  --status-unknown-bg: #E9E9EE;
  --status-attention-fg: #9A3A0C;
  --status-attention-bg: #FFEDE3;
  --status-attention-solid: #B8440F;
  --status-attention-solid-label: #FFFFFF;

  /* The night panel (the Welcome's look): fixed colours */
  --night-bg: #1B1B1A;
  --night-text: #FAF8F5;
  --night-text-2: #DAD7D0;
  --glow-indigo: #3346C8;
  --glow-indigo-opacity: 0.55;
  --glow-teal: #13A39A;
  --glow-teal-opacity: 0.45;
  --glow-core: #DCE6FF;
  --glow-core-opacity: 0.22;
  --orb-disc: #121633;

  /* The prospect page's Indigo ground (DEMO-3 D2) */
  --indigo-bg: #3F4BD1;
  --indigo-deep: #2A33A3;
  --indigo-text-2: #ECEEFC;
  --indigo-teal-opacity: 0.18;
  --indigo-core-opacity: 0.05;

  /* Elevation: light uses shadows */
  --shadow-color: 18 22 28;
  --e1: 0 1px 3px rgb(var(--shadow-color) / 0.08);
  --e2: 0 8px 24px rgb(var(--shadow-color) / 0.12);
  --e3: 0 16px 48px rgb(var(--shadow-color) / 0.2);
  --e2-fill: var(--bg-surface);

  /* Type: SF Pro Rounded where the system has it, else the app's Nunito (the web fallback stack) */
  --font-family: ui-rounded, "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  /* Type (WEB-18 design 4.1, rem at 16 px): weight carries the hierarchy; the hero is the only 700 headline */
  --type-hero: 700 clamp(2.5rem, 1.55rem + 3.2vw, 3.5rem) / 1.05 var(--font-family);
  --type-page: 600 clamp(2.125rem, 1.8rem + 1.6vw, 3rem) / 1.08 var(--font-family);
  --type-display: 500 clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem) / 1.12 var(--font-family);
  --type-title: 600 clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem) / 1.3 var(--font-family);
  --type-lede: 400 clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem) / 1.55 var(--font-family);
  --type-metric: 700 2.125rem / 2.5rem var(--font-family);
  --type-heading: 600 1.0625rem / 1.5rem var(--font-family);
  --type-body: 400 clamp(1rem, 0.96rem + 0.15vw, 1.0625rem) / 1.55 var(--font-family);
  --type-body-strong: 600 1rem / 1.5 var(--font-family);
  --type-callout: 400 0.9375rem / 1.45 var(--font-family);
  --type-caption: 400 0.8125rem / 1.4 var(--font-family);
  --type-overline: 600 0.75rem / 1rem var(--font-family);
  --tracking-hero: -0.03em;
  --tracking-page: -0.025em;
  --tracking-metric: -0.5px;
  --tracking-display: -0.02em;
  --tracking-title: -0.01em;
  --tracking-overline: 0.08em;

  /* Space, the app's 4-point grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  /* Radius (the app's, and the night panel's) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;
  --r-panel: 32px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Layout and rhythm (round 3, C16): sections 56 px under 960, 80 px from 960, top and bottom */
  --content-max: 1200px;
  --measure: 38em;
  --gutter: 20px;
  --section-y: 56px;
  --band: #FFFFFF;
  --frame-ring: 0 0 0 1px rgb(18 22 28 / 0.06), 0 12px 32px -8px rgb(18 22 28 / 0.14);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

@media (min-width: 960px) {
  :root {
    --section-y: 80px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 40px;
  }
}