/* ASPI Design System — generated from tokens.json */
:root, [data-theme="periwinkle"] {
  --paper: #FFFFFF;
  --ink: #1A1A1A;
  --ink-charcoal: #45494F;
  --gray-band: #F2F2F2;
  --gray-rule: #E4E7EC;
  --gray-rule-strong: #D9DCE1;
  --gray-stripe: #EAEAEA;
  --gray-muted: #9B9B9B;
  --gray-strike: #B2AFAF;
  --text-note: #767676;
  --brand: #7289C4;
  --brand-text: #5A71B0;
  --brand-soft: #A5B8E4;
  --brand-wash: #E7F0FF;
  --on-brand: #FFFFFF;
  --attention: #FBE615;
  --on-attention: #1A1A1A;
  --tip: #90BE8C;
  --on-tip: #1A1A1A;
  --negative: #EA5449;
  --negative-text: #C0392B;
  --negative-wash: #FDF2F1;
  --slot-a: #F3F6FC;
  --slot-b: #E9EFF9;
  --slot-label: #5A6480;
  --scrim: rgba(26, 26, 26, 0.48);
  --action: #F6EDB8;
  --action-hover: #F0E49E;
  --on-action: #1A1A1A;
  --status-ok: #336849;
  --status-warn: #88601E;
  --status-info: #46617E;
  --day-sat: #2F5BB7;
  --control-line: #8C8F94;
  --focus: var(--ink);
  --text-link: var(--brand-text);
  --watermark: var(--brand-wash);
  --marker: var(--attention);
  --aspi-blue: var(--brand);
  --aspi-blue-text: var(--brand-text);
  --aspi-blue-soft: var(--brand-soft);
  --aspi-blue-wash: var(--brand-wash);
  --aspi-yellow: var(--attention);
  --aspi-green: var(--tip);
  --aspi-red: var(--negative);
  --aspi-red-text: var(--negative-text);
  --status-ng: var(--negative-text);
  --status-off: var(--text-note);
  --day-sun: var(--negative-text);
}
[data-theme="navy"] {
  --ink-charcoal: #404856;
  --gray-band: #F1F2F6;
  --gray-rule: #E3E6EC;
  --gray-rule-strong: #D5D9E1;
  --gray-stripe: #E7EAEF;
  --gray-muted: #8E929A;
  --gray-strike: #AAAEB4;
  --text-note: #666C77;
  --brand: #30519A;
  --brand-text: #244182;
  --brand-soft: #7590C8;
  --brand-wash: #E7EEFB;
  --tip: #90BE8C;
  --slot-a: #F2F6FD;
  --slot-b: #E6EDF9;
  --slot-label: #4F5E7A;
  --focus: var(--ink);
  --text-link: var(--brand-text);
  --watermark: var(--brand-wash);
  --marker: var(--attention);
  --aspi-blue: var(--brand);
  --aspi-blue-text: var(--brand-text);
  --aspi-blue-soft: var(--brand-soft);
  --aspi-blue-wash: var(--brand-wash);
  --aspi-yellow: var(--attention);
  --aspi-green: var(--tip);
  --aspi-red: var(--negative);
  --aspi-red-text: var(--negative-text);
  --status-ng: var(--negative-text);
  --status-off: var(--text-note);
  --day-sun: var(--negative-text);
}
[data-theme="sage"] {
  --ink-charcoal: #474942;
  --gray-band: #F3F3F0;
  --gray-rule: #E6E7E1;
  --gray-rule-strong: #D9DAD3;
  --gray-stripe: #EAEAE5;
  --gray-muted: #93928C;
  --gray-strike: #AFAEA8;
  --text-note: #6C6C65;
  --brand: #4F8351;
  --brand-text: #3A6B3D;
  --brand-soft: #90BE8C;
  --brand-wash: #E7F5E4;
  --tip: #A5B8E4;
  --slot-a: #F2F8F0;
  --slot-b: #E5F1E3;
  --slot-label: #4B624B;
  --focus: var(--ink);
  --text-link: var(--brand-text);
  --watermark: var(--brand-wash);
  --marker: var(--attention);
  --aspi-blue: var(--brand);
  --aspi-blue-text: var(--brand-text);
  --aspi-blue-soft: var(--brand-soft);
  --aspi-blue-wash: var(--brand-wash);
  --aspi-yellow: var(--attention);
  --aspi-green: var(--tip);
  --aspi-red: var(--negative);
  --aspi-red-text: var(--negative-text);
  --status-ng: var(--negative-text);
  --status-off: var(--text-note);
  --day-sun: var(--negative-text);
}
:root {
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-section: 72px;
  --radius: 0px;
  --radius-circle: 50%;
  --stroke-hair: 1px;
  --stroke-rule: 1.5px;
  --stroke-accent: 3px;
  --stroke-mark: 4px;
  --stroke-focus: 2px;
  --button-h: 52px;
  --button-h-sm: 40px;
  --control-h: 48px;
  --tap-min: 40px;
  --app-control-h: 38px;
  --app-control-h-sm: 30px;
  --app-cell-y: 12px;
  --app-panel-w: 450px;
  --shadow-float: 0 12px 32px rgba(26, 26, 26, 0.14);
  --web-max: 1200px;
  --web-narrow: 760px;
  --web-gutter: clamp(16px, 4vw, 48px);
  --web-section-y: clamp(72px, 10vw, 128px);
  --web-header-h: 64px;
  --web-toc-w: 208px;
  --doc-width: 820px;
  --doc-pad: 32px;
  --doc-nav-w: 200px;
  --app-nav-w: 232px;
  --slide-w: 1280px;
  --slide-h: 720px;
  --slide-pad-x: 64px;
  --slide-pad-y: 48px;
  --wfs-display: clamp(36px, 24.4px + 3.09vw, 64px);
  --wfs-hero: clamp(18px, 13px + 1.33vw, 30px);
  --wfs-hero-lg: clamp(26px, 19.8px + 1.66vw, 41px);
  --wfs-watermark: clamp(48px, 28.1px + 5.3vw, 96px);
  --wfs-watermark-sm: clamp(40px, 26.7px + 3.54vw, 72px);
  --wfs-watermark-doc: clamp(36px, 32.7px + 0.88vw, 44px);
  --wfs-title: clamp(26px, 21.9px + 1.1vw, 36px);
  --wfs-h2: clamp(22px, 17.9px + 1.1vw, 32px);
  --wfs-h2-doc: clamp(20px, 18.3px + 0.44vw, 24px);
  --wfs-key: clamp(19px, 15.7px + 0.88vw, 27px);
  --wfs-statement: clamp(20px, 17.5px + 0.66vw, 26px);
  --wfs-h3: clamp(18px, 16.3px + 0.44vw, 22px);
  --wfs-lead: clamp(16px, 14.8px + 0.33vw, 19px);
  --wfs-body: clamp(15px, 14.6px + 0.11vw, 16px);
  --wfs-prose: clamp(16px, 15.6px + 0.11vw, 17px);
  --wfs-kpi: clamp(32px, 25.8px + 1.66vw, 47px);
  --wfs-num: clamp(64px, 47.4px + 4.42vw, 104px);
  --wfs-caption: 13px;
  --wfs-footnote: 12px;
  --ls-body: 0.04em;
  --ls-web-body: 0.08em;
  --ls-wide: 0.12em;
  --ls-heading: 0.1em;
  --ls-web-heading: 0.12em;
  --ls-label: 0.18em;
  --ls-xwide: 0.2em;
  --lh-body: 1.9;
  --lh-prose: 2;
  --lh-heading: 1.5;
  --lh-tight: 1.4;
  --fw-body: 500;
  --fw-bold: 700;
  --fw-black: 900;
  --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-en: 'Josefin Sans', sans-serif;
  --font-num: Futura, 'Futura PT', Jost, sans-serif;
  --font-logotype: Cinzel, 'Trajan Pro', serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
.app-title { font-family: var(--font-jp); font-size: 26px; line-height: 1.35; font-weight: 700; letter-spacing: -0.035em; }
.app-h2 { font-family: var(--font-jp); font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -0.035em; }
.app-h3 { font-family: var(--font-jp); font-size: 14px; line-height: 1.5; font-weight: 700; letter-spacing: 0; }
.app-body { font-family: var(--font-jp); font-size: 14px; line-height: 1.65; font-weight: 500; letter-spacing: 0; }
.app-label { font-family: var(--font-jp); font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: 0; }
.app-status { font-family: var(--font-jp); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
.doc-title { font-family: var(--font-jp); font-size: 30px; line-height: 1.5; font-weight: 700; letter-spacing: 0.1em; }
.doc-h2 { font-family: var(--font-jp); font-size: 22px; line-height: 1.5; font-weight: 700; letter-spacing: 0.1em; }
.doc-h3 { font-family: var(--font-jp); font-size: 17px; line-height: 1.6; font-weight: 700; letter-spacing: 0.1em; }
.doc-body { font-family: var(--font-jp); font-size: 16px; line-height: 1.9; font-weight: 500; letter-spacing: 0.04em; }
.doc-table { font-family: var(--font-jp); font-size: 14px; line-height: 1.7; font-weight: 500; letter-spacing: 0.04em; }
.doc-caption { font-family: var(--font-jp); font-size: 13px; line-height: 1.6; font-weight: 500; letter-spacing: 0.18em; }
.doc-footnote { font-family: var(--font-jp); font-size: 12px; line-height: 1.85; font-weight: 500; letter-spacing: 0.1em; }
.wm-doc { font-family: var(--font-en); font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: 0.01em; }
.en-label { font-family: var(--font-en); font-size: 12px; line-height: 1.6; font-weight: 400; letter-spacing: 0.18em; }
.en-display { font-family: var(--font-en); font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: 0.01em; }
.num-step { font-family: var(--font-num); font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: 0; }
.num-kpi { font-family: var(--font-num); font-size: 47px; line-height: 1.1; font-weight: 700; letter-spacing: 0.01em; }
.num-big { font-family: var(--font-num); font-size: 104px; line-height: 1; font-weight: 900; letter-spacing: -0.02em; }
.logotype { font-family: var(--font-logotype); font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: 0.2em; }
.web-title { font-family: var(--font-jp); font-size: 36px; line-height: 1.5; font-weight: 700; letter-spacing: 0.1em; }
.web-hero-lg { font-family: var(--font-jp); font-size: 41px; line-height: 1.55; font-weight: 700; letter-spacing: 0.08em; }
.web-hero { font-family: var(--font-jp); font-size: 30px; line-height: 1.7; font-weight: 700; letter-spacing: 0.1em; }
.web-h2 { font-family: var(--font-jp); font-size: 32px; line-height: 1.5; font-weight: 700; letter-spacing: 0.12em; }
.web-key { font-family: var(--font-jp); font-size: 27px; line-height: 1.6; font-weight: 700; letter-spacing: 0.1em; }
.web-statement { font-family: var(--font-jp); font-size: 26px; line-height: 1.75; font-weight: 700; letter-spacing: 0.08em; }
.web-h3 { font-family: var(--font-jp); font-size: 22px; line-height: 1.6; font-weight: 700; letter-spacing: 0.1em; }
.web-lead { font-family: var(--font-jp); font-size: 19px; line-height: 2; font-weight: 500; letter-spacing: 0.1em; }
.web-prose { font-family: var(--font-jp); font-size: 17px; line-height: 2; font-weight: 500; letter-spacing: 0.06em; }
.web-body { font-family: var(--font-jp); font-size: 16px; line-height: 1.9; font-weight: 500; letter-spacing: 0.08em; }
.web-watermark { font-family: var(--font-en); font-size: 96px; line-height: 1; font-weight: 700; letter-spacing: 0.01em; }
.slide-wm-divider { font-family: var(--font-en); font-size: 84px; line-height: 1; font-weight: 700; letter-spacing: 0.01em; }
.slide-wm-header { font-family: var(--font-en); font-size: 60px; line-height: 1; font-weight: 700; letter-spacing: 0.01em; }
.slide-title-divider { font-family: var(--font-jp); font-size: 38px; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; }
.slide-title-header { font-family: var(--font-jp); font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; }
.slide-display { font-family: var(--font-en); font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: 0.01em; }
.slide-heading { font-family: var(--font-jp); font-size: 28px; line-height: 1.5; font-weight: 700; letter-spacing: 0.1em; }
.slide-body { font-family: var(--font-jp); font-size: 21px; line-height: 1.9; font-weight: 500; letter-spacing: 0.12em; }
.slide-caption { font-family: var(--font-jp); font-size: 16px; line-height: 1.6; font-weight: 500; letter-spacing: 0.2em; }
.slide-footnote { font-family: var(--font-jp); font-size: 14px; line-height: 1.7; font-weight: 500; letter-spacing: 0.12em; }