/* ─────────────────────────────────────────────────────────────────────────
   tokens.css — design tokens (màu, typography, shadow, radius) + brand swap
   Port từ docs/project/screens/shared.jsx — injectShared()
   Manten = 朱色 vermillion (Nihongo) · Tokutei = 藍色 Japanese indigo (Ginō)
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@600;800&family=JetBrains+Mono:wght@500&display=swap');

.gk-scope {
  /* Default = Nihongo (vermillion). Override below cho Ginō. */
  --primary: #E23D28;
  --primary-soft: #FFE8E4;
  --primary-ink: #1A1613;

  --paper: #FBF8F3;
  --paper-alt: #F3EEE4;
  --surface: #ffffff;

  --ink: #1A1613;
  --ink-soft: rgba(26, 22, 19, 0.62);
  --ink-faint: rgba(26, 22, 19, 0.42);

  --rule: rgba(26, 22, 19, 0.09);
  --rule-strong: rgba(26, 22, 19, 0.18);

  --success: #2F7F4E;
  --warn: #C77700;
  --danger: #C0392B;

  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(26, 22, 19, .04), 0 0 0 1px var(--rule);
  --shadow-md: 0 2px 4px rgba(26, 22, 19, .04), 0 8px 24px rgba(26, 22, 19, .06), 0 0 0 1px var(--rule);
  --shadow-lg: 0 4px 8px rgba(26, 22, 19, .04), 0 16px 48px rgba(26, 22, 19, .10), 0 0 0 1px var(--rule);

  --gap: 16px;
  --pad: 20px;

  color: var(--ink);
  font-family: "Plus Jakarta Sans", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
}

.gk-scope.gk-brand-ginou {
  --primary: #2D4A7C;
  --primary-soft: #E6EDF7;
  --primary-ink: #0F1A2E;
}

.gk-scope.gk-dark {
  --paper: #14110E;
  --paper-alt: #1C1814;
  --surface: #1C1814;
  --ink: #F3EEE4;
  --ink-soft: rgba(243, 238, 228, 0.64);
  --ink-faint: rgba(243, 238, 228, 0.38);
  --rule: rgba(243, 238, 228, 0.10);
  --rule-strong: rgba(243, 238, 228, 0.20);
  --primary-soft: rgba(226, 61, 40, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px var(--rule);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 1px var(--rule);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 16px 48px rgba(0, 0, 0, .5), 0 0 0 1px var(--rule);
}

.gk-scope.gk-dark.gk-brand-ginou {
  --primary-soft: rgba(45, 74, 124, 0.22);
}

.gk-scope.gk-density-compact {
  --gap: 10px;
  --pad: 14px;
  --radius: 10px;
  --radius-lg: 14px;
}

.gk-scope.gk-density-comfy {
  --gap: 20px;
  --pad: 26px;
  --radius: 14px;
  --radius-lg: 22px;
}