/* ═══════════════════════════════════════════
   TrainControl — Design Tokens
   ═══════════════════════════════════════════ */

:root {
    /* ── Brand ── */
    --tc-blue:        #435990;
    --tc-blue-dark:   #193068;
    --tc-red:         #d14550;
    --tc-green:       #4da678;
    --tc-orange:      #ec9438;
    --tc-purple:      #856cb8;

    /* ── Surfaces ── */
    --bg-app:         #f2f0ed;
    --bg-card:        rgba(255, 255, 255, 0.72);
    --bg-card-solid:  #ffffff;
    --bg-sidebar:     rgba(255, 255, 255, 0.55);
    --bg-header:      rgba(255, 255, 255, 0.65);
    --bg-footer:      rgba(255, 255, 255, 0.65);
    --bg-input:       rgba(0, 0, 0, 0.04);
    --bg-slot-empty:  rgba(0, 0, 0, 0.03);

    /* ── Text ── */
    --text-primary:   #1a1a2e;
    --text-secondary: #6b7280;
    --text-tertiary:  #9ca3af;
    --text-on-accent: #ffffff;

    /* ── Borders ── */
    --border-light:   rgba(0, 0, 0, 0.06);
    --border-medium:  rgba(0, 0, 0, 0.10);
    --border-card:    rgba(255, 255, 255, 0.60);

    /* ── Shadows ── */
    --shadow-card:    0 2px 20px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255,255,255,0.5) inset;
    --shadow-raised:  0 8px 32px rgba(0, 0, 0, 0.10);
    --shadow-modal:   0 24px 80px rgba(0, 0, 0, 0.18);

    /* ── Glass ── */
    --glass-blur:     20px;
    --glass-bg:       rgba(255, 255, 255, 0.55);
    --glass-border:   rgba(255, 255, 255, 0.45);

    /* ── Radii ── */
    --radius-sm:      8px;
    --radius-md:      12px;
    --radius-lg:      16px;
    --radius-xl:      20px;
    --radius-pill:    999px;

    /* ── Sizing ── */
    --header-h:       56px;
    --footer-h:       64px;
    --sidebar-w:      220px;
    --slot-min-h:     320px;

    /* ── Spacing ── */
    --gap-xs:         4px;
    --gap-sm:         8px;
    --gap-md:         16px;
    --gap-lg:         24px;
    --gap-xl:         32px;

    /* ── Typography ── */
    --font-sans:      -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
    --font-mono:      "SF Mono", "Fira Code", monospace;

    /* ── Transitions ── */
    --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:  150ms;
    --duration-med:   250ms;
    --duration-slow:  400ms;
}