/* 明示型(アプリ向け): 既定はライト。OS の設定には従わず、<html data-theme="dark"> のときだけダーク。uikit-theme.css(追従型)とは同時に読み込まない。
   自動生成: tokens/colors.json を編集して `node scripts/build-tokens.mjs` を実行してください。
   UIkit 3 の CSS の後に読み込みます:
   <link rel="stylesheet" href="uikit.min.css" />
   <link rel="stylesheet" href="uikit-theme.css" />
   書体(Zen Kaku Gothic New・Zen Maru Gothic・Myrica M)は各端末にインストールして使います(DesignReference の「書体の配布方法」を参照) */
html { font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; color: #0b1013; }
body { background: #f3f3f2; }
h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-button, .uk-navbar-nav > li > a, .uk-card-title { font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; color: #0b1013; }
code, kbd, samp, pre, :not(pre) > code { font-family: "Myrica M", "MyricaM M", "Cascadia Mono", Consolas, "MS Gothic", monospace; }
a, .uk-link { color: #17184b; }
a:hover, .uk-link:hover { color: #0e0f33; }
.uk-text-muted { color: #595857 !important; }
.uk-text-primary { color: #17184b !important; }
.uk-text-success { color: #007b43 !important; }
.uk-text-warning { color: #bf783a !important; }
.uk-text-danger { color: #b7282e !important; }
.uk-text-accent { color: #f08300 !important; }
.uk-background-primary { background-color: #17184b !important; }
.uk-background-muted { background-color: #f3f3f2 !important; }
.uk-background-accent { background-color: #f08300 !important; }
.uk-button, .uk-input, .uk-select, .uk-textarea, .uk-card, .uk-alert { border-radius: 8px; }
.uk-button-default { color: #0b1013; border-color: #bdc0ba; }
.uk-button-default:hover, .uk-button-default:focus { color: #17184b; border-color: #17184b; }
.uk-button-primary { background-color: #17184b; color: #fff; }
.uk-button-primary:hover, .uk-button-primary:focus { background-color: #0e0f33; color: #fff; }
.uk-button-primary:active { background-color: #111238; }
.uk-button-secondary { background-color: #0b1013; color: #fff; }
.uk-button-secondary:hover, .uk-button-secondary:focus { background-color: #595857; color: #fff; }
.uk-button-danger { background-color: #b7282e; color: #fff; }
.uk-button-danger:hover, .uk-button-danger:focus { background-color: #9c2227; color: #fff; }
.uk-button-danger:active { background-color: #891e23; }
/* アクセント(蜜柑色)。UIkitに無い色なので .uk-button-accent を追加 */
.uk-button-accent { background-color: #f08300; color: #0b1013; }
.uk-button-accent:hover, .uk-button-accent:focus { background-color: #f08300; color: #0b1013; filter: brightness(0.95); }
.uk-label { background-color: #17184b; color: #fff; }
.uk-label-success { background-color: #007b43; }
.uk-label-warning { background-color: #bf783a; color: #0b1013; }
.uk-label-danger { background-color: #b7282e; }
.uk-badge { background-color: #17184b; color: #fff; }
.uk-alert-primary { background: #e9e9f3; color: #0e0f33; }
.uk-alert-success { background: #e0efe8; color: #004a28; }
.uk-alert-warning { background: #f7efe7; color: #734823; }
.uk-alert-danger { background: #f6e5e6; color: #6e181c; }
.uk-input:focus, .uk-select:focus, .uk-textarea:focus { border-color: #17184b; color: #0b1013; }
.uk-radio:checked, .uk-checkbox:checked, .uk-radio:checked:focus, .uk-checkbox:checked:focus { background-color: #17184b; }
.uk-card-primary, .uk-section-primary { background: #17184b; }
.uk-card-default { background: #fffffc; }
.uk-navbar-nav > li.uk-active > a { color: #17184b; }
.uk-subnav-pill > .uk-active > a { background-color: #17184b; color: #ffffff; }

/* ---- ダークテーマ: <html data-theme="dark"> のときだけ ---- */
:root[data-theme="dark"] { color: #f4f4f8; background: #30334f }
:root[data-theme="dark"] body { background: #30334f }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6, :root[data-theme="dark"] .uk-h1, :root[data-theme="dark"] .uk-h2, :root[data-theme="dark"] .uk-h3, :root[data-theme="dark"] .uk-h4, :root[data-theme="dark"] .uk-h5, :root[data-theme="dark"] .uk-h6, :root[data-theme="dark"] .uk-heading-small, :root[data-theme="dark"] .uk-heading-medium, :root[data-theme="dark"] .uk-heading-large, :root[data-theme="dark"] .uk-button, :root[data-theme="dark"] .uk-navbar-nav > li > a, :root[data-theme="dark"] .uk-card-title, :root[data-theme="dark"] .uk-form-label { color: #f4f4f8 }
:root[data-theme="dark"] a, :root[data-theme="dark"] .uk-link { color: #d0d3ff }
:root[data-theme="dark"] a:hover, :root[data-theme="dark"] .uk-link:hover { color: #f4f4f8 }
:root[data-theme="dark"] .uk-text-muted { color: #c4c6dc !important }
:root[data-theme="dark"] .uk-text-primary { color: #d0d3ff !important }
:root[data-theme="dark"] .uk-text-success { color: #73b698 !important }
:root[data-theme="dark"] .uk-text-warning { color: #dcb593 !important }
:root[data-theme="dark"] .uk-text-danger { color: #d7898c !important }
:root[data-theme="dark"] .uk-background-muted { background-color: #3b3f66 !important }
:root[data-theme="dark"] .uk-button-default { color: #f4f4f8; border-color: #60668f }
:root[data-theme="dark"] .uk-button-default:hover, :root[data-theme="dark"] .uk-button-default:focus { color: #d0d3ff; border-color: #d0d3ff }
:root[data-theme="dark"] .uk-button-primary { background-color: #17184b; color: #ffffff; border-color: #60668f }
:root[data-theme="dark"] .uk-button-primary:hover, :root[data-theme="dark"] .uk-button-primary:focus { background-color: #0e0f33; color: #ffffff }
:root[data-theme="dark"] .uk-button-secondary { background-color: #60668f; color: #ffffff }
:root[data-theme="dark"] .uk-button-secondary:hover, :root[data-theme="dark"] .uk-button-secondary:focus { background-color: #787da0; color: #ffffff }
:root[data-theme="dark"] .uk-button-danger { background-color: #b7282e; color: #ffffff }
:root[data-theme="dark"] .uk-button-danger:hover, :root[data-theme="dark"] .uk-button-danger:focus { background-color: #9c2227; color: #ffffff }
:root[data-theme="dark"] .uk-button-accent, :root[data-theme="dark"] .uk-button-accent:hover, :root[data-theme="dark"] .uk-button-accent:focus { color: #0b1013 }
:root[data-theme="dark"] .uk-label, :root[data-theme="dark"] .uk-badge { background-color: #17184b; color: #ffffff; box-shadow: inset 0 0 0 1px #60668f }
:root[data-theme="dark"] .uk-label-success { background-color: #007b43; box-shadow: none }
:root[data-theme="dark"] .uk-label-warning { background-color: #bf783a; color: #0b1013; box-shadow: none }
:root[data-theme="dark"] .uk-label-danger { background-color: #b7282e; box-shadow: none }
:root[data-theme="dark"] .uk-alert-primary { background: #4a4f80; color: #f4f4f8 }
:root[data-theme="dark"] .uk-alert-success { background: #2f4b5f; color: #8cc4aa }
:root[data-theme="dark"] .uk-alert-warning { background: #554a5d; color: #e2c2a6 }
:root[data-theme="dark"] .uk-alert-danger { background: #543a5b; color: #df9ea1 }
:root[data-theme="dark"] .uk-input, :root[data-theme="dark"] .uk-select, :root[data-theme="dark"] .uk-textarea { background-color: #3b3f66; color: #f4f4f8; border-color: #60668f }
:root[data-theme="dark"] .uk-input::placeholder, :root[data-theme="dark"] .uk-textarea::placeholder { color: #c4c6dc }
:root[data-theme="dark"] .uk-input:focus, :root[data-theme="dark"] .uk-select:focus, :root[data-theme="dark"] .uk-textarea:focus { background-color: #3b3f66; color: #f4f4f8; border-color: #d0d3ff }
:root[data-theme="dark"] .uk-radio, :root[data-theme="dark"] .uk-checkbox { background-color: #3b3f66; border-color: #60668f }
:root[data-theme="dark"] .uk-radio:checked, :root[data-theme="dark"] .uk-checkbox:checked, :root[data-theme="dark"] .uk-radio:checked:focus, :root[data-theme="dark"] .uk-checkbox:checked:focus { background-color: #17184b; border-color: #d0d3ff }
:root[data-theme="dark"] .uk-card-default { background: #3b3f66; color: #f4f4f8; box-shadow: none; border: 1px solid #60668f }
:root[data-theme="dark"] .uk-card-primary, :root[data-theme="dark"] .uk-section-primary { background: #17184b; border: 1px solid #60668f }
:root[data-theme="dark"] .uk-table th { color: #c4c6dc }
:root[data-theme="dark"] .uk-table-divider > tr:not(:first-child), :root[data-theme="dark"] .uk-table-divider > :not(:first-child) > tr, :root[data-theme="dark"] .uk-table-divider > :first-child > tr:not(:first-child) { border-top-color: #60668f }
:root[data-theme="dark"] .uk-table-hover > tr:hover, :root[data-theme="dark"] .uk-table-hover tbody tr:hover { background: #4a4f80 }
:root[data-theme="dark"] .uk-subnav > * > a, :root[data-theme="dark"] .uk-pagination > * > * { color: #c4c6dc }
:root[data-theme="dark"] .uk-subnav > * > a:hover, :root[data-theme="dark"] .uk-pagination > * > :hover, :root[data-theme="dark"] .uk-pagination > .uk-active > * { color: #f4f4f8 }
:root[data-theme="dark"] .uk-subnav-pill > .uk-active > a { background-color: #17184b; color: #ffffff; box-shadow: inset 0 0 0 1px #60668f }
:root[data-theme="dark"] .uk-navbar-nav > li.uk-active > a { color: #d0d3ff }
:root[data-theme="dark"] hr { border-top-color: #60668f }
