/* ===========================================================
   Design tokens for ムダシル。
   Source: docs/plan/仕様書.md, design-spec/tokens.md
   =========================================================== */

:root {
	/* === Backgrounds === */
	--bg:           #FDF8EE;   /* main background: cream */
	--paper:        #FFFFFF;   /* cards and boxes */

	/* === Text === */
	--ink:          #1A1818;   /* body and headings */
	--ink-soft:     #4A4544;   /* secondary text */
	--ink-mute:     #8A8480;   /* meta / captions */

	/* === Lines / Borders === */
	--line:         #EBE4D3;
	--line-soft:    #F2ECDE;

	/* === Brand (Orange) === */
	--brand:        #FF6B35;
	--brand-deep:   #E55321;
	--brand-soft:   #FFE6D8;

	/* === Accent (Navy) === */
	--accent:       #2B4C7E;
	--accent-soft:  #DCE5F0;

	/* === Sun (Yellow) === */
	--sun:          #F4C842;
	--sun-soft:     #FFF3C2;

	/* === Secondary accents === */
	--leaf:         #5BAA6F;   /* words category */
	--leaf-soft:    #E0EDE3;   /* speech variant: leaf (chip-leaf bg と同色) */
	--pink:         #F26B8A;   /* daily category */

	/* === Fonts === */
	--font-heading: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
	--font-quote:   'Shippori Mincho', 'Noto Serif JP', serif;
	--font-body:    'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;

	/* === Type scale (px) === */
	--fs-display:   54px;
	--fs-h1:        40px;
	--fs-h2:        22px;
	--fs-h3:        18px;
	--fs-body:      16px;
	--fs-ui:        14px;
	--fs-meta:      12px;
	--fs-mini:      11px;

	/* === Mobile type scale === */
	--fs-display-m: 34px;
	--fs-h1-m:      28px;
	--fs-h2-m:      20px;
	--fs-body-m:    15px;

	/* === Line heights === */
	--lh-body:      1.95;
	--lh-heading:   1.3;
	--lh-tight:     1.18;

	/* === Spacing (4px base) === */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-5:  20px;
	--sp-6:  24px;
	--sp-8:  32px;
	--sp-10: 40px;
	--sp-12: 48px;

	/* === Radii === */
	--r-sm:   6px;
	--r-md:   10px;
	--r-lg:   14px;
	--r-xl:   18px;
	--r-pill: 999px;

	/* === Shadows === */
	--shadow-card: 0 3px 10px -3px rgba(0, 0, 0, .08);
	--shadow-btn:  0 4px 0 var(--brand-deep);
	--shadow-pop:  0 8px 28px rgba(0, 0, 0, .12);
}