/*
 * サイト全体の配色(ライト / ダーク)。pages/_document.js で uikit.min.css の後に読み込む。
 * ダークモードは OS の設定(prefers-color-scheme: dark)に合わせる。
 *
 * - ライトの値は UIkit の既定と同じなので、ライトモードの見た目は変わらない
 * - 部品の CSS は色を var(--c-…) で書く。ライトとダークで値を変えたい色はここに足す
 * - uikit.min.css は自前ビルド(ボタン・パンくず・ツールチップなどは含まない)。
 *   ダークモードでの上書きは、ビルドに含まれていてサイトで使っている部品だけにしている
 * - アプリのマニュアル(public/products の各 manual/index.html)と図面測定(public/zumen)は、それぞれ自前の CSS でダークモードに対応している
 */
:root {
    color-scheme: light dark;

    --c-bg: #fff;            /* ページの背景 */
    --c-bg-soft: #f8f8f8;    /* 淡い背景(ナビバー、表の縞、インラインコード) */
    --c-surface: #fff;       /* カード、ドロップダウン */
    --c-surface-2: #f5f5f7;  /* カードの中の面、入力欄 */
    --c-text: #666;          /* 本文 */
    --c-text-strong: #333;   /* 見出し、強調 */
    --c-text-muted: #999;    /* 補足 */
    --c-border: #e5e5e5;     /* 罫線 */
    --c-link: #1e87f0;
    --c-link-hover: #0f6ecd;
    --c-code: #f0506e;       /* インラインコード、em */
    --c-accent: #3958ff;     /* 製品ページなどのアクセント */
    --c-accent-soft: rgba(57, 88, 255, 0.08);
    --c-shadow: rgba(0, 0, 0, 0.08);
    /* インラインスタイル(style={{ … }})はメディアクエリで上書きできないので、色はこのトークンで書く */
    --c-ink: #1e293b;        /* 濃い見出し */
    --c-gray-fill: #f9fafb;  /* 淡いグレーの面 */
    --c-gray-text: #6b7280;  /* グレーの文字 */
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-bg: #121214;
        --c-bg-soft: #1b1b1f;
        --c-surface: #1c1c20;
        --c-surface-2: #26262b;
        --c-text: #c4c4ca;
        --c-text-strong: #f1f1f4;
        --c-text-muted: #9a9aa2;
        --c-border: #36363d;
        --c-link: #6aaeff;
        --c-link-hover: #9bc9ff;
        --c-code: #ff8fa6;
        --c-accent: #8d9cff;
        --c-accent-soft: rgba(141, 156, 255, 0.14);
        --c-shadow: rgba(0, 0, 0, 0.5);
        --c-ink: #f1f1f4;
        --c-gray-fill: #1b1b1f;
        --c-gray-text: #9a9aa2;
    }

    /* ---- 基本の要素 ---- */
    html {
        background: var(--c-bg);
        color: var(--c-text);
    }
    .uk-link,
    a {
        color: var(--c-link);
    }
    .uk-link:hover,
    .uk-link-toggle:hover .uk-link,
    .uk-link-toggle:focus .uk-link,
    a:hover {
        color: var(--c-link-hover);
    }
    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-heading-xlarge, .uk-heading-2xlarge {
        color: var(--c-text-strong);
    }
    em {
        color: var(--c-code);
    }
    :not(pre) > code,
    :not(pre) > kbd,
    :not(pre) > samp {
        color: var(--c-code);
        background: var(--c-surface-2);
    }
    ins,
    mark {
        background: #4d4620;
        color: var(--c-text-strong);
    }
    hr,
    .uk-hr {
        border-top-color: var(--c-border);
    }
    blockquote {
        color: var(--c-text-strong);
    }
    blockquote footer {
        color: var(--c-text);
    }
    pre {
        color: var(--c-text);
        border-color: var(--c-border);
        background: var(--c-surface);
    }
    ::selection {
        background: #2f6fd6;
        color: #fff;
    }

    /* ---- 見出しの装飾・区切り線 ---- */
    .uk-heading-divider {
        border-bottom-color: var(--c-border);
    }
    .uk-heading-bullet::before {
        border-left-color: var(--c-border);
    }
    .uk-heading-line > ::before,
    .uk-heading-line > ::after,
    .uk-divider-icon::before,
    .uk-divider-icon::after {
        border-bottom-color: var(--c-border);
    }
    .uk-divider-small::after {
        border-top-color: var(--c-border);
    }
    .uk-divider-vertical {
        border-left-color: var(--c-border);
    }
    .uk-list-divider > li:nth-child(n+2) {
        border-top-color: var(--c-border);
    }

    /* ---- リンクの種類 ---- */
    .uk-link-muted a,
    a.uk-link-muted,
    .uk-link-text a:hover,
    a.uk-link-text:hover {
        color: var(--c-text-muted);
    }
    .uk-link-muted a:hover,
    a.uk-link-muted:hover {
        color: var(--c-text);
    }
    .uk-link-heading a:hover,
    a.uk-link-heading:hover {
        color: var(--c-link);
    }

    /* ---- 表 ---- */
    .uk-table th,
    .uk-table caption {
        color: var(--c-text-muted);
    }
    .uk-table-divider > tr:not(:first-child),
    .uk-table-divider > :not(:first-child) > tr,
    .uk-table-divider > :first-child > tr:not(:first-child) {
        border-top-color: var(--c-border);
    }
    .uk-table-striped > tr:nth-of-type(odd),
    .uk-table-striped tbody tr:nth-of-type(odd) {
        background: var(--c-bg-soft);
        border-top-color: var(--c-border);
        border-bottom-color: var(--c-border);
    }
    .uk-table-hover > tr:hover,
    .uk-table-hover tbody tr:hover,
    .uk-table > tr.uk-active,
    .uk-table tbody tr.uk-active {
        background: #2a2918;
    }

    /* ---- フォーム・検索 ---- */
    .uk-input,
    .uk-select,
    .uk-textarea {
        background: var(--c-surface-2);
        color: var(--c-text);
        border-color: var(--c-border);
    }
    .uk-input:focus,
    .uk-select:focus,
    .uk-textarea:focus {
        background-color: var(--c-surface-2);
        color: var(--c-text-strong);
        border-color: var(--c-link);
    }
    .uk-input:disabled,
    .uk-select:disabled,
    .uk-textarea:disabled {
        background-color: var(--c-bg-soft);
        color: var(--c-text-muted);
        border-color: var(--c-border);
    }
    .uk-input::placeholder,
    .uk-textarea::placeholder,
    .uk-search-input::placeholder {
        color: var(--c-text-muted);
    }
    .uk-select:not([multiple]):not([size]) option {
        color: var(--c-text-strong);
        background: var(--c-surface-2);
    }
    .uk-search-input {
        color: var(--c-text);
    }
    .uk-search .uk-search-icon,
    .uk-search .uk-search-icon:hover,
    .uk-search-toggle {
        color: var(--c-text-muted);
    }
    .uk-search-toggle:hover,
    .uk-search-toggle:focus {
        color: var(--c-text);
    }
    .uk-search-default .uk-search-input {
        border-color: var(--c-border);
    }
    .uk-icon-link {
        color: var(--c-text-muted);
    }
    .uk-icon-link:hover,
    .uk-icon-link:focus,
    .uk-icon-link:active,
    .uk-active > .uk-icon-link {
        color: var(--c-text);
    }
    .uk-icon-button {
        background: var(--c-surface-2);
        color: var(--c-text-muted);
    }
    .uk-icon-button:hover,
    .uk-icon-button:focus,
    .uk-icon-button:active,
    .uk-active > .uk-icon-button {
        background-color: #303036;
        color: var(--c-text);
    }

    /* ---- カード・モーダル ---- */
    .uk-card-default {
        background: var(--c-surface);
        color: var(--c-text);
        box-shadow: 0 0 0 1px var(--c-border), 0 5px 15px rgba(0, 0, 0, 0.45);
    }
    .uk-card-default .uk-card-title {
        color: var(--c-text-strong);
    }
    .uk-card-default.uk-card-hover:hover {
        background-color: var(--c-surface);
        box-shadow: 0 0 0 1px var(--c-border), 0 14px 25px rgba(0, 0, 0, 0.6);
    }
    .uk-card-default .uk-card-header {
        border-bottom-color: var(--c-border);
    }
    .uk-card-default .uk-card-footer {
        border-top-color: var(--c-border);
    }
    .uk-modal-dialog {
        background: var(--c-surface);
    }

    /* ---- ナビ・ナビバー ---- */
    .uk-nav-default > li > a,
    .uk-nav-default .uk-nav-sub a,
    .uk-nav-primary > li > a,
    .uk-nav-primary .uk-nav-sub a,
    .uk-navbar-nav > li > a,
    .uk-navbar-toggle,
    .uk-navbar-dropdown-nav > li > a,
    .uk-navbar-dropdown-nav .uk-nav-sub a {
        color: var(--c-text-muted);
    }
    .uk-nav-default > li > a:hover,
    .uk-nav-default > li > a:focus,
    .uk-nav-default .uk-nav-sub a:hover,
    .uk-nav-default .uk-nav-sub a:focus,
    .uk-nav-primary > li > a:hover,
    .uk-nav-primary > li > a:focus,
    .uk-nav-primary .uk-nav-sub a:hover,
    .uk-nav-primary .uk-nav-sub a:focus,
    .uk-navbar-nav > li:hover > a,
    .uk-navbar-nav > li > a:focus,
    .uk-navbar-nav > li > a.uk-open,
    .uk-navbar-toggle:hover,
    .uk-navbar-toggle:focus,
    .uk-navbar-toggle.uk-open,
    .uk-navbar-item,
    .uk-navbar-dropdown-nav > li > a:hover,
    .uk-navbar-dropdown-nav > li > a:focus,
    .uk-navbar-dropdown-nav .uk-nav-sub a:hover,
    .uk-navbar-dropdown-nav .uk-nav-sub a:focus {
        color: var(--c-text);
    }
    .uk-nav-default > li.uk-active > a,
    .uk-nav-default .uk-nav-header,
    .uk-nav-default .uk-nav-sub li.uk-active > a,
    .uk-nav-primary > li.uk-active > a,
    .uk-nav-primary .uk-nav-header,
    .uk-nav-primary .uk-nav-sub li.uk-active > a,
    .uk-navbar-nav > li > a:active,
    .uk-navbar-nav > li.uk-active > a,
    .uk-navbar-dropdown-nav > li.uk-active > a,
    .uk-navbar-dropdown-nav .uk-nav-header,
    .uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a {
        color: var(--c-text-strong);
    }
    .uk-nav-default .uk-nav-divider,
    .uk-nav-primary .uk-nav-divider,
    .uk-navbar-dropdown-nav .uk-nav-divider {
        border-top-color: var(--c-border);
    }
    .uk-navbar-container:not(.uk-navbar-transparent) {
        background: var(--c-bg-soft);
    }
    .uk-navbar-dropdown,
    .uk-navbar-dropbar {
        background: var(--c-surface);
        color: var(--c-text);
        box-shadow: 0 0 0 1px var(--c-border), 0 5px 12px rgba(0, 0, 0, 0.5);
    }
    .uk-navbar-dropdown-grid > :not(.uk-first-column)::before {
        border-left-color: var(--c-border);
    }
    .uk-navbar-dropdown-grid.uk-grid-stack > .uk-grid-margin::before {
        border-top-color: var(--c-border);
    }
    .uk-logo {
        color: var(--c-text-strong);
    }
    .uk-logo:hover,
    .uk-logo:focus {
        color: var(--c-text);
    }

    /* ---- 文字・背景のユーティリティ ---- */
    .uk-text-lead {
        color: var(--c-text-strong);
    }
    .uk-text-meta,
    .uk-text-meta a,
    .uk-article-meta,
    .uk-article-meta a {
        color: var(--c-text-muted);
    }
    .uk-text-meta a:hover,
    .uk-article-meta a:hover {
        color: var(--c-text);
    }
    .uk-text-muted {
        color: var(--c-text-muted) !important;
    }
    .uk-text-emphasis,
    .uk-text-secondary {
        color: var(--c-text-strong) !important;
    }
    .uk-background-default {
        background-color: var(--c-bg);
    }
    .uk-background-muted {
        background-color: var(--c-bg-soft);
    }
    .uk-box-shadow-small,
    .uk-box-shadow-hover-small:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }
    .uk-box-shadow-medium,
    .uk-box-shadow-hover-medium:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
}