/* css/tokens.css — Kameleo Ltd
   Every colour on the site derives from one hue (--hue). The swatches in the hero
   change it; the default is 275 (Dusk). No literal colours outside this file. */

@property --hue { syntax: "<number>"; inherits: true; initial-value: 275; }

/* ---- Colour: light ---- */
:root {
  --hue: 275;
  --paper:    oklch(97%   0.022 var(--hue));
  --paper-2:  oklch(93.5% 0.035 var(--hue));
  --ink:      oklch(22%   0.045 var(--hue));
  --ink-soft: oklch(42%   0.04  var(--hue));
  --line:     oklch(84%   0.04  var(--hue));
  --skin:     oklch(80%   0.15  var(--hue));
  --on-skin:  oklch(21%   0.05  var(--hue));
  --link:     oklch(43%   0.13  var(--hue));
  color-scheme: light;

  /* ---- Type ---- */
  --display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Space: 4px scale ---- */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;

  /* ---- Easing ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Colour: dark ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:    oklch(19% 0.03  var(--hue));
    --paper-2:  oklch(24% 0.04  var(--hue));
    --ink:      oklch(95% 0.02  var(--hue));
    --ink-soft: oklch(76% 0.035 var(--hue));
    --line:     oklch(36% 0.04  var(--hue));
    --skin:     oklch(76% 0.15  var(--hue));
    --on-skin:  oklch(19% 0.05  var(--hue));
    --link:     oklch(84% 0.12  var(--hue));
    color-scheme: dark;
  }
}

/* ---- Swatch chips ----
   Each swatch button carries its own hue in --h (set inline), so its chip colour
   is resolved on the button itself, not on :root. Same in both themes. */
[data-hue] { --swatch: oklch(88% 0.11 var(--h)); }

/* ---- Typefaces (self-hosted, latin subset, SIL Open Font License) ---- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-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: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono-400-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: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-mono-500-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;
}