/*
 * jinze.dev design tokens — the ONE file for every color and font of the site.
 * Stable URL: /tokens.css. The public site and the auth service (/login, /admin) both link it.
 * Change a value here and the whole site changes. See docs/STYLE.md.
 *
 * Theme rules (D2, D19): light on :root. Dark when <html data-theme="dark">, or when the system
 * asks for dark and the toggle did not select light.
 */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Fonts */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', 'Songti SC', 'Noto Serif CJK SC', 'Noto Serif SC', 'Source Han Serif SC', SimSun, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Light theme: black hairlines on white paper */
  --paper: #fcfcfa;        /* page base */
  --paper-2: #f3f2ee;      /* raised surface: code blocks, input fields */
  --ink: #0c0c0d;          /* text and primary lines */
  --graphite: #5c5955;     /* secondary text and secondary lines (6.8:1 on paper) */
  --rule: #d6d3cd;         /* dividers and hairline borders */
  --accent: #e2430e;       /* signal orange: lines, marks, focus ring (not small text) */
  --accent-ink: #b13308;   /* signal orange for text and links (6.1:1 on paper) */
  --selection: #f6d2c3;    /* text selection background */
  --plate-blend: multiply; /* light: lines darken the paper */
}

[data-theme='dark'] {
  color-scheme: dark;
  --paper: #0c0c0d;
  --paper-2: #18181a;
  --ink: #edeae4;
  --graphite: #9e9991;
  --rule: #2c2b29;
  --accent: #ff5a1f;
  --accent-ink: #ff8150;
  --selection: #5a2410;
  --plate-blend: screen;   /* dark: lines lighten the paper */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: #0c0c0d;
    --paper-2: #18181a;
    --ink: #edeae4;
    --graphite: #9e9991;
    --rule: #2c2b29;
    --accent: #ff5a1f;
    --accent-ink: #ff8150;
    --selection: #5a2410;
    --plate-blend: screen;
  }
}

/* Print: always black on white paper, whatever the screen theme. */
@media print {
  :root,
  :root[data-theme] {
    color-scheme: light;
    --paper: #ffffff;
    --paper-2: #ffffff;
    --ink: #000000;
    --graphite: #3a3a3a;
    --rule: #bdbdbd;
    --accent: #000000;
    --accent-ink: #000000;
    --plate-blend: normal;
  }
}