/* =====================================================================
 * design-tokens.css — single source of truth for colors and the
 * TYPOGRAPHY HIERARCHY shared across every page.
 *
 * Both pages <link> this BEFORE their own <style> block, so anything
 * here is the default and per-page rules below can still override.
 *
 * HOW THE TYPOGRAPHY HIERARCHY WORKS:
 *   Each text role (Heading1, BodyText1, Caption, Logo, …) is
 *   implemented as an attribute selector below. To apply a role to
 *   an element in HTML, tag it with data-type="<role>":
 *
 *     <h1 data-type="Heading1">Tu Gu</h1>
 *     <p  data-type="BodyText1">Lorem ipsum…</p>
 *     <a  data-type="Caption" href="…">Instagram</a>
 *
 *   The CSS rules below set font-family, size, weight, line-height,
 *   letter-spacing, and uppercase/italic treatment for that role.
 *   Change a role here and every tagged element across every page
 *   updates together.
 *
 *   The Inspector mode (?inspect URL param, see inspector.js) reads
 *   the same data-type attribute and shows it in a hover tooltip so
 *   you can see at a glance which role is being used where.
 * ===================================================================== */

:root {

  /* ---- COLORS ------------------------------------------------------ */
  --color-bg:      #0c0c0c;
  --color-surface: #141414;
  --color-border:  #2a2a2a;
  --color-text:    #e8e4dc;
  --color-muted:   #7a7670;
  --color-accent:  #c9a96e;
  --color-accent2: #8fb8c4;

  --bg:      var(--color-bg);
  --surface: var(--color-surface);
  --border:  var(--color-border);
  --text:    var(--color-text);
  --muted:   var(--color-muted);
  --accent:  var(--color-accent);
  --accent2: var(--color-accent2);

  /* ===================================================================
     TYPOGRAPHY HIERARCHY — SIZES, LINE-HEIGHTS & FONT FAMILIES
     ===================================================================
     Every text element on every page is tagged with data-type="…"
     and inherits its typography from the matching role below.

     EACH ROLE OWNS ITS OWN SIZE (Latin + CJK), LINE-HEIGHT, WEIGHT,
     ITALIC SWITCH, and FONT STACK (Latin + CJK). To restyle a role,
     edit only its line below — the rule block further down reads
     every value through a CSS variable, so no role-specific CSS
     needs to change.

       --heading-1-size      Latin font-size, e.g. 6rem
       --heading-1-size-cjk  CJK font-size (used in zh mode)
       --heading-1-line      line-height, e.g. 0.95
       --heading-1-weight    font-weight, e.g. 300 / 400 / 700
       --heading-1-italic    `italic` to turn on italic, `normal` to turn off
       --heading-1-font      Latin font stack
       --heading-1-font-cjk  Chinese font stack (auto-applied in zh mode)

     WHY THE -size-cjk KNOB EXISTS:
     Chinese glyphs (Noto Serif SC) fill the em-box much more than
     Latin glyphs (Cormorant Garamond / DM Mono), so the same
     `font-size` renders visually bigger in zh mode and can grow the
     page height. The -size-cjk variant lets you dial those roles
     down independently — most useful on the mono-based roles
     (Heading5, Caption, ScrollHint, Footnote) where the jump is
     largest. By default each -size-cjk is `var(--<role>-size)`, so
     it tracks the Latin size (including the responsive @media
     scaling at the bottom of this file) until you override it with
     a literal value like `0.62rem`.

     The first font in a stack that's available wins; the generic
     family at the end (serif / monospace) is the safety net. In 中文
     mode the role rules swap to the -font-cjk stack and italic is
     forced off by the override block at the bottom so Chinese glyphs
     render correctly.

     --font-cjk below is kept as a base alias — each page's <body>
     falls back to it in zh mode for any untagged text.

     If you bring in a new web font, also add it to the Google Fonts
     <link> at the top of every .html page (or load it via @font-face).

     ROLE TABLE — what each role looks like and where it's used:
       Role         Size     Line  Weight  Italic  Family       Used by examples
       ─────────    ─────    ────  ──────  ──────  ──────────   ──────────────────────
       Heading1     6rem     0.95  300     no      serif        index hero "Tu Gu"
       Heading2     3.4rem   1     300     no      serif        bio "Tu Gu" sub-headline
       Heading3     2.4rem   1.1   300     no      serif        index "Projects" title
       Heading4     1.25rem  1.25  400     no      serif        project card titles
       Heading5     1.05rem  1.3   400     no      mono UPPER   bio section labels
       BodyText1    1.4rem   1.7   300     yes     serif        bio paragraphs, index bio card
       BodyText2    1rem     1.6   300     no      serif        reserved for secondary copy
       Caption      0.7rem   1.4   400     no      mono UPPER   nav links, taglines, project meta, buttons
       Logo         1.1rem   1     300     yes     serif        top-left brand "Tu Gu" link
       ScrollHint   0.6rem   1     400     no      mono UPPER   centered "scroll ↓" indicator
       Footnote     0.6rem   1.5   400     no      mono         "© 2026 Tu Gu …" footer text

     Mobile responsive scaling for these sizes lives in the @media
     blocks at the bottom of this file. Page-specific exceptions
     (e.g. project-name on phones) still live in each page's own
     media queries.
  =================================================================== */
  --font-cjk: 'Noto Serif SC', 'Cormorant Garamond', serif;

  --heading-1-size:   6rem;    --heading-1-size-cjk:   var(--heading-1-size);   --heading-1-line:   0.95; --heading-1-weight:   300; --heading-1-italic:   normal; --heading-1-font:   'Cormorant Garamond', serif; --heading-1-font-cjk:   'Noto Serif SC', 'Cormorant Garamond', serif;
  --heading-2-size:   3.4rem;  --heading-2-size-cjk:   var(--heading-2-size);   --heading-2-line:   1;    --heading-2-weight:   300; --heading-2-italic:   normal; --heading-2-font:   'Cormorant Garamond', serif; --heading-2-font-cjk:   'Noto Serif SC', 'Cormorant Garamond', serif;
  --heading-3-size:   2.4rem;  --heading-3-size-cjk:   var(--heading-3-size);   --heading-3-line:   1.1;  --heading-3-weight:   300; --heading-3-italic:   normal; --heading-3-font:   'Cormorant Garamond', serif; --heading-3-font-cjk:   'Noto Serif SC', 'Cormorant Garamond', serif;
  --heading-4-size:   1.25rem; --heading-4-size-cjk:   var(--heading-4-size);   --heading-4-line:   1.25; --heading-4-weight:   400; --heading-4-italic:   normal; --heading-4-font:   'Cormorant Garamond', serif; --heading-4-font-cjk:   'Noto Serif SC', 'Cormorant Garamond', serif;
  --heading-5-size:   1.05rem; --heading-5-size-cjk:   1.05rem;                 --heading-5-line:   1.3;  --heading-5-weight:   400; --heading-5-italic:   normal; --heading-5-font:   'DM Mono', monospace;        --heading-5-font-cjk:   'Noto Serif SC', 'Cormorant Garamond', serif;
  --body-1-size:      1.4rem;  --body-1-size-cjk:      1.3rem;                  --body-1-line:      1.7;  --body-1-weight:      300; --body-1-italic:      italic; --body-1-font:      'Source Serif 4', serif;     --body-1-font-cjk:      'Noto Serif SC', 'Cormorant Garamond', serif;
  --body-2-size:      1rem;    --body-2-size-cjk:      var(--body-2-size);      --body-2-line:      1.6;  --body-2-weight:      300; --body-2-italic:      normal; --body-2-font:      'Cormorant Garamond', serif; --body-2-font-cjk:      'Noto Serif SC', 'Cormorant Garamond', serif;
  --caption-size:     0.7rem;  --caption-size-cjk:     0.7rem;                  --caption-line:     1.4;  --caption-weight:     400; --caption-italic:     normal; --caption-font:     'DM Mono', monospace;        --caption-font-cjk:     'Noto Serif SC', 'Cormorant Garamond', serif;
  --logo-size:        1.1rem;  --logo-size-cjk:        var(--logo-size);        --logo-line:        1;    --logo-weight:        300; --logo-italic:        normal; --logo-font:        'Cormorant Garamond', serif; --logo-font-cjk:        var(--logo-font);
  --scroll-hint-size: 0.6rem;  --scroll-hint-size-cjk: 0.7rem;                  --scroll-hint-line: 1;    --scroll-hint-weight: 400; --scroll-hint-italic: normal; --scroll-hint-font: 'DM Mono', monospace;        --scroll-hint-font-cjk: 'Noto Serif SC', 'Cormorant Garamond', serif;
  --footnote-size:    0.6rem;  --footnote-size-cjk:    0.7rem;                  --footnote-line:    1.5;  --footnote-weight:    400; --footnote-italic:    normal; --footnote-font:    'DM Mono', monospace;        --footnote-font-cjk:    'Noto Serif SC', 'Cormorant Garamond', serif;
}

