/* ============================================================
   MSA Design Tokens — Prototype usage
   Extracted from /requirements/style.css (Layer 1 + Layer 2 only)
   Single source of truth: /doc/design/MSA配色标准.md
   ============================================================ */

/* ----- Layer 1: Primitives ----- */
:root {
    /* Ice / Cyan — Aurora primary family */
    --ice-50:  #ecfeff;
    --ice-100: #cffafe;
    --ice-200: #a5f3fc;
    --ice-300: #67e8f9;
    --ice-400: #22d3ee;
    --ice-500: #06b6d4;
    --ice-600: #0891b2;
    --ice-700: #0e7490;
    --ice-800: #155e75;
    --ice-900: #164e63;

    /* Sun / Orange — Sunshine primary family */
    --sun-50:  #fff7ed;
    --sun-100: #ffedd5;
    --sun-200: #fed7aa;
    --sun-300: #fdba74;
    --sun-400: #fb923c;
    --sun-500: #f97316;
    --sun-600: #ea580c;
    --sun-700: #c2410c;
    --sun-800: #9a3412;
    --sun-900: #7c2d12;

    /* Night — Aurora-only deep dark palette */
    --night-100: #d8eef9;
    --night-200: #8aa0b8;
    --night-300: #6b87a4;
    --night-400: #2c5070;
    --night-500: #1f3a52;
    --night-600: #16314a;
    --night-700: #122236;
    --night-800: #0a1828;
    --night-900: #050b1a;

    /* Cream — Sunshine warm light palette */
    --cream-50:  #fefaf3;
    --cream-100: #fef5e7;
    --cream-200: #fbeacc;
    --cream-300: #f3e6c6;
    --cream-400: #e9d9b8;

    /* Slate — generic neutrals */
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* Status palette */
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;
    --amber-400:   #fbbf24;
    --amber-500:   #f59e0b;
    --amber-600:   #d97706;
    --red-400:     #f87171;
    --red-500:     #ef4444;
    --red-600:     #dc2626;
    --sky-400:     #38bdf8;
    --sky-500:     #0ea5e9;
    --sky-600:     #0284c7;

    /* Shared (non-theme) */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-pill: 9999px;

    --duration-fast:  120ms;
    --duration-base:  200ms;

    --font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;
    --font-sans: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ----- Layer 2: Semantic — Aurora (default, dark) ----- */
[data-theme="aurora"] {
    --bg:            var(--night-900);
    --bg-card:       var(--night-800);
    --bg-elev:       var(--night-700);
    --bg-overlay:    rgba(5, 11, 26, .75);

    --border:        var(--night-500);
    --border-soft:   var(--night-600);
    --border-strong: var(--night-400);

    --text:          var(--night-100);
    --text-strong:   #ffffff;
    --muted:         var(--night-200);
    /* Secondary text one step brighter than --muted (≈10.2:1 on --bg-card)
       for dense data tables where muted felt too dim. */
    --text-2:        #b3c6d8;
    --text-disabled: #4a5a72;

    --accent:        var(--ice-400);
    --accent-strong: var(--ice-500);
    --accent-bg:     rgba(34, 211, 238, .12);

    --ok:            var(--ice-300);
    --ok-bg:         rgba(103, 232, 249, .12);
    --warn:          var(--amber-400);
    --warn-bg:       rgba(251, 191, 36, .12);
    --bad:           var(--red-400);
    --bad-bg:        rgba(248, 113, 113, .12);
    --info:          var(--sky-400);
    --info-bg:       rgba(56, 189, 248, .12);

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, .4);
    --shadow:        0 6px 24px rgba(0, 0, 0, .5);
    --shadow-strong: 0 12px 36px rgba(34, 211, 238, .18);
    --focus-ring:    0 0 0 3px rgba(34, 211, 238, .35);

    --on-accent:     var(--night-900);

    /* Topbar: a deep surface that belongs to the dark shell, not a loud
       cyan band. Light text; cyan is reserved for hover/active. */
    --topbar-bg:     var(--night-800);
    --topbar-fg:     var(--night-100);
}

/* ----- Layer 2: Semantic — Sunshine (light) ----- */
[data-theme="sunshine"] {
    --bg:            var(--cream-50);
    --bg-card:       #ffffff;
    --bg-elev:       var(--cream-100);
    --bg-overlay:    rgba(15, 23, 42, .35);

    --border:        var(--cream-400);
    --border-soft:   var(--cream-300);
    --border-strong: var(--cream-200);

    --text:          var(--slate-800);
    --text-strong:   var(--slate-900);
    --muted:         var(--slate-500);
    /* Secondary text one step stronger (darker) than --muted for dense tables. */
    --text-2:        var(--slate-700);
    --text-disabled: var(--slate-300);

    --accent:        var(--sun-500);
    --accent-strong: var(--sun-600);
    --accent-bg:     rgba(249, 115, 22, .1);

    --ok:            var(--emerald-600);
    --ok-bg:         rgba(16, 163, 74, .1);
    --warn:          var(--amber-600);
    --warn-bg:       rgba(217, 119, 6, .1);
    --bad:           var(--red-600);
    --bad-bg:        rgba(220, 38, 38, .08);
    --info:          var(--sky-600);
    --info-bg:       rgba(2, 132, 199, .1);

    --shadow-sm:     0 1px 2px rgba(31, 41, 55, .06);
    --shadow:        0 4px 16px rgba(31, 41, 55, .08);
    --shadow-strong: 0 12px 36px rgba(249, 115, 22, .15);
    --focus-ring:    0 0 0 3px rgba(249, 115, 22, .25);

    --on-accent:     #ffffff;

    /* Topbar: the warm orange band + white text already reads well in the
       light theme, so keep it. */
    --topbar-bg:     var(--accent-strong);
    --topbar-fg:     var(--on-accent);
}

/* ----- Base reset ----- */
* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-md);
}

/* ----- Shared utilities ----- */
.theme-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 200;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }