/* ==========================================================================
   DESIGN TOKENS & CSS VARIABLES
   Muhammad Saad Qasim - Portfolio (Default Red / Sunset Theme)
   ========================================================================== */

:root {
    /* Base Font Stacks */
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Base Backgrounds */
    --bg-main: #0e070a;
    --bg-secondary: #170c10;
    --bg-tertiary: #26121b;
    --bg-card: rgba(28, 14, 20, 0.75);
    --bg-card-hover: rgba(42, 20, 30, 0.9);
    --bg-glass: rgba(23, 12, 16, 0.85);
    --bg-glass-strong: rgba(23, 12, 16, 0.96);
    
    /* Primary / Secondary Red & Sunset Accents */
    --primary: #f43f5e;
    --primary-light: #fb7185;
    --primary-dark: #e11d48;
    --primary-glow: rgba(244, 63, 94, 0.35);
    
    --secondary: #f97316;
    --secondary-light: #fb923c;
    --secondary-glow: rgba(249, 115, 22, 0.35);

    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;

    /* Text Colors */
    --text-main: #fdf2f4;
    --text-muted: #cbd5e1;
    --text-dim: #94a3b8;
    --text-inverse: #0f172a;

    /* Borders & Outlines */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.16);
    --border-glow: rgba(244, 63, 94, 0.45);
    --border-card: rgba(244, 63, 94, 0.18);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #f43f5e 0%, #f97316 100%);
    --gradient-accent: linear-gradient(135deg, #f43f5e 0%, #fb7185 50%, #f97316 100%);
    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);

    /* Shadows & Elevations */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 25px rgba(244, 63, 94, 0.3);

    /* Spacing & Sizes */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    --header-height: 72px;
    --max-width: 1240px;
}