﻿/* =====================================================================
   LunaTA  —  客先ブランドスキン  2026 Edition (v2.0)
   Built on USsoft Common Interface Luna

   使い方:
     <link href="css/luna.css" rel="stylesheet" />
     <link href="css/luna-ta.css" rel="stylesheet" />
     <html data-luna-brand="ta" data-luna-theme="light|dark|auto">

   ブランドカラー: Navy #000080 / Red #A00000
   構造・余白・コンポーネントは Luna と完全共通。色トークンのみ差し替えます。
   ===================================================================== */

@layer luna.brand {

    /* ---------- Light ---------- */
    :root[data-luna-brand="ta"] {
        --luna-brand: #000080; /* TA Navy */
        --luna-brand-strong: #00004D;
        --luna-on-brand: #F4F4FC;
        --luna-accent: #A00000; /* TA Red */
        --luna-accent-strong: #7C0000;
        --luna-on-accent: #FFFFFF;
        /* 赤のフォーカスはエラーと紛れるため、フォーカスとリンクはネイビー系 */
        --luna-focus: #3434B6;
        --luna-link: #2B2BB8;
        --luna-bg: #EFEFF7;
        --luna-surface: #FFFFFF;
        --luna-surface-2: #F6F6FB;
        --luna-surface-3: #ECECF5;
        --luna-line: #DDDDEC;
        --luna-line-strong: #BFC0D9;
        --luna-ink: #12123A;
        --luna-ink-2: #4E4F78;
        --luna-ink-3: #8586A8;
        --luna-rail-bg: #000080;
        --luna-rail-bg-2: #00004D;
        --luna-rail-ink: #B4B5E2;
        --luna-rail-ink-active: #FFFFFF;
        --luna-rail-arc: rgba(255, 150, 150, .22);
        --luna-rail-marker: #F26B6B; /* ネイビー上で視認できる明度の赤 */
        /* 操作色の深い赤(#A00000)と区別するため、エラーは明るく鮮やかな赤 */
        --luna-bad: #D42A32;
        --luna-on-bad: #FFFFFF;
        --luna-info: #2B2BB8;
    }

        /* ---------- Dark ---------- */
        :root[data-luna-brand="ta"][data-luna-theme="dark"] {
            --luna-brand: #E3E3F7;
            --luna-brand-strong: #FFFFFF;
            --luna-on-brand: #00004D;
            --luna-accent: #E25555;
            --luna-accent-strong: #F07C7C;
            --luna-on-accent: #1A0000;
            --luna-focus: #8C8CFF;
            --luna-link: #A5A6FF;
            --luna-bg: #08081F;
            --luna-surface: #10102C;
            --luna-surface-2: #0B0B24;
            --luna-surface-3: #18183C;
            --luna-line: #24244F;
            --luna-line-strong: #38386C;
            --luna-ink: #ECECF8;
            --luna-ink-2: #A9AACB;
            --luna-ink-3: #74759A;
            --luna-rail-bg: #0A0A3C;
            --luna-rail-bg-2: #05051F;
            --luna-rail-ink: #9596C4;
            --luna-rail-ink-active: #FFFFFF;
            --luna-rail-arc: rgba(240, 106, 106, .18);
            --luna-rail-marker: #E25555;
            --luna-bad: #FF7A85;
            --luna-on-bad: #1F0508;
            --luna-info: #A5A6FF;
        }

    @media (prefers-color-scheme: dark) {
        :root[data-luna-brand="ta"][data-luna-theme="auto"] {
            --luna-brand: #E3E3F7;
            --luna-brand-strong: #FFFFFF;
            --luna-on-brand: #00004D;
            --luna-accent: #E25555;
            --luna-accent-strong: #F07C7C;
            --luna-on-accent: #1A0000;
            --luna-focus: #8C8CFF;
            --luna-link: #A5A6FF;
            --luna-bg: #08081F;
            --luna-surface: #10102C;
            --luna-surface-2: #0B0B24;
            --luna-surface-3: #18183C;
            --luna-line: #24244F;
            --luna-line-strong: #38386C;
            --luna-ink: #ECECF8;
            --luna-ink-2: #A9AACB;
            --luna-ink-3: #74759A;
            --luna-rail-bg: #0A0A3C;
            --luna-rail-bg-2: #05051F;
            --luna-rail-ink: #9596C4;
            --luna-rail-ink-active: #FFFFFF;
            --luna-rail-arc: rgba(240, 106, 106, .18);
            --luna-rail-marker: #E25555;
            --luna-bad: #FF7A85;
            --luna-on-bad: #1F0508;
            --luna-info: #A5A6FF;
        }
    }
}
