/* portal/tokens/legacy-rs.css */
/* ── Design Tokens — DARK (default) ────────────────────────── */
:root {
    /* Structural surfaces */
    --rs-bg:          #060a10;
    --rs-surface:     #0a111a;
    --rs-surface-alt: #0e1724;
    --rs-panel:       #121d2c;
    --rs-sidebar-bg:  #070d18;
    --rs-topbar-bg:   #08111e;
    --rs-scroll:      var(--rs-scroll);
    --rs-muted:       var(--rs-muted);

    /* Borders */
    --rs-rim:   rgba(255,255,255,0.055);
    --rs-rim2:  rgba(255,255,255,0.10);
    --rs-rim3:  rgba(255,255,255,0.18);

    /* Text hierarchy */
    --rs-txt:   #4e6880;
    --rs-txt2:  #7fa4c4;
    --rs-txt3:  #c0d8ec;
    --rs-white: #e6f2ff;

    /* Accent colours — same for both themes */
    --rs-red:        #e8192c;
    --rs-red-bg:     rgba(232,25,44,0.10);
    --rs-red-glow:   rgba(232,25,44,0.30);
    --rs-teal:       #00c8a0;
    --rs-teal-bg:    rgba(0,200,160,0.10);
    --rs-teal-glow:  rgba(0,200,160,0.30);
    --rs-amber:      #f5a623;
    --rs-amber-bg:   rgba(245,166,35,0.10);
    --rs-blue:       #4499ff;
    --rs-blue-bg:    rgba(68,153,255,0.12);

    /* Layout & typography */
    --rs-h:    56px;
    --rs-sw:   252px;
    --rs-sw-c: 58px;
    --rs-font: 'Nunito', sans-serif;
    --rs-head: 'Rajdhani', sans-serif;
    --rs-mono: 'JetBrains Mono', monospace;
    --rs-tr:   0.22s ease;

    /* Interaction states */
    --rs-hover:  rgba(255,255,255,0.025);
    --rs-stripe: rgba(255,255,255,0.018);
    --rs-tint:   rgba(255,255,255,0.055);
    --rs-tint2:  rgba(255,255,255,0.035);

    /* ── Short-form aliases (page components) — auto-update on theme switch ── */
    --bg:        var(--rs-bg);
    --surface:   var(--rs-surface);
    --panel:     var(--rs-panel);
    --rim:       var(--rs-rim);
    --rim2:      var(--rs-rim2);
    --red:       var(--rs-red);
    --red-dim:   rgba(232,25,44,0.15);
    --teal:      var(--rs-teal);
    --teal-dim:  rgba(0,200,160,0.12);
    --amber:     var(--rs-amber);
    --amber-dim: rgba(245,166,35,0.12);
    --blue:      var(--rs-blue);
    --blue-dim:  var(--rs-blue-bg);
    --white:     var(--rs-white);
    --txt:       var(--rs-txt);
    --txt2:      var(--rs-txt2);
    --mono:      var(--rs-mono);
    --head:      var(--rs-head);
}

/* ── Design Tokens — LIGHT ──────────────────────────────────── */
html[data-theme="light"] {
    /* Layered steel-blue — canvas → card → inset chip */
    --rs-bg:          #d0dce8;
    --rs-surface:     #f6f9fc;
    --rs-surface-alt: #eaf1f8;
    --rs-panel:       #c4d4e4;
    --rs-sidebar-bg:  #111e2e;
    --rs-topbar-bg:   #eef4fa;
    --rs-scroll:      #5a82a0;
    --rs-muted:       #6b8aaa;

    --rs-rim:   rgba(10, 40, 80, 0.14);
    --rs-rim2:  rgba(10, 40, 80, 0.22);
    --rs-rim3:  rgba(10, 40, 80, 0.34);

    --rs-txt:   #4a647c;
    --rs-txt2:  #1a3354;
    --rs-txt3:  #0a1628;
    --rs-white: #061018;

    --rs-hover:  rgba(10, 40, 80, 0.08);
    --rs-stripe: rgba(10, 40, 80, 0.045);
    --rs-tint:   rgba(10, 40, 80, 0.07);
    --rs-tint2:  rgba(10, 40, 80, 0.04);

    --red-dim:   rgba(232, 25, 44, 0.10);
    --teal-dim:  rgba(0, 200, 160, 0.12);
    --amber-dim: rgba(245, 166, 35, 0.12);
}

/* Theme transition — smooth switch on all structural elements */
html { transition: background-color .3s ease, color .3s ease; }
body, #rs-topbar, #rs-sidebar, .rs-form-panel,
.rs-data-panel, .rs-stat, .dropdown-menu,
.rs-page, .rs-alert, .rs-field input, .rs-field select, .rs-field textarea {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}