/* ========================================================================= kazeniwa Design Tokens — "Wind Garden" (single source of truth) 全ダッシュボード・管理画面はこの :root を読み込み、役割トークンのみ使用する。 生の値（--teal-500 等）を直接使わないこと。 ========================================================================= */ :root{ /* --- 原始トークン（直接使用しない） --- */ --slate-50:#F6F8F8; --slate-100:#ECF1F1; --slate-200:#DCE4E4; --slate-300:#C3CFCF; --slate-400:#9BAAAA; --slate-500:#6E7E7E; --slate-600:#4E5D5D; --slate-700:#364242; --slate-800:#232D2D; --slate-900:#141B1B; --slate-950:#0C1111; --teal-50:#E6F4F1; --teal-100:#C4E6DF; --teal-200:#8FCFC2; --teal-300:#57B4A3; --teal-400:#2D998A; --teal-500:#0E7C6B; --teal-600:#0B6759; --teal-700:#0A5346; --teal-900:#052B25; --gold-300:#F2CF83; --gold-400:#EBB44A; --gold-500:#D2872A; --gold-600:#A9691F; --green:#2E9E5B; --green-bg:#E4F4EB; --orange:#E07C24; --orange-bg:#FBEBDD; --red:#D64545; --red-bg:#FBE7E7; --blue:#2D7FF0; --blue-bg:#E5EEFC; /* --- タイポグラフィ --- */ --font-sans:"Inter","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif; --font-mono:"JetBrains Mono","Roboto Mono",ui-monospace,"SFMono-Regular",monospace; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-display:3rem; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --leading-tight:1.2; --leading-normal:1.5; --leading-relaxed:1.65; /* --- 余白（4px基準・"風=空気"のためやや潤沢に） --- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; /* --- 角丸・線・影・モーション --- */ --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px; --border-width:1px; --shadow-xs:0 1px 2px rgba(12,17,17,.06); --shadow-sm:0 1px 3px rgba(12,17,17,.08),0 1px 2px rgba(12,17,17,.04); --shadow-md:0 4px 14px rgba(12,17,17,.08); --shadow-lg:0 14px 34px rgba(12,17,17,.12); --ease:cubic-bezier(.2,.8,.2,1); --dur-fast:120ms; --dur:200ms; /* --- チャート配色（series 1→8 の順で割当） --- */ --chart-1:#0E7C6B; --chart-2:#EBB44A; --chart-3:#4F86D6; --chart-4:#E76F51; --chart-5:#7C6BD9; --chart-6:#5FA84A; --chart-7:#6E7E7E; --chart-8:#D26FA0; /* --- セマンティックトークン（アプリはこれだけ使う）/ LIGHT --- */ --color-bg:var(--slate-50); --color-surface:#FFFFFF; --color-surface-2:var(--slate-100); --color-border:var(--slate-200); --color-border-strong:var(--slate-300); --color-text:var(--slate-900); --color-text-muted:var(--slate-600); --color-text-subtle:var(--slate-500); --color-text-inverse:#FFFFFF; --color-primary:var(--teal-500); --color-primary-hover:var(--teal-600); --color-primary-fg:#FFFFFF; --color-primary-subtle:var(--teal-50); --color-accent:var(--gold-400); /* ★ LIVE / 最重要の一点のみ */ --color-accent-fg:var(--slate-900); --color-success:var(--green); --color-success-bg:var(--green-bg); --color-warning:var(--orange); --color-warning-bg:var(--orange-bg); --color-danger:var(--red); --color-danger-bg:var(--red-bg); --color-info:var(--blue); --color-info-bg:var(--blue-bg); --color-focus:var(--teal-400); } /* --- DARK テーマ： で切替 --- */ [data-theme="dark"]{ --color-bg:var(--slate-950); --color-surface:var(--slate-900); --color-surface-2:var(--slate-800); --color-border:#28302F; --color-border-strong:var(--slate-700); --color-text:#EAF0EF; --color-text-muted:var(--slate-400); --color-text-subtle:#7C8B8B; --color-text-inverse:var(--slate-900); --color-primary:var(--teal-300); --color-primary-hover:var(--teal-200); --color-primary-fg:#04140F; --color-primary-subtle:#0C2B26; --color-accent:var(--gold-400); --color-accent-fg:var(--slate-950); --color-success-bg:#123021; --color-warning-bg:#33220F; --color-danger-bg:#331616; --color-info-bg:#122540; --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.45); --shadow-lg:0 14px 34px rgba(0,0,0,.55); }