/* ==========================================================================
   kotobạn — design tokens
   "Ink & Lacquer" — a letterpress dictionary aesthetic: warm washi paper,
   sumi ink, and a vermilion hanko stamp. Light theme, committed fully.
   --------------------------------------------------------------------------
   Variable names are a CONTRACT with the frontend and backend workstreams.
   Do not rename the --kb-* variables below. You may ADD new ones.
   ========================================================================== */

:root {
  /* ---- surfaces -------------------------------------------------------- */
  --kb-bg:        #faf6ed;  /* warm paper — the page itself */
  --kb-surface:   #fffdf7;  /* cards, sheets, raised panels */
  --kb-surface-2: #f1e9d7;  /* sunken / inset areas, subtle fills */

  /* ---- text ------------------------------------------------------------ */
  --kb-ink:       #201914;  /* sumi ink — primary text */
  --kb-ink-soft:  #4e4536;  /* secondary text */
  --kb-muted:     #8a7c63;  /* tertiary text, captions */
  --kb-line:      #e6dac0;  /* hairline borders, dividers */

  /* ---- brand actions --------------------------------------------------- */
  --kb-primary:      #bc3b1a;  /* hanko vermilion — primary actions, the shared "bạ" */
  --kb-primary-ink:  #fff9f0;  /* text on primary */
  --kb-primary-soft: #f8e2d4;  /* primary tint for fills, selected states */

  --kb-accent:       #d99a26;  /* ochre gold — highlights, streaks, secondary emphasis */
  --kb-accent-ink:   #3a2503;  /* text on accent */

  /* ---- semantic -------------------------------------------------------- */
  --kb-success: #2e7d4f;  /* correct answers, healthy states */
  --kb-warn:    #a85b08;  /* warnings, review-due nudges */
  --kb-danger:  #a32020;  /* destructive actions, errors */

  /* ---- shape ----------------------------------------------------------- */
  --kb-radius:    16px;
  --kb-radius-sm: 9px;

  /* ---- type ------------------------------------------------------------
     System stacks only — no webfont download, instant on mobile data.
     Both stacks carry full Vietnamese diacritics and Japanese glyphs
     through platform fallbacks. */
  --kb-font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                     Georgia, "Hiragino Mincho ProN", "Noto Serif", serif;
  --kb-font-body: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
                  "Hiragino Kaku Gothic ProN", "Noto Sans", "Yu Gothic",
                  sans-serif;

  /* Compact type scale (mobile-first; steps up on larger screens) */
  --kb-text-xs: 0.72rem;
  --kb-text-sm: 0.85rem;
  --kb-text-base: 1rem;
  --kb-text-lg: 1.2rem;
  --kb-text-xl: 1.55rem;
  --kb-text-2xl: 2.1rem;

  /* ---- elevation ------------------------------------------------------- */
  --kb-shadow: 0 1px 2px rgba(32, 25, 20, 0.07),
               0 10px 28px -12px rgba(32, 25, 20, 0.18);

  /* ---- motion ---------------------------------------------------------- */
  --kb-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Base page treatment — pair with components.css */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--kb-bg);
  color: var(--kb-ink);
  font-family: var(--kb-font-body);
  font-size: var(--kb-text-base);
  line-height: 1.55;
  margin: 0;
}

/* Subtle paper grain: a whisper of texture, never a gradient-for-nothing */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgba(32, 25, 20, 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  z-index: -1;
}

::selection {
  background: var(--kb-primary-soft);
}