:root {
  /* === COLORS — neutral Japanese palette === */
  --washi:        #F5F1E8;  /* primary background — washi paper */
  --washi-deep:   #EBE5D5;  /* secondary surface */
  --washi-soft:   #FAF7EE;
  --kinari:       #FFFCF5;  /* elevated cards */
  --hairline:     #D9D2BF;  /* delicate borders */
  --hairline-strong: #B8AE91;

  --sumi:         #1A1A1A;  /* primary text — sumi ink, ~16:1 on washi */
  --sumi-soft:    #2D2A26;  /* ~13:1 on washi */
  --sumi-mute:    #545048;  /* small/muted text — ~6.8:1 on washi (WCAG AA, near AAA) */
  --sumi-faint:   #6F6B62;  /* dividers/captions — ~4.7:1 on washi (WCAG AA normal text) */

  --beni:         #CA2424;  /* primary accent — beni red */
  --beni-deep:    #9F1B1B;
  --beni-soft:    #E85D5D;
  --beni-tint:    #F8E5E5;

  --indigo:       #2C3E5C;
  --indigo-soft:  #4A6285;

  --matcha:       #6B8E4E;
  --kogane:       #C9A961;  /* old gold */

  --success:      #4F7B3D;
  --warning:      #C97D1B;
  --danger:       #B22E2E;

  /* === TYPOGRAPHY ===
     Mochiy Pop One has only Latin + Japanese glyphs.
     Line Seed JP has only Latin + Japanese glyphs.
     For Cyrillic (Russian) we fall through to Manrope which supports it. */
  /* Mochiy убран из общего display: ему нет жирных начертаний, и браузер
     синтезирует faux-bold, который выглядит «размазанным» в заголовках. */
  --font-display:    "Manrope", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  --font-display-jp: "Mochiy Pop One", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", system-ui, sans-serif;
  --font-body:       "Manrope", "Line Seed JP", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --font-jp:         "Line Seed JP", "Noto Sans JP", "Manrope", "Hiragino Sans", system-ui, sans-serif;
  --font-mono:       "JetBrains Mono", "Consolas", monospace;

  --fs-xs:   13px;
  --fs-sm:   15px;
  --fs-base: 17px;
  --fs-md:   19px;
  --fs-lg:   23px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-display: clamp(64px, 11vw, 160px);

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.24em;

  /* === SPACING === */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* === RADIUS === */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 20px;
  --r-pill: 999px;

  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 2px 6px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.06), 0 2px 4px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.10), 0 4px 8px rgba(26, 26, 26, 0.04);
  --shadow-xl: 0 24px 48px rgba(26, 26, 26, 0.12), 0 8px 16px rgba(26, 26, 26, 0.06);
  --shadow-stamp: 0 0 0 2px var(--beni-deep), 4px 4px 0 0 var(--sumi);

  --inset-line: inset 0 -1px 0 0 var(--hairline);

  /* === MOTION === */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-back:   cubic-bezier(0.36, -0.4, 0.4, 1.4);

  --d-fast:   140ms;
  --d-base:   220ms;
  --d-slow:   400ms;
  --d-slower: 700ms;

  /* === LAYOUT === */
  --maxw-narrow: 720px;
  --maxw-base:   1080px;
  --maxw-wide:   1280px;
  --maxw-page:   1440px;

  --header-h: 72px;

  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   2000;
  --z-toast:   3000;
  --z-cat:     900;
}