/* ================================================================
   muemo — Design Tokens
   The single source of truth for the muemo brand. These CSS variables
   mirror Bulma's $-variable structure so they can later be poured into
   a Sass override file (`bulma-overrides.scss`) one-to-one.
   ================================================================ */

:root {
  /* ---------- Brand ---------- */
  --primary:        #1B2942;   /* Ink Navy — Bulma $primary */
  --primary-hover:  #2D3F5F;
  --primary-active: #0F1A2D;
  --primary-tint:   #ECEEF3;   /* faint surface tint */

  /* ---------- Accent (warm) ---------- */
  --accent:        #C0563D;    /* Terracotta — used sparingly for energy */
  --accent-hover:  #A94830;
  --accent-tint:   #F7EBE6;

  /* ---------- Surfaces / Neutrals (warm paper family) ---------- */
  --paper:    #FAF8F3;         /* page background — Bulma $light */
  --paper-2:  #F4F1EA;         /* sub-section background */
  --surface:  #FFFFFF;         /* cards, inputs */
  --line:     #E7E4DC;         /* default border */
  --line-2:   #D8D4CA;         /* stronger border */

  /* ---------- Ink (text) ---------- */
  --ink:    #1B2942;           /* primary text — same as primary */
  --ink-2:  #4F5563;           /* secondary text */
  --ink-3:  #8A8F9A;           /* meta / captions */
  --ink-4:  #B8BBC2;           /* placeholder / disabled */

  /* ---------- Semantic ---------- */
  --info:    #2E6FB8;
  --success: #2F7A4F;
  --warning: #C18A2C;
  --danger:  #B23A33;

  /* ---------- Semantic tints (flash backgrounds / borders) ---------- */
  --success-tint:   #f0faf4;
  --success-line:   #b5dfc6;
  --danger-tint:    #fdf1f0;
  --danger-line:    #f0c4c2;
  --warning-tint:   #fdf8ed;
  --warning-line:   #f0dfa0;

  /* ---------- Type families ---------- */
  --font-display: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-body:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-brand:   "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;

  /* ---------- Type scale ---------- */
  --t-display-xl: clamp(40px, 5.6vw, 64px);
  --t-display-l:  clamp(32px, 4vw, 44px);
  --t-display-m:  28px;
  --t-title-l:    22px;
  --t-title-m:    18px;
  --t-body-l:     16px;
  --t-body-m:     14.5px;
  --t-caption:    12.5px;
  --t-micro:      11px;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Radius ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ---------- Shadow (subtle, paper-like) ---------- */
  --shadow-1: 0 1px 2px rgba(27,41,66,.06);
  --shadow-2: 0 4px 16px rgba(27,41,66,.08);
  --shadow-3: 0 16px 40px rgba(27,41,66,.14);

  /* ---------- Layout ---------- */
  --container:   1200px;
  --container-sm: 960px;
  --nav-h: 72px;
}