/* PULSE Design System Tokens (draft)
   Adjust values to match the provided design files */

:root {
    /* Brand */
    --color-primary: #4a90e2;
    --color-primary-600: #3a7ccd;
    --color-accent: #667eea;

    /* Neutrals */
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-text: #0f172a;
    --color-text-muted: #666666;

    /* States */
    --color-success-bg: #d1fae5;
    --color-success-text: #0f766e;
    --color-warn-bg: #fff7ed;
    --color-warn-text: #b45309;
    --color-alert-bg: #fee2e2;
    --color-alert-text: #b91c1c;

    /* Sidebar (dark) */
    --sidebar-bg: #2d2d2d;
    --sidebar-border: #404040;
    --sidebar-text: #ffffff;
    --sidebar-muted: #999999;

    /* Shadows & Radius */
    --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.08);
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --text-xs: 12px;
    --text-sm: 13px;
    --text: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 22px;
    --text-3xl: 28px;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* Base reset/typography */
html,
body {
    height: 100%;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container,
.draft-container,
.card {
    background: var(--color-surface);
}

.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

/* Utilities */
.muted {
    color: var(--color-text-muted);
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 10px 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--color-primary-600);
}

.status {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: var(--text-sm);
}

.status.ok {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status.warn {
    background: var(--color-warn-bg);
    color: var(--color-warn-text);
}

.status.alert {
    background: var(--color-alert-bg);
    color: var(--color-alert-text);
}

.sidebar {
    background: var(--sidebar-bg);
}

.sidebar .user-name,
.sidebar .logo {
    color: var(--sidebar-text);
}

.sidebar .nav-item {
    color: var(--sidebar-muted);
}

.sidebar .nav-item.active {
    color: var(--sidebar-text);
}

.sidebar .user-greeting {
    color: var(--sidebar-muted);
}

.sidebar .footer-link {
    color: var(--sidebar-muted);
}