/* ============================================================
   Design tokens — single source of truth for blog + Studio CMS.
   Mirrors blog/styles.css (the canonical spec).
   ============================================================ */

/* Self-hosted Latin fonts (replaces Google Fonts CDN, which is
   unreachable from mainland China). Hanken Grotesk is a variable-weight
   file covering 400-600; we declare one @font-face per used weight so
   the browser only fetches the single file. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* LXGW WenKai Screen — loaded via /fonts/wenkai.css (separate stylesheet
   with ~70 unicode-range @font-face slices from the npm package; the
   browser only downloads the woff2 chunks the page actually uses). */

:root {
  /* color (light) */
  --bg:             #fbfaf7;
  --bg-panel:       #ffffff;
  --hairline:       rgba(28, 25, 23, 0.08);
  --hairline-strong:rgba(28, 25, 23, 0.14);
  --text-heading:   #1c1917;
  --text-primary:   #2a2724;
  --text-secondary: #8a847e;
  --text-tertiary:  #b8b3ad;
  --accent:         #1c1917;
  --chip-bg:        rgba(28, 25, 23, 0.045);
  --danger:         #b14438;

  /* status hues (kept subdued to fit the monochromatic palette) */
  --status-draft:     #a38a52;
  --status-scheduled: #5d7aa6;
  --status-published: #5a8569;

  /* type */
  --font-body:    "Hanken Grotesk", "LXGW WenKai Screen", ui-sans-serif, system-ui, -apple-system, "PingFang SC", sans-serif;
  --font-display: "Instrument Serif", "LXGW WenKai Screen", "Times New Roman", "Songti SC", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-display-italic-size: 20px;
  --t-display-italic-lh:   1.2;
  --t-body3-size:          16px;
  --t-body3-lh:            1.5;
  --t-body3-weight:        400;
  --t-sub2-size:           13px;
  --t-sub2-lh:             1.35;
  --t-caption-size:        11px;
  --t-caption-lh:          1.4;

  /* spacing (4px base) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-20: 80px;

  /* layout */
  --col-max:         550px;
  --col-max-cms:     600px;
  --thumb-w:         60px;
  --thumb-h:         34px;
  --polaroid-w:      57px;
  --polaroid-h:      32px;
  --polaroid-border: 2.8px;
  --polaroid-edge:   #ffffff;

  /* radius */
  --r-sm: 2px;
  --r-md: 6px;
  --r-pill: 999px;

  /* shadow */
  --sh-polaroid:       0 1.5px 2px -0.25px rgba(0, 0, 0, 0.18);
  --sh-polaroid-inset: inset 0 0 1px 0.5px rgba(0, 0, 0, 0.1);
  --sh-lift:           0 12px 28px -8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.08);
  --sh-lift-hover:     0 18px 36px -8px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.08);

  /* motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    200ms;
  --dur-base:    360ms;
  --dur-slow:    600ms;
  --stagger-step:40ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:              #1c1917;
    --bg-panel:        #232020;
    --hairline:        rgba(245, 245, 244, 0.08);
    --hairline-strong: rgba(245, 245, 244, 0.16);
    --text-heading:    #f5f5f4;
    --text-primary:    #e7e5e4;
    --text-secondary:  #9a938c;
    --text-tertiary:   #5b5651;
    --accent:          #f5f5f4;
    --chip-bg:         rgba(245, 245, 244, 0.06);
    --danger:          #d97a6e;

    --status-draft:     #c2a76a;
    --status-scheduled: #8aa3cb;
    --status-published: #8bb39c;

    --polaroid-edge:   #e7e5e4;
  }
}

/* placeholder gradients reused by both views */
.ph-1 { background: linear-gradient(135deg, #d4b89a, #b08560); }
.ph-2 { background: linear-gradient(135deg, #a8c4d2, #6a8aaf); }
.ph-3 { background: linear-gradient(135deg, #c4d2b3, #82a079); }
.ph-4 { background: linear-gradient(135deg, #cdb6cf, #8c6f9d); }
.ph-5 { background: linear-gradient(135deg, #ddd3bd, #b09e84); }
.ph-6 { background: linear-gradient(135deg, #d5a89a, #a35e4f); }
.ph-7 { background: linear-gradient(135deg, #c1c4d4, #6e779b); }