/* The marketing site's tokens: the one place a colour, size or timing is written down.
   The names follow the site design (web/_reference, not deployed); the values are the app's own
   (mobile/src/constants/theme.ts), so the site, the app and the App Store icon read as one thing.
   Change a brand colour there and here together.

   Citrus never sits on paper (1.1:1). On violet grounds the accent is citrus carrying ink; on paper
   the same role is violet carrying paper, via --action / --on-action below. */

/* Served from here, not Google Fonts, so a visitor's address never goes to Google (and the CSP only
   allows fonts from this origin). Same files as style.css uses. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin.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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* Colour ---------------------------------------------------------------- */
  --brand: #2e1180; /* deep violet: heroes, dark sections, the footer */
  --brand-bright: #4b21c9; /* electric violet: actions on paper, active states */
  --brand-tint: #cfc3f7; /* pale lilac: secondary text on violet */
  --brand-deep: #1f0b5a; /* a shade of deep violet: the download band */
  --brand-raised: #3a1a96; /* cards sitting on violet */
  --brand-wash: #e6e0fa; /* lilac tint */

  --accent: #c7f53f; /* citrus: only ever on violet, always carrying ink */
  --accent-deep: #b3e02c;

  --bone: #f3f0e8; /* paper */
  --bone-deep: #e9e5da;
  --bone-light: #f8f6f1;

  --surface: #ffffff;
  --surface-line: #ddd8cc;

  --ink: #16121f;
  --ink-muted: #5d5670;
  --ink-inverse: #ffffff;

  --error: #d2333f;

  /* The primary action on paper. */
  --action: var(--brand-bright);
  --action-hover: #3d19ab;
  --on-action: var(--bone);

  /* Type ------------------------------------------------------------------ */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --display-1: clamp(2.5rem, 1.55rem + 4.05vw, 4.75rem);
  --display-2: clamp(2.125rem, 1.62rem + 2.15vw, 3.5rem);
  --display-3: clamp(1.75rem, 1.41rem + 1.45vw, 2.625rem);
  --display-4: clamp(1.375rem, 1.24rem + 0.58vw, 1.75rem);
  --title: 1.0625rem;
  --body-lg: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem);
  --body: 1rem;
  --body-sm: 0.875rem;
  --caption: 0.8125rem;
  --label: 0.6875rem;

  /* Shape, elevation, motion --------------------------------------------- */
  --r-card: 1.25rem;
  --r-inner: 0.75rem;
  --r-frame: 2.25rem;
  --r-pill: 9999px;

  --shadow-raised: 0 1px 2px rgba(22, 18, 31, 0.04), 0 8px 24px -12px rgba(22, 18, 31, 0.18);
  --shadow-lifted: 0 2px 4px rgba(22, 18, 31, 0.05), 0 24px 56px -24px rgba(22, 18, 31, 0.35);
  --shadow-on-brand: 0 24px 64px -28px rgba(15, 5, 45, 0.9);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.5s;

  --gutter: 1rem;
  --max: 72rem;
  --header-h: 4.5rem;
  --dot-grid: radial-gradient(circle at 1px 1px, rgba(207, 195, 247, 0.16) 1px, transparent 0);
  --dot-grid-ink: radial-gradient(circle at 1px 1px, rgba(22, 18, 31, 0.09) 1px, transparent 0);

  /* The app inside the phone mockups: its own sticker style, not the site's. */
  --app-border: 2px solid var(--ink);
  --app-shadow: 0 3px 0 var(--ink);
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
  }
}