/* Design tokens: three colour themes (data-color) and three font pairs (data-font) set on <html>. */

@font-face {
  font-family: "Zen Old Mincho";
  src: url("/assets/fonts/zenoldmincho-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Zen Antique";
  src: url("/assets/fonts/zenantique-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "LXGW WenKai TC";
  src: url("/assets/fonts/lxgwwenkaitc-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-400_700-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Golos Text";
  src: url("/assets/fonts/golostext-400_700-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Colour theme 1: deep blue and turquoise */
  --brand: #0b2545;
  --brand-soft: #14365f;
  --accent: #0b7a86;
  --accent-hover: #085d67;
  --highlight: #62e0d4;
  --tint: #eaf4f6;
  --ink: #0d1b2a;
  --muted: #43566a;
  --line: #d3dee6;
  --field-line: #6c8192;
  --surface: #ffffff;
  --on-brand: #ffffff;
  --on-brand-muted: #cbd9e8;
  --error: #b3261e;
  --ok: #0b6b43;

  /* Font pair 1 */
  --font-head: "Zen Old Mincho", Georgia, "Times New Roman", serif;
  --font-body: "Onest", "Segoe UI", Roboto, Arial, sans-serif;
  --head-weight: 700;
  --head-tracking: -0.01em;
  --head-scale: 1;

  /* Type scale */
  --text: 1.0625rem;
  --text-small: 0.9375rem;
  --text-lead: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  --h1: calc(clamp(2.25rem, 4.6vw + 0.9rem, 4.25rem) * var(--head-scale));
  --h2: calc(clamp(1.75rem, 2.2vw + 1.1rem, 2.75rem) * var(--head-scale));
  --h3: calc(1.3125rem * var(--head-scale));

  /* Space, shape, motion */
  --wrap: 75rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --band: clamp(4rem, 8vw, 7rem);
  --radius: 0.375rem;
  --radius-large: 1rem;
  --shadow: 0 1.5rem 3rem -1.5rem rgb(13 27 42 / 35%);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header: 4.5rem;
}

[data-color="2"] {
  /* Colour theme 2: emerald and white */
  --brand: #0a3b2c;
  --brand-soft: #115241;
  --accent: #0b7a55;
  --accent-hover: #085d41;
  --highlight: #76e8b7;
  --tint: #eaf6f0;
  --ink: #0f221b;
  --muted: #42584d;
  --line: #d2e2d9;
  --field-line: #698577;
  --on-brand-muted: #cde3d8;
}

[data-color="3"] {
  /* Colour theme 3: graphite and sky blue */
  --brand: #1c232b;
  --brand-soft: #2b3540;
  --accent: #0a66c2;
  --accent-hover: #084f98;
  --highlight: #7cc4ff;
  --tint: #eef3f8;
  --ink: #161d24;
  --muted: #485563;
  --line: #d5dde5;
  --field-line: #707f8e;
  --on-brand-muted: #d0d8e1;
}

[data-font="2"] {
  --font-head: "Zen Antique", Georgia, "Times New Roman", serif;
  --font-body: "Onest", "Segoe UI", Roboto, Arial, sans-serif;
  --head-weight: 400;
  --head-tracking: 0;
  --head-scale: 0.96;
}

[data-font="3"] {
  --font-head: "LXGW WenKai TC", Georgia, "Times New Roman", serif;
  --font-body: "Golos Text", "Segoe UI", Roboto, Arial, sans-serif;
  --head-weight: 700;
  --head-tracking: 0;
  --head-scale: 1.02;
}