/* ===================================
   PORTFOLIO THEME SYSTEM
   Centralized styling for easy theme updates
   =================================== */

:root {
    /* ===================================
       COLOR PALETTE - CLEAN ENTERPRISE THEME
       Professional blue and white design
       =================================== */

    /* Primary Brand Colors */
    --color-primary: #3b82f6;        /* blue-500 */
    --color-primary-dark: #2563eb;   /* blue-600 */
    --color-primary-light: #60a5fa;  /* blue-400 */

    /* Background Colors */
    --color-bg-primary: #ffffff;     /* white */
    --color-bg-secondary: #f8fafc;   /* slate-50 */
    --color-bg-tertiary: #f1f5f9;    /* slate-100 */

    /* Text Colors */
    --color-text-primary: #0f172a;   /* slate-950 */
    --color-text-secondary: #475569; /* slate-600 */
    --color-text-tertiary: #64748b;  /* slate-500 */
    --color-text-inverse: #ffffff;   /* white */

    /* Border Colors */
    --color-border-primary: rgba(15, 23, 42, 0.08);  /* slate-950 with opacity */
    --color-border-secondary: rgba(15, 23, 42, 0.06);
    --color-border-accent: rgba(59, 130, 246, 0.2);   /* primary with opacity */

    /* ===================================
       TYPOGRAPHY
       =================================== */

    /* Font Families */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ===================================
       SPACING
       =================================== */

    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-2xl: 4rem;     /* 64px */
    --spacing-3xl: 6rem;     /* 96px */

    /* ===================================
       EFFECTS
       =================================== */

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Border Radius */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   UTILITY CLASSES
   Apply CSS variables to reusable classes
   =================================== */

/* Backgrounds */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-inverse { color: var(--color-text-inverse); }
.text-brand { color: var(--color-primary); }

/* Buttons */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    font-weight: var(--font-semibold);
    transition: background-color var(--transition-base);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

/* ===================================
   ALTERNATIVE THEMES
   Uncomment a theme section below to switch themes
   =================================== */

/*
   WEB3/CRYPTO THEME
   Uncomment this section to enable the Web3 theme
*/
/*
:root {
    --color-primary: #00d4ff;
    --color-primary-dark: #0099cc;
    --color-primary-light: #33ddff;

    --color-bg-primary: #0a0b0d;
    --color-bg-secondary: #13151a;
    --color-bg-tertiary: #1a1d24;

    --color-text-primary: #ffffff;
    --color-text-secondary: #9ca3af;
    --color-text-tertiary: #6b7280;
    --color-text-inverse: #0a0b0d;

    --color-border-primary: rgba(0, 212, 255, 0.2);
    --color-border-secondary: rgba(0, 212, 255, 0.1);
    --color-border-accent: rgba(0, 212, 255, 0.3);

    --font-sans: 'Space Grotesk', 'Inter', sans-serif;
}
*/

/*
   MINIMAL MONOCHROME THEME
   Uncomment this section for a minimal black & white theme
*/
/*
:root {
    --color-primary: #000000;
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #333333;

    --color-bg-primary: #ffffff;
    --color-bg-secondary: #fafafa;
    --color-bg-tertiary: #f5f5f5;

    --color-text-primary: #000000;
    --color-text-secondary: #666666;
    --color-text-tertiary: #999999;
    --color-text-inverse: #ffffff;

    --color-border-primary: rgba(0, 0, 0, 0.1);
    --color-border-secondary: rgba(0, 0, 0, 0.05);
    --color-border-accent: rgba(0, 0, 0, 0.2);
}
*/

/*
   NVIDIA THEME (SAVED)
   Currently active theme - uncomment to reactivate
*/
/*
:root {
    --color-primary: #76b900;
    --color-primary-dark: #5a8f00;
    --color-primary-light: #8ed600;

    --color-bg-primary: #000000;
    --color-bg-secondary: #0d0d0d;
    --color-bg-tertiary: #1a1a1a;

    --color-text-primary: #ffffff;
    --color-text-secondary: #b3b3b3;
    --color-text-tertiary: #808080;
    --color-text-inverse: #000000;

    --color-border-primary: rgba(118, 185, 0, 0.15);
    --color-border-secondary: rgba(255, 255, 255, 0.1);
    --color-border-accent: rgba(118, 185, 0, 0.3);
}
*/

/*
   WARM/CREATIVE THEME
   Uncomment this section for a warm, creative theme
*/
/*
:root {
    --color-primary: #f59e0b;
    --color-primary-dark: #d97706;
    --color-primary-light: #fbbf24;

    --color-bg-primary: #fffbeb;
    --color-bg-secondary: #fef3c7;
    --color-bg-tertiary: #fde68a;

    --color-text-primary: #78350f;
    --color-text-secondary: #92400e;
    --color-text-tertiary: #b45309;
    --color-text-inverse: #ffffff;

    --color-border-primary: rgba(245, 158, 11, 0.2);
    --color-border-secondary: rgba(245, 158, 11, 0.1);
    --color-border-accent: rgba(245, 158, 11, 0.3);
}
*/