/*
    Shared design tokens for the Pi console shell.
    Page CSS should consume these variables rather than redefining the visual language.
*/

:root {
    --bg: #070b10;
    --frame-top: #dfe5ec;
    --frame-bottom: #c5ccd5;
    --frame-border: #9099a5;

    --panel-bg: rgba(8, 15, 24, 0.94);
    --panel-bg-soft: rgba(10, 18, 28, 0.90);
    --panel-border: rgba(201, 221, 245, 0.18);
    --panel-divider: rgba(201, 221, 245, 0.10);

    --text-main: #eef4fb;
    --text-soft: #c0cedd;
    --text-muted: #93a6bb;
    --text-accent: #e3efff;

    --nav-bg: rgba(10, 16, 26, 0.96);
    --nav-button: rgba(255, 255, 255, 0.04);
    --nav-button-hover: rgba(255, 255, 255, 0.07);
    --nav-button-active: rgba(148, 188, 255, 0.20);
    --nav-border: rgba(201, 221, 245, 0.14);

    --yellow: #ffd767;
    --orange: #ffb15a;
    --red: #ff756b;
    --green: #9df0b4;
    --blue: #89b7ff;
    --cyan: #8fe6ff;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;

    --font-size-label: 11px;
    --font-size-body: 14px;
    --font-size-title: 18px;
    --font-size-console-title: 24px;
}