/*
 * Design tokens for the developer-portfolio theme (v2).
 *
 * The palette carries the resume's identity: slate ink, deep teal, saffron.
 * Category colours mark the kind of product (apps, websites, extensions,
 * developer tools, open source); status colours match the resume chips.
 * Every text colour here keeps 4.5:1 or better on --bg and --surface.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f4f6f6;
  --surface: #ffffff;
  --surface-2: #eaefee;
  --surface-3: #dfe6e5;
  --line: #d9e1e0;
  --line-strong: #b9c5c5;

  /* Text */
  --ink: #14202b;
  --ink-2: #364452;
  --muted: #5a6876;

  /* Brand */
  --teal: #0b5d66;
  --teal-hi: #0e7480;
  --teal-tint: #e0eeee;
  --on-teal: #ffffff;
  --saffron: #e5a11a;
  --saffron-tint: #fbefd2;
  --on-saffron: #2a1c00;

  /* Category signals: text-safe colour + background tint */
  --c-apps: #2c54c4;
  --c-apps-tint: #e5ebfa;
  --c-web: #6b43bf;
  --c-web-tint: #eee7fa;
  --c-ext: #b04e17;
  --c-ext-tint: #fae8dc;
  --c-tools: #0b5d66;
  --c-tools-tint: #e0eeee;
  --c-oss: #ad2a5c;
  --c-oss-tint: #fae3ec;

  /* Status chips (same pairs as the resume) */
  --st-pub-bg: #dcf1e4;
  --st-pub-fg: #124f33;
  --st-pub-dot: #2b9a60;
  --st-rel-bg: #e1ebfb;
  --st-rel-fg: #1a4590;
  --st-rel-dot: #3567d1;
  --st-rev-bg: #fcebc7;
  --st-rev-fg: #6b4100;
  --st-rev-dot: #d08a10;
  --st-dev-bg: #edf0f3;
  --st-dev-fg: #364252;
  --st-dev-dot: #7b8794;

  /* Code blocks stay dark in both themes */
  --code-bg: #111a22;
  --code-ink: #dce6ec;
  --code-line: #223241;
  --inline-code-bg: #e6ecec;
  --inline-code-ink: #8a3412;

  /* Type */
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-md: 1.25rem;     /* 20 */
  --fs-lg: 1.5rem;      /* 24 */
  --fs-xl: clamp(1.75rem, 1.25rem + 1.9vw, 2.5rem);
  --fs-2xl: clamp(2.375rem, 1.3rem + 4.1vw, 4.5rem);

  --lh-tight: 1.04;
  --lh-snug: 1.22;
  --lh-body: 1.6;

  /* Space (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem);
  --container: 75rem;   /* 1200px */
  --measure: 42.5rem;   /* about 68 characters of article text */

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --r-icon: 22.5%;

  /* Only app icons cast a shadow, like icons on a home screen */
  --icon-shadow: 0 1px 1.5px rgb(20 32 43 / 0.12), 0 8px 18px -8px rgb(20 32 43 / 0.32);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --header-h: 64px;
}

/* Dark theme, chosen in the header toggle */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1316;
  --surface: #161b1f;
  --surface-2: #1d242a;
  --surface-3: #252e35;
  --line: #29323a;
  --line-strong: #3b4751;
  --ink: #e8edf0;
  --ink-2: #c3ccd3;
  --muted: #93a0aa;
  --teal: #6fcfc8;
  --teal-hi: #93e2dc;
  --teal-tint: #15302f;
  --on-teal: #062320;
  --saffron: #f0b43c;
  --saffron-tint: #33270f;
  --on-saffron: #241800;
  --c-apps: #9db3ff;
  --c-apps-tint: #1c2542;
  --c-web: #c0a6ff;
  --c-web-tint: #2a2042;
  --c-ext: #ffad7a;
  --c-ext-tint: #3a2417;
  --c-tools: #6fcfc8;
  --c-tools-tint: #15302f;
  --c-oss: #ff95bd;
  --c-oss-tint: #3b1a29;
  --st-pub-bg: #163626;
  --st-pub-fg: #a6e3bf;
  --st-pub-dot: #4cc27f;
  --st-rel-bg: #1a2a48;
  --st-rel-fg: #b3c9f5;
  --st-rel-dot: #6f97ea;
  --st-rev-bg: #3a2c0c;
  --st-rev-fg: #f4d28d;
  --st-rev-dot: #e8a92a;
  --st-dev-bg: #242c33;
  --st-dev-fg: #c3ccd3;
  --st-dev-dot: #8a97a2;
  --code-bg: #0b1015;
  --code-line: #1f2a33;
  --inline-code-bg: #222b31;
  --inline-code-ink: #ffb38a;
  --icon-shadow: 0 1px 1.5px rgb(0 0 0 / 0.4), 0 8px 18px -8px rgb(0 0 0 / 0.7);
}

/* Same dark values when the visitor's system prefers dark and they haven't chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1316;
    --surface: #161b1f;
    --surface-2: #1d242a;
    --surface-3: #252e35;
    --line: #29323a;
    --line-strong: #3b4751;
    --ink: #e8edf0;
    --ink-2: #c3ccd3;
    --muted: #93a0aa;
    --teal: #6fcfc8;
    --teal-hi: #93e2dc;
    --teal-tint: #15302f;
    --on-teal: #062320;
    --saffron: #f0b43c;
    --saffron-tint: #33270f;
    --on-saffron: #241800;
    --c-apps: #9db3ff;
    --c-apps-tint: #1c2542;
    --c-web: #c0a6ff;
    --c-web-tint: #2a2042;
    --c-ext: #ffad7a;
    --c-ext-tint: #3a2417;
    --c-tools: #6fcfc8;
    --c-tools-tint: #15302f;
    --c-oss: #ff95bd;
    --c-oss-tint: #3b1a29;
    --st-pub-bg: #163626;
    --st-pub-fg: #a6e3bf;
    --st-pub-dot: #4cc27f;
    --st-rel-bg: #1a2a48;
    --st-rel-fg: #b3c9f5;
    --st-rel-dot: #6f97ea;
    --st-rev-bg: #3a2c0c;
    --st-rev-fg: #f4d28d;
    --st-rev-dot: #e8a92a;
    --st-dev-bg: #242c33;
    --st-dev-fg: #c3ccd3;
    --st-dev-dot: #8a97a2;
    --code-bg: #0b1015;
    --code-line: #1f2a33;
    --inline-code-bg: #222b31;
    --inline-code-ink: #ffb38a;
    --icon-shadow: 0 1px 1.5px rgb(0 0 0 / 0.4), 0 8px 18px -8px rgb(0 0 0 / 0.7);
  }
}

/* Category mapping: set data-cat on any element to get --cat and --cat-tint */
[data-cat="apps"]  { --cat: var(--c-apps);  --cat-tint: var(--c-apps-tint); }
[data-cat="web"]   { --cat: var(--c-web);   --cat-tint: var(--c-web-tint); }
[data-cat="ext"]   { --cat: var(--c-ext);   --cat-tint: var(--c-ext-tint); }
[data-cat="tools"] { --cat: var(--c-tools); --cat-tint: var(--c-tools-tint); }
[data-cat="oss"]   { --cat: var(--c-oss);   --cat-tint: var(--c-oss-tint); }