/* =====================================================================
 * Typography hierarchy rules. Selectors are written as
 * `html [data-type="…"]` so they outrank single-class selectors
 * (.bio-paragraph, .hero h1, etc.) without resorting to !important.
 * If you need a one-off exception, add a more-specific rule on the
 * element's class in the page's own <style> block.
 * ===================================================================== */

html [data-type="Heading1"] {
  font-family: var(--heading-1-font);
  font-size: var(--heading-1-size);
  font-weight: var(--heading-1-weight);
  font-style: var(--heading-1-italic);
  line-height: var(--heading-1-line);
  letter-spacing: 0.02em;
}

html [data-type="Heading2"] {
  font-family: var(--heading-2-font);
  font-size: var(--heading-2-size);
  font-weight: var(--heading-2-weight);
  font-style: var(--heading-2-italic);
  line-height: var(--heading-2-line);
}

html [data-type="Heading3"] {
  font-family: var(--heading-3-font);
  font-size: var(--heading-3-size);
  font-weight: var(--heading-3-weight);
  font-style: var(--heading-3-italic);
  line-height: var(--heading-3-line);
  letter-spacing: 0.04em;
}

html [data-type="Heading4"] {
  font-family: var(--heading-4-font);
  font-size: var(--heading-4-size);
  font-weight: var(--heading-4-weight);
  font-style: var(--heading-4-italic);
  line-height: var(--heading-4-line);
}

