/* Design tokens. Colours and fonts are copied from the apps
   (apps/lib/core/theme/app_colors.dart, app_typography.dart): keep them in step. */

@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;      /* the site has its own night and day; browsers shouldn't re-colour it */

  /* Brand, as in the apps */
  --maroon: #7A1F2B;
  --maroon-dark: #5C161F;
  --maroon-tint: #F2E2E0;
  --gold: #D4A017;
  --gold-dark: #AD7F0E;
  --gold-tint: #FBF0D9;
  --cream: #FDF6EC;
  --cream-alt: #F7EBD8;
  --surface: #FFFFFF;
  --ink: #2B1B12;
  --ink-muted: #6B5A4E;
  --ink-faint: #9C8F84;
  --line: #E7DCCB;
  --line-strong: #D8C7AE;
  --success: #2E7D4F;
  --success-tint: #E3F3E8;
  --error: #B3261E;

  /* Website only: the night side of the bridge */
  --maroon-night: #3A0D14;
  --gold-glow: #FFE2A0;
  --on-night: #FDF6EC;
  --on-night-muted: #E3C9C4;
  /* Gold for small text. The brand golds are too close to the page behind them to read easily,
     so small gold words use these: both pass WCAG AA (4.5 to 1) on their backgrounds. */
  --gold-on-light: #8A6508;
  --gold-on-night: #E8B93A;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type: phone first, grows with the screen */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.55rem, 1.3rem + 1.1vw, 2.2rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --step-4: clamp(2.4rem, 1.5rem + 4.4vw, 4.75rem);

  --gutter: clamp(20px, 5vw, 40px);
  --measure: 1120px;
  --section: clamp(72px, 11vw, 136px);
  --header-h: 64px;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;

  --shadow-1: 0 1px 2px rgba(43, 27, 18, 0.06), 0 8px 24px rgba(43, 27, 18, 0.08);
  --shadow-2: 0 24px 60px rgba(43, 27, 18, 0.24);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Gold foil: main.js moves --foil with the pointer, the scroll and the phone's tilt */
  --foil: 35%;
}