/* 生成物: 手で直さない。
 * 正本は design/tokens.json（Claude Design「okishima.jp HUD」の写し）。
 * 直すときは tokens.json を直して python scripts/gen_tokens_css.py を走らせる（Life #389）。
 */

:root {
  --f-display: "Exo 2", "IBM Plex Sans JP", system-ui, sans-serif;
  --f-mono: "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace;
  --f-sans: "IBM Plex Sans JP", system-ui, sans-serif;
  --t-brand-size: 26px;
  --t-brand-line: 32px;
  --t-brand-weight: 700;
  --t-brand-spacing: 0.22em;
  --t-brand-family-size: 20px;
  --t-brand-family-line: 26px;
  --t-brand-family-weight: 700;
  --t-brand-family-spacing: 0.08em;
  --t-state-size: 30px;
  --t-state-line: 36px;
  --t-state-weight: 700;
  --t-state-spacing: 0.08em;
  --t-value-size: 24px;
  --t-value-line: 30px;
  --t-value-weight: 500;
  --t-value-spacing: normal;
  --t-numeral-size: 40px;
  --t-numeral-line: 44px;
  --t-numeral-weight: 300;
  --t-numeral-spacing: normal;
  --t-label-size: 12px;
  --t-label-line: 16px;
  --t-label-weight: 400;
  --t-label-spacing: 0.22em;
  --t-label-small-size: 11px;
  --t-label-small-line: 14px;
  --t-label-small-weight: 400;
  --t-label-small-spacing: 0.14em;
  --t-readout-size: 14px;
  --t-readout-line: 20px;
  --t-readout-weight: 400;
  --t-readout-spacing: normal;
  --t-readout-small-size: 12px;
  --t-readout-small-line: 16px;
  --t-readout-small-weight: 400;
  --t-readout-small-spacing: normal;
  --t-heading-size: 14px;
  --t-heading-line: 20px;
  --t-heading-weight: 700;
  --t-heading-spacing: 0.06em;
  --t-body-family-size: 16px;
  --t-body-family-line: 26px;
  --t-body-family-weight: 400;
  --t-body-family-spacing: normal;
  --t-body-size: 15px;
  --t-body-line: 24px;
  --t-body-weight: 400;
  --t-body-spacing: normal;
  --t-body-small-size: 14px;
  --t-body-small-line: 22px;
  --t-body-small-weight: 400;
  --t-body-small-spacing: normal;
  --t-caption-size: 13px;
  --t-caption-line: 18px;
  --t-caption-weight: 400;
  --t-caption-spacing: normal;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-round: 9999px;
  --sh-glow-accent: 0 0 18px rgba(91, 227, 255, 0.55);
  --sh-glow-orange: 0 0 10px rgba(255, 138, 61, 0.9);
  --sh-glow-purple: 0 0 14px rgba(180, 140, 255, 0.55);
  --sh-glow-ok: 0 0 8px rgba(53, 227, 154, 0.9);
  --sh-glow-danger: 0 0 8px rgba(255, 90, 90, 0.9);
  --sh-panel-inset: inset 0 0 60px rgba(91, 227, 255, 0.06);
  --sh-header-line: 0 1px 24px rgba(91, 227, 255, 0.12);
}

:root, :root[data-theme="family"], :root[data-theme="family"][data-mode="light"] {
  --c-ground: #F6F4EE;
  --c-surface: #FFFFFF;
  --c-surface-raised: #F1EEE7;
  --c-hairline: #D7DEE6;
  --c-hairline-strong: #B7C2CE;
  --c-text: #141A22;
  --c-text-strong: #0B1016;
  --c-text-muted: #4B5563;
  --c-text-dim: #374151;
  --c-accent: #0E7C9A;
  --c-accent-soft: #0A5F76;
  --c-orange: #E8731F;
  --c-orange-text: #8A3C08;
  --c-purple: #6D4ACF;
  --c-purple-text: #5236B5;
  --c-purple-soft: #E6E1F7;
  --c-ok: #1A8F5C;
  --c-danger: #C0392B;
  --c-danger-text: #9A2B20;
  --c-unknown: #8A94A0;
}

:root[data-theme="family"][data-mode="dark"] {
  --c-ground: #14161A;
  --c-surface: #1D2026;
  --c-surface-raised: #272B33;
  --c-hairline: #343A44;
  --c-hairline-strong: #4A5260;
  --c-text: #ECEDEF;
  --c-text-strong: #FFFFFF;
  --c-text-muted: #B3B8C2;
  --c-text-dim: #C9CDD5;
  --c-accent: #5BE3FF;
  --c-accent-soft: #B7F2FF;
  --c-orange: #FF9A55;
  --c-orange-text: #FFB07A;
  --c-purple: #C4A6FF;
  --c-purple-text: #C4A6FF;
  --c-purple-soft: #2E2744;
  --c-ok: #4FE3A6;
  --c-danger: #FF6B6B;
  --c-danger-text: #FF8E8E;
  --c-unknown: #8A94A0;
}

:root[data-theme="hud"], :root[data-theme="hud"][data-mode="dark"] {
  --c-ground: #04080D;
  --c-surface: #0A141D;
  --c-surface-raised: #0E1A26;
  --c-hairline: #1C3442;
  --c-hairline-strong: #2A4D5E;
  --c-text: #CFEFFF;
  --c-text-strong: #E8FBFF;
  --c-text-muted: #7FB6C9;
  --c-text-dim: #9FD6E8;
  --c-accent: #5BE3FF;
  --c-accent-soft: #B7F2FF;
  --c-orange: #FF8A3D;
  --c-orange-text: #FFA061;
  --c-purple: #B48CFF;
  --c-purple-text: #C4A6FF;
  --c-purple-soft: #D7C4FF;
  --c-ok: #35E39A;
  --c-danger: #FF5A5A;
  --c-danger-text: #FF7A7A;
  --c-unknown: #6E7681;
}

:root[data-theme="hud"][data-mode="light"] {
  --c-ground: #EEF4F8;
  --c-surface: #FFFFFF;
  --c-surface-raised: #E3EDF4;
  --c-hairline: #C5D6E2;
  --c-hairline-strong: #9FB7C8;
  --c-text: #102433;
  --c-text-strong: #07141E;
  --c-text-muted: #3F5C6E;
  --c-text-dim: #2E4756;
  --c-accent: #0B7FA3;
  --c-accent-soft: #06607C;
  --c-orange: #E8731F;
  --c-orange-text: #8A3C08;
  --c-purple: #6D4ACF;
  --c-purple-text: #5236B5;
  --c-purple-soft: #E6E1F7;
  --c-ok: #1A8F5C;
  --c-danger: #C0392B;
  --c-danger-text: #9A2B20;
  --c-unknown: #7D8A96;
}

:root[data-theme="family"] { color-scheme: light; }
:root[data-theme="family"][data-mode="dark"] { color-scheme: dark; }
:root[data-theme="hud"] { color-scheme: dark; }
:root[data-theme="hud"][data-mode="light"] { color-scheme: light; }