html [data-type="Heading5"] {
  font-family: var(--heading-5-font);
  font-size: var(--heading-5-size);
  font-weight: var(--heading-5-weight);
  font-style: var(--heading-5-italic);
  line-height: var(--heading-5-line);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

html [data-type="BodyText1"] {
  font-family: var(--body-1-font);
  font-size: var(--body-1-size);
  font-weight: var(--body-1-weight);
  font-style: var(--body-1-italic);
  line-height: var(--body-1-line);
}

html [data-type="BodyText2"] {
  font-family: var(--body-2-font);
  font-size: var(--body-2-size);
  font-weight: var(--body-2-weight);
  font-style: var(--body-2-italic);
  line-height: var(--body-2-line);
}

html [data-type="Caption"] {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  font-weight: var(--caption-weight);
  font-style: var(--caption-italic);
  line-height: var(--caption-line);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

html [data-type="Logo"] {
  font-family: var(--logo-font);
  font-size: var(--logo-size);
  font-weight: var(--logo-weight);
  font-style: var(--logo-italic);
  line-height: var(--logo-line);
  letter-spacing: 0.15em;
}

html [data-type="ScrollHint"] {
  font-family: var(--scroll-hint-font);
  font-size: var(--scroll-hint-size);
  font-weight: var(--scroll-hint-weight);
  font-style: var(--scroll-hint-italic);
  line-height: var(--scroll-hint-line);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

html [data-type="Footnote"] {
  font-family: var(--footnote-font);
  font-size: var(--footnote-size);
  font-weight: var(--footnote-weight);
  font-style: var(--footnote-italic);
  line-height: var(--footnote-line);
  letter-spacing: 0.15em;
}

/* Chinese mode — each role swaps to its own --*-font-cjk stack, and
   the italic / uppercase treatments that don't suit Chinese
   characters are dropped. */
html[lang="zh"] [data-type="Heading1"]  { font-family: var(--heading-1-font-cjk); font-size: var(--heading-1-size-cjk); font-style: normal; }
html[lang="zh"] [data-type="Heading2"]  { font-family: var(--heading-2-font-cjk); font-size: var(--heading-2-size-cjk); font-style: normal; }
html[lang="zh"] [data-type="Heading3"]  { font-family: var(--heading-3-font-cjk); font-size: var(--heading-3-size-cjk); font-style: normal; }
html[lang="zh"] [data-type="Heading4"]  { font-family: var(--heading-4-font-cjk); font-size: var(--heading-4-size-cjk); font-style: normal; }
html[lang="zh"] [data-type="BodyText1"] { font-family: var(--body-1-font-cjk);    font-size: var(--body-1-size-cjk);    font-style: normal; }
html[lang="zh"] [data-type="BodyText2"] { font-family: var(--body-2-font-cjk);    font-size: var(--body-2-size-cjk);    font-style: normal; }
html[lang="zh"] [data-type="Logo"]      { font-family: var(--logo-font-cjk);      font-size: var(--logo-size-cjk);      font-style: normal; }

html[lang="zh"] [data-type="Heading5"]   { font-family: var(--heading-5-font-cjk);   font-size: var(--heading-5-size-cjk);   text-transform: none; letter-spacing: 0.18em; }
html[lang="zh"] [data-type="Caption"]    { font-family: var(--caption-font-cjk);    font-size: var(--caption-size-cjk);    text-transform: none; letter-spacing: 0.18em; }
html[lang="zh"] [data-type="ScrollHint"] { font-family: var(--scroll-hint-font-cjk); font-size: var(--scroll-hint-size-cjk); text-transform: none; letter-spacing: 0.18em; }
html[lang="zh"] [data-type="Footnote"]   { font-family: var(--footnote-font-cjk);   font-size: var(--footnote-size-cjk);   text-transform: none; letter-spacing: 0.18em; }

/* =====================================================================
 * Responsive scaling for the hierarchy. Only sizes that need to shrink
 * on smaller screens are overridden here — others inherit the desktop
 * defaults above.
 * ===================================================================== */
@media (max-width: 900px) {
  :root {
    --heading-1-size: 5rem;
    --heading-2-size: 2.8rem;
  }
}
@media (max-width: 720px) {
  :root {
    --heading-1-size:   4rem;
    --heading-2-size:   2.4rem;
    --heading-3-size:   2rem;
    --heading-4-size:   1.1rem;
    --heading-5-size:   0.95rem;
    --body-1-size:      1.05rem;
    --body-1-line:      1.6;
    --caption-size:     0.6rem;
    --logo-size:        1rem;
    --scroll-hint-size: 0.55rem;
    --footnote-size:    0.55rem;
  }
}
@media (max-width: 380px) {
  :root {
    --heading-1-size: 2.8rem;
    --heading-2-size: 2rem;
    --body-1-size:    0.98rem;
    --caption-size:   0.55rem;
  }
}