/* CSS Variables for Personal Website */
/* Easy to modify colors and design tokens */

:root {
    /* Primary Blue Colors */
    --color-primary-blue: #2E82A7;
    --color-primary-blue-light: #4A9BC4;
    --color-primary-blue-dark: #1E6B8A;
    --color-primary-blue-lighter: #5FB3D9;
    --color-primary-blue-pale: #A8D5E2;

    /* Accent Colors (for modern emphasis) */
    --color-coral: #f75559;
    --color-purple: #835dbe;
    --color-orange: #ffaa3c;
    --color-accent-orange: #F4A261;
    --color-accent-coral: #E76F51;
    --color-black: #000000;

    /* Text Colors */
    --color-text-primary: #2C3E50;
    --color-text-secondary: #34495E;
    --color-text-muted: #7F8C8D;
    --color-text-light: #FFFFFF;

    /* Background Colors */
    --color-bg-primary: #FFFFFF;
    --color-bg-card: #FFFFFF;
    --color-bg-hover: #F8F9FA;
    --color-bg-white: #FFFFFF;

    /* Border Colors */
    --color-border-primary: var(--color-primary-blue);
    --color-border-primary-light: var(--color-primary-blue-light);
    --color-border-primary-dark: var(--color-primary-blue-dark);
    --color-border-pale: var(--color-primary-blue-pale);
    --color-border-white: #FFFFFF;
    --color-border-accent: var(--color-orange);

    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    --border-width-extra-thick: 4px;

    /* Shadow Colors */
    --shadow-color-blue: rgba(46, 130, 167, 0.15);
    --shadow-color-blue-medium: rgba(46, 130, 167, 0.25);
    --shadow-color-blue-light: rgba(46, 130, 167, 0.1);
    --shadow-color-blue-dark: rgba(46, 130, 167, 0.35);
    --shadow-color-accent: rgba(244, 162, 97, 0.15);
    --shadow-color-default: rgba(0, 0, 0, 0.1);

    /* Skill Button Colors */
    --color-skill-programming: var(--color-purple);
    --color-skill-database: var(--color-coral);
    --color-skill-ai: var(--color-orange);

    /* Border Colors for Skills - Keep blue borders */
    --color-skill-programming-border: var(--color-primary-blue);
    --color-skill-database-border: var(--color-primary-blue);
    --color-skill-ai-border: var(--color-primary-blue);
    
    /* Background Tints for Subtle Accents */
    --color-bg-coral-tint: rgba(247, 85, 89, 0.05);
    --color-bg-purple-tint: rgba(131, 93, 190, 0.05);
    --color-bg-orange-tint: rgba(255, 170, 60, 0.05);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-xxl: 24px;
    --radius-round: 50px;
    --radius-circle: 50%;

    /* Font Sizes - Base */
    --font-size-base: 0.95rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-md: 0.9rem;
    --font-size-normal: 0.95rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.1rem;
    --font-size-2xl: 1.2rem;
    --font-size-3xl: 1.25rem;
    --font-size-4xl: 1.35rem;
    --font-size-5xl: 1.5rem;
    --font-size-6xl: 2.2rem;
    --font-size-7xl: 2.7rem;
    --font-size-8xl: 3rem;

    /* Font Sizes - Specific Use Cases */
    --font-size-logo: 1.35rem;
    --font-size-hero-name: 2.7rem;
    --font-size-section-heading: 2.2rem;
    --font-size-page-heading: 1.35rem;
    --font-size-card-title: 1.25rem;
    --font-size-subheading: 1.2rem;
    --font-size-body: 0.95rem;
    --font-size-body-lg: 1rem;
    --font-size-meta: 0.95rem;
    --font-size-meta-sm: 0.85rem;
    --font-size-button: 0.95rem;
    --font-size-button-sm: 0.85rem;
    --font-size-read-more: 0.95rem;
    --font-size-description: 1rem;
    --font-size-description-sm: 0.9rem;
    --font-size-label: 0.9rem;
    --font-size-timeline-date: 1rem;
    --font-size-timeline-title: 1.2rem;
}