/* ─────────────────────────────────────────────────────────────────────────
   練習 — the "Practice" design system · tokens
   The single source of truth for bryanluketan.com + ren-shuu.com.
   Direction A ("The Practice Book"): editorial, type-first, serif authority,
   one ink-indigo accent, space doing the work. See system.md for the why.

   Usage: style everything THROUGH these tokens, never with raw hex/px, so a
   rebrand or theme is a token swap. Light is the default; dark overrides only
   the color tokens. The two sites share this file and differ by a few knobs
   (see the [site] section at the bottom).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Type families ──────────────────────────────────────────────
     Production self-hosts an open serif (see the @font-face block in
     system.md — recommended: Newsreader, for its literary italic). Until the
     font files are dropped in, these stacks fall back to genuinely good system
     serifs, so nothing renders in a browser default. */
  --font-cjk:     "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP";
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Charter, Palatino, Georgia, var(--font-cjk), serif;
  --font-body:    "Newsreader", "Iowan Old Style", "Palatino Linotype", Charter, Palatino, Georgia, var(--font-cjk), serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, monospace;

  /* ── Type scale (≈1.2 minor-third, editorial base of 18px) ──────
     Display steps are fluid so the front door breathes on wide screens. */
  --text-label: 0.78rem;   /* mono eyebrows, meta */
  --text-sm:    0.9rem;
  --text-base:  1.125rem;  /* 18px reading body */
  --text-md:    1.3rem;
  --text-lg:    1.6rem;
  --text-xl:    clamp(1.8rem, 1.3rem + 2vw, 2.3rem);
  --text-2xl:   clamp(2.3rem, 1.5rem + 3vw, 3.1rem);
  --text-3xl:   clamp(2.8rem, 1.6rem + 4.5vw, 4rem);

  --leading-body: 1.65;
  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --measure: 65ch;         /* target reading width */
  --tracking-label: 0.16em;

  /* ── Spacing (4/8 scale) ───────────────────────────────────────── */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;    --space-9: 6rem;

  /* ── Shape ── editorial = crisp; hairline rules over heavy cards ── */
  --radius: 3px;
  --radius-lg: 8px;
  --hairline: 1px;

  /* ── Color · LIGHT (warm paper + fountain-pen ink) ──────────────
     Neutrals carry a slight warm/indigo bias — chosen, not defaulted. */
  --paper:      #f6f5f0;   /* page ground — warm off-white, not cream */
  --surface:    #fffdf9;   /* raised sheets */
  --ink:        #211e19;   /* body text — warm near-black */
  --ink-dim:    #6b6559;   /* secondary text */
  --ink-faint:  #938c7d;   /* captions, meta */
  --line:       #e4dfd3;   /* hairline rules, borders */
  --accent:     #3f4f86;   /* ink-indigo — the one accent */
  --accent-ink: #33427a;   /* accent text on paper (AA) */
  --accent-soft:#e9ecf5;   /* faint accent wash */
  --selection:  #d9def0;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark = "reading at night": warm dark paper, not pure black. */
    --paper:      #191714;
    --surface:    #211e1a;
    --ink:        #eae4d8;
    --ink-dim:    #a49c8b;
    --ink-faint:  #7d7566;
    --line:       #322e27;
    --accent:     #a3b3e2;
    --accent-ink: #b7c4ea;
    --accent-soft:#232636;
    --selection:  #2c3350;
  }
}

/* Explicit theme overrides win over the media query in BOTH directions. */
:root[data-theme="light"] {
  --paper:#f6f5f0; --surface:#fffdf9; --ink:#211e19; --ink-dim:#6b6559;
  --ink-faint:#938c7d; --line:#e4dfd3; --accent:#3f4f86; --accent-ink:#33427a;
  --accent-soft:#e9ecf5; --selection:#d9def0;
}
:root[data-theme="dark"] {
  --paper:#191714; --surface:#211e1a; --ink:#eae4d8; --ink-dim:#a49c8b;
  --ink-faint:#7d7566; --line:#322e27; --accent:#a3b3e2; --accent-ink:#b7c4ea;
  --accent-soft:#232636; --selection:#2c3350;
}

/* ── Per-site knobs ─────────────────────────────────────────────────
   Same bones, different register. bryanluketan.com = composed front door;
   ren-shuu.com = looser practice log (a touch tighter measure, more visible
   mono "workshop" texture, slightly warmer accent option). Set on <body>. */
[data-site="bryanluketan"] { --measure: 60ch; }
[data-site="ren-shuu"]     {
  --measure: 68ch; --tracking-label: 0.2em;
  /* the workshop wears Fira Code as its mono voice */
  --font-mono: "Fira Code", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
}

::selection { background: var(--selection); }