/* ==========================================================================
   SIMMATICALLY SIMS TOOLS - UNIFIED DESIGN SYSTEM: THEME & DESIGN TOKENS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
    /* --- Brand & Accent Colors --- */
    --sl-purple: #9B20EE;
    --sl-purple-hover: #8216cf;
    --sl-purple-active: #6e10b1;
    --sl-purple-tint: #f5ebff;
    --sl-purple-alpha-10: rgba(155, 32, 238, 0.10);
    --sl-purple-alpha-15: rgba(155, 32, 238, 0.15);
    --sl-purple-alpha-25: rgba(155, 32, 238, 0.25);
    --sl-purple-glow: 0 8px 24px -4px rgba(155, 32, 238, 0.35);

    /* --- Status & Semantic Colors --- */
    --sl-success: #10b981;
    --sl-success-tint: #ecfdf5;
    --sl-warning: #f59e0b;
    --sl-warning-tint: #fffbeb;
    --sl-danger: #ef4444;
    --sl-danger-hover: #dc2626;
    --sl-danger-tint: #fef2f2;
    --sl-like: #e11d48;
    --sl-info: #0284c7;
    --sl-info-tint: #f0f9ff;

    /* --- Neutral & Surface Colors --- */
    --sl-bg: #f1f5f9;
    --sl-bg-subtle: #f8fafc;
    --sl-surface: #ffffff;
    --sl-surface-glass: rgba(255, 255, 255, 0.88);
    --sl-surface-glass-dark: rgba(15, 23, 42, 0.75);

    /* --- Text Colors --- */
    --sl-text: #1e293b;
    --sl-text-secondary: #475569;
    --sl-text-muted: #64748b;
    --sl-text-light: #94a3b8;
    --sl-text-inverse: #ffffff;

    /* --- Borders & Outlines --- */
    --sl-border: #e2e8f0;
    --sl-border-light: #f1f5f9;
    --sl-border-hover: #cbd5e1;
    --sl-border-focus: #9B20EE;

    /* --- Typography --- */
    --sl-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --sl-font-heading: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* --- Elevation & Shadows --- */
    --sl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --sl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --sl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --sl-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --sl-shadow-card-hover: 0 12px 28px -6px rgba(155, 32, 238, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.05);
    --sl-shadow-float: 0 10px 30px -10px rgba(0, 0, 0, 0.08);

    /* --- Border Radii --- */
    --sl-radius-xs: 4px;
    --sl-radius-sm: 8px;
    --sl-radius-md: 12px;
    --sl-radius-lg: 16px;
    --sl-radius-xl: 24px;
    --sl-radius-full: 9999px;

    /* --- Transitions --- */
    --sl-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --sl-transition-normal: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    --sl-transition-slow: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Base Elements & Tokens Setup
   ========================================================================== */

:root {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* High Contrast Brand Text Selection */
::selection {
    background-color: var(--sl-purple, #9B20EE) !important;
    color: #ffffff !important;
}

::-moz-selection {
    background-color: var(--sl-purple, #9B20EE) !important;
    color: #ffffff !important;
}

/* Material Symbols Rounded Setup */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: inherit;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    user-select: none;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-rounded.filled {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

/* Standard Custom Scrollbars */
.custom-scrollbar,
.sl-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.custom-scrollbar::-webkit-scrollbar,
.sl-scrollbar::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.sl-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.sl-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.16);
    border-radius: var(--sl-radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.sl-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.28);
}