/* =====================================================================
   MTK — Tier 1: PRIMITIVES (shared by both page-sets)
   Raw, role-less values shared by both page-sets. Responsive page spacing,
   layout, and type scales live in the per-theme files.
   Units: rem (1rem = 16px). Hairline borders stay in px by convention.
   Source of truth: design/figma-raw/*.json (see design/TOKENS.md)
   ===================================================================== */

:root {
    /* ---- Shared atomic spacing ------------------------------------ */
    --space-xxxs: 0.25rem; /* 4 */
    --space-xxs: 0.5rem; /* 8 */
    --space-xs: 0.75rem; /* 12 */
    --space-s: 1rem; /* 16 */

    /* ---- Radius --------------------------------------------------- */
    --radius-pill: 999px;

    /* ---- Rhythm --------------------------------------------------- */
    --leading: 1.5;

    /* ---- Color palette (shared literals) -------------------------- */
    --color-white: #ffffff;
    --color-yellow: #f2c849; /* Brand/Yellow */
    --color-red: #ea6a57; /* Brand/Red */
    --color-brown: #483737; /* dark brown — text + dark surfaces */
    --color-grey: #958f8f; /* Text/Secondary */
    --color-border: #e4d8d8; /* Border/Primary */
    --color-cream-1: #f7f3e9;
    --color-cream-2: #f9f4ee;
    --color-cream-3: #f5f0e3;
    --color-cool: #f0f6ff;

    /* ---- Shared font families ------------------------------------- */
    --font-noto-jp: "Noto Sans JP", sans-serif;
    --font-outfit: "Outfit", sans-serif; /* Latin accent (shared) */

    /* ---- Shared text sizes ---------------------------------------- */
    --size-small: 0.875rem; /* 14 — Small */
}