/* -------------------------------------------------------------
 * variables.css - Khanjahan Ali Polytechnic Institute Design Tokens
 * Light & Dark theme color variables and fluid clamp() typography
 * ------------------------------------------------------------- */

:root {
    /* Hex Colors (Design requirements) */
    --primary: #0D47A1;
    --primary-rgb: 13, 71, 161;
    --secondary: #1565C0;
    --secondary-rgb: 21, 101, 192;
    --accent: #00C853;
    --accent-rgb: 0, 200, 83;
    
    /* Light Theme Specifics */
    --bg-body: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-header: rgba(255, 255, 255, 0.85);
    --text-main: #1E293B;
    --text-slate: #475569;
    --text-muted: #94A3B8;
    --border-color: rgba(13, 71, 161, 0.08);
    --shadow-primary: 0 10px 30px -10px rgba(13, 71, 161, 0.12);
    --shadow-hover: 0 20px 40px -15px rgba(13, 71, 161, 0.22);
    
    /* Shared Elements */
    --radius-md: 16px;
    --radius-full: 9999px;
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Responsive Typography with clamp() */
    --fs-h1: clamp(2.2rem, 5.5vw + 1rem, 4.2rem);
    --fs-h2: clamp(1.6rem, 3.8vw + 0.8rem, 2.8rem);
    --fs-h3: clamp(1.2rem, 2.2vw + 0.7rem, 1.8rem);
    --fs-body: clamp(0.92rem, 0.15vw + 0.85rem, 1.1rem);
    --fs-body-sm: clamp(0.82rem, 0.1vw + 0.8rem, 0.98rem);
    --fs-eyebrow: clamp(0.72rem, 0.05vw + 0.7rem, 0.85rem);
    
    /* Spacing with clamp() */
    --space-sm: clamp(0.75rem, 1.2vw, 1.25rem);
    --space-md: clamp(1.25rem, 2.2vw, 2.25rem);
    --space-lg: clamp(2.25rem, 4.5vw, 4.5rem);
    --space-xl: clamp(4.5rem, 7.5vw, 7.5rem);
}

/* Dark Theme Overrides triggered via body class */
body.dark-theme {
    --bg-body: #0F172A;
    --bg-card: #1E293B;
    --bg-header: rgba(30, 41, 59, 0.85);
    --text-main: #F8FAFC;
    --text-slate: #CBD5E1;
    --text-muted: #64748B;
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-primary: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 20px 40px -15px rgba(0, 0, 0, 0.55);
}