/* Design tokens. Every colour, font and spacing value used by the site lives here. */

:root {
  color-scheme: light;

  /* Colours — taken from the CV (cvstyle.sty), names in comments */
  --color-bg: #f5f5fc; /* page: a breath of the CV's lavender instead of flat white */
  --color-card: #ffffff; /* cards, tiles and buttons standing on the page */
  --color-card-border: #dcdef6;
  --color-surface: #ecedfd; /* cvpale: hero and footer */
  --color-text: #1f2033; /* cvink */
  --color-muted: #6b6e80; /* cvgrey: on white only (4.3:1 on the surface colour) */
  --color-accent: #3b3fd9; /* cvblue */
  --color-accent-contrast: #ffffff;
  --color-highlight: #8e1b4f; /* cvplum */
  --color-border: #b9bbe6; /* cvleader: decoration only, never text */
  --color-tag-bg: #e6e7fb; /* cvtag */
  --color-tag-text: #3b3fd9;
  --color-focus: #8e1b4f;
  --color-shadow: rgb(31 32 51 / 12%);
  --shadow-card: 0 1px 2px rgb(31 32 51 / 5%), 0 10px 28px rgb(59 63 217 / 7%);
  --glow-blue: rgb(59 63 217 / 12%); /* soft washes of the CV's two colours behind the page */
  --glow-plum: rgb(142 27 79 / 9%);

  /* Charts: the result in the accent, the baseline it is compared with in grey */
  --chart-focus: #3b3fd9;
  --chart-rest: #6b6e80;
  --chart-grid: #e6e7f4;

  /* Typography — same roles as on the CV. The *Fallback families are defined in base.css. */
  --font-heading: "Poppins", "Poppins Fallback", system-ui, sans-serif;
  --font-body: "TP Text", "TP Text Fallback", system-ui, sans-serif;
  --font-mono: "Space Mono", "Space Mono Fallback", ui-monospace, Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(2.125rem, 1.5rem + 3vw, 3rem);

  --leading-tight: 1.2;
  --leading-base: 1.6;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Layout */
  --page-max: 76rem;
  --page-gutter: 1rem;
  --measure: 70ch;
  --media-width: 17rem;
  --band-width: 0.5rem;
  --photo-size: 5rem;
  --topbar-height: 3.25rem;

  /* Shapes */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --border-width: 1px;
  --focus-width: 3px;
}

/* Dark theme, chosen with the toggle in the top bar (theme.js). Same roles, lighter tints of the CV's blue and plum. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0d0e1a;
  --color-card: #14172c;
  --color-card-border: #2d315a;
  --color-surface: #171a33;
  --color-text: #eceefb;
  --color-muted: #a9acc9;
  --color-accent: #a3a7ff;
  --color-accent-contrast: #0d0e1a;
  --color-highlight: #f08db8;
  --color-border: #3a3e6a;
  --color-tag-bg: #23274d;
  --color-tag-text: #c1c4ff;
  --color-focus: #f08db8;
  --color-shadow: rgb(0 0 0 / 45%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px rgb(0 0 0 / 35%);
  --glow-blue: rgb(120 126 255 / 15%);
  --glow-plum: rgb(240 141 184 / 9%);
  --chart-focus: #7d82f5;
  --chart-rest: #6a6e92;
  --chart-grid: #262a4b;
}

@media (min-width: 48em) {
  :root {
    --page-gutter: 2rem;
    --band-width: 1rem;
    --photo-size: 7.5rem;
  }
}