/**
 * design_tokens.css
 * Premium Design System for Examoo
 * Using HSL for better color control and sophisticated transitions.
 */

:root {
    /* --- Colors --- */
    /* Primary (Examoo Green) */
    --brand-primary-h: 142;
    --brand-primary-s: 76%;
    --brand-primary-l: 45%;
    --brand-primary: hsl(var(--brand-primary-h), var(--brand-primary-s), var(--brand-primary-l));
    --brand-primary-soft: hsla(var(--brand-primary-h), var(--brand-primary-s), var(--brand-primary-l), 0.1);
    --brand-primary-hover: hsl(var(--brand-primary-h), var(--brand-primary-s), 40%);
    
    /* Grayscale / UI Backgrounds */
    --ui-bg: hsl(210, 40%, 98%);
    --ui-card-bg: hsl(0, 0%, 100%);
    --ui-sidebar-bg: hsl(0, 0%, 100%);
    --ui-border: hsl(210, 20%, 92%);
    --ui-border-soft: hsla(210, 20%, 92%, 0.5);
    
    /* Text */
    --text-main: hsl(215, 25%, 15%);
    --text-secondary: hsl(215, 15%, 45%);
    --text-muted: hsl(215, 10%, 65%);
    --text-on-brand: hsl(0, 0%, 100%);

    /* Semantic */
    --danger: hsl(0, 84%, 60%);
    --warning: hsl(35, 92%, 55%);
    --info: hsl(200, 95%, 45%);
    
    /* --- Layout --- */
    --topbar-height: 72px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 88px;
    --content-max-width: 1440px;
    --mobile-nav-height: 64px;
    
    /* --- Styles --- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    
    /* Shadows - Layered for depth */
    --shadow-soft: 0 2px 10px hsla(215, 20%, 20%, 0.05);
    --shadow-card: 0 10px 30px -10px hsla(215, 20%, 20%, 0.12);
    --shadow-float: 0 20px 40px -15px hsla(215, 20%, 20%, 0.2);
    
    /* Glassmorphism */
    --glass-bg: hsla(0, 0%, 100%, 0.8);
    --glass-border: hsla(0, 0%, 100%, 0.4);
    
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animations Variables */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}