/* base.css - Notion Design System */
:root {
    /* Colors */
    --notion-primary: #5645d4;
    --notion-primary-pressed: #4534b3;
    --notion-primary-deep: #3a2a99;
    --notion-on-primary: #ffffff;
    
    --notion-brand-navy: #0a1530;
    --notion-brand-navy-deep: #070f24;
    --notion-brand-navy-mid: #1a2a52;
    
    --notion-link-blue: #0075de;
    --notion-link-blue-pressed: #005bab;
    
    --notion-brand-orange: #dd5b00;
    --notion-brand-pink: #ff64c8;
    --notion-brand-purple: #7b3ff2;
    --notion-brand-teal: #2a9d99;
    --notion-brand-green: #1aae39;
    --notion-brand-yellow: #f5d75e;
    
    /* Card Tints */
    --notion-card-peach: #ffe8d4;
    --notion-card-rose: #fde0ec;
    --notion-card-mint: #d9f3e1;
    --notion-card-lavender: #e6e0f5;
    --notion-card-sky: #dcecfa;
    --notion-card-yellow: #fef7d6;
    --notion-card-yellow-bold: #f9e79f;
    --notion-card-cream: #f8f5e8;
    --notion-card-gray: #f0eeec;
    
    /* Surfaces */
    --notion-canvas: #ffffff;
    --notion-surface: #f6f5f4;
    --notion-surface-soft: #fafaf9;
    --notion-hairline: #e5e3df;
    --notion-hairline-soft: #ede9e4;
    --notion-hairline-strong: #c8c4be;
    
    /* Ink */
    --notion-ink-deep: #000000;
    --notion-ink: #1a1a1a;
    --notion-charcoal: #37352f;
    --notion-slate: #5d5b54;
    --notion-steel: #787671;
    --notion-stone: #a4a097;
    --notion-muted: #bbb8b1;
    
    /* Semantic */
    --notion-success: #1aae39;
    --notion-warning: #dd5b00;
    --notion-error: #e03131;

    /* Spacing */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    --spacing-xxxl: 40px;
    
    /* Border Radius */
    --rounded-xs: 4px;
    --rounded-sm: 6px;
    --rounded-md: 8px;
    --rounded-lg: 12px;
    --rounded-xl: 16px;
    --rounded-full: 9999px;

    /* Shadows */
    --shadow-subtle: rgba(15, 15, 15, 0.04) 0px 1px 2px 0px;
    --shadow-card: rgba(15, 15, 15, 0.08) 0px 4px 12px 0px;
    --shadow-mockup: rgba(15, 15, 15, 0.20) 0px 24px 48px -8px;
    --shadow-modal: rgba(15, 15, 15, 0.16) 0px 16px 48px -8px;

    /* Legacy mapping for easier transition if needed, but better use new tokens */
    --bg-main: var(--notion-surface);
    --bg-panel: var(--notion-canvas);
    --text-primary: var(--notion-ink);
    --text-secondary: var(--notion-slate);
    --border-light: var(--notion-hairline);
    --accent: var(--notion-primary);
    --sidebar-width: 240px; /* Notion style sidebars are wider */
    --navbar-height: 52px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, sans-serif;
    color: var(--notion-ink);
    background-color: var(--notion-canvas);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--notion-ink);
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 48px; letter-spacing: -0.5px; }
h2 { font-size: 36px; letter-spacing: -0.5px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: 14px;
}

.hidden {
    display: none !important;
}

/* Global Scrollbar Styling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--notion-hairline-strong) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--notion-hairline-strong);
    border-radius: 10px;
    border: 1px solid transparent; /* Gives a little bit of spacing if needed */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--notion-stone);
}

/* Specific scrollbar for chat messages to be even more subtle if desired */
.chat-messages::-webkit-scrollbar-thumb,
.chat-list::-webkit-scrollbar-thumb {
    background: var(--notion-hairline);
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-list::-webkit-scrollbar-thumb:hover {
    background: var(--notion-hairline-strong);
}
/* Animations */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* Utilities */
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    height: 32px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--rounded-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-approved { background-color: var(--notion-card-mint); color: var(--notion-brand-green); }
.status-pending { background-color: var(--notion-card-peach); color: var(--notion-brand-orange); }
.status-rejected { background-color: var(--notion-card-rose); color: var(--notion-error); }