/* Design tokens — from Figma variables (Patomy/Website/Desktop). */
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-beige: #f2f2f2;
  --color-gray: #d6d3cf;
  --color-light-blue: #a9d3fd;
  --color-medium-blue: #678bc2;
  --color-intense-blue: #3589de;
  --color-dark-blue: #181e2b;
  --color-medium-brown: #5a2235;
  --color-border-action: #141414;

  --color-bg: var(--color-beige);
  --color-text: var(--color-dark-blue);
  --color-accent: var(--color-intense-blue);

  /* Typography (serif display headings, sans body — set exact fonts later) */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: Optima, Candara, "Segoe UI", sans-serif;
  --fs-base: 1rem;

  /* Spacing */
  --space-s: 8px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  /* Layout (Figma desktop frame is 1440 wide, 60px side margins) */
  --container-max: 1320px;
  --gutter: 60px;

  /* Radii */
  --radius-xs: 4px;
  --radius-full: 1440px;
}

/* Theme-dependent (semantic) tokens — light is the default */
:root {
  color-scheme: light;
  --color-eyebrow: var(--color-intense-blue);
  --color-nav-fg: var(--color-dark-blue);
  --color-nav-btn-bg: var(--color-dark-blue);
  --color-nav-btn-fg: var(--color-beige);
  --color-card-bg: var(--color-white);
  --color-card-border: var(--color-beige);
  --color-arc: var(--color-white);
  --arc-opacity: 1;
  --color-pill-bg: var(--color-dark-blue);
  --color-pill-fg: var(--color-beige);

  /* Intro: colours of the sign's second arc after it changes, and of the left line pair (inner / outer
     stripe) when it zooms out of the sign. Palettes can override these (see palettes/*.css). */
  --intro-sign-arc-end: var(--color-medium-brown);
  --intro-left-inner: var(--color-medium-brown);
  --intro-left-outer: var(--color-medium-brown);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--color-dark-blue);
  --color-text: var(--color-beige);
  --color-eyebrow: var(--color-light-blue);
  --color-nav-fg: var(--color-white);
  --color-nav-btn-bg: var(--color-white);
  --color-nav-btn-fg: var(--color-dark-blue);
  --color-card-bg: var(--color-dark-blue);
  --color-card-border: var(--color-medium-blue);
  --color-arc: var(--color-medium-blue);
  --arc-opacity: 0.06;
  --color-pill-bg: var(--color-beige);
  --color-pill-fg: var(--color-dark-blue);
}

/* Palette 2 intro: the sign's second arc stays sky blue, and the left line pair is sky blue + burgundy
   (burgundy comes from the colour swap in v2.txt). Appended to css/tokens.css of the /v2/ build. */
:root {
  --intro-sign-arc-end: #8cacd3;
  --intro-left-inner: #a9d3fd;
}