/* ===================================
   CSS VARIABLES
   AppSec Landing - Codeby School
   Design System based on design-guidelines.md
   =================================== */

:root {
    /* ===========================
       PRIMARY COLORS
       =========================== */
    --primary-green: #00ff88;
    --secondary-green: #00cc6a;

    /* ===========================
       BACKGROUND COLORS
       =========================== */
    --dark-bg: #0a0a0a;
    --darker-bg: #050505;
    --card-bg: #111111;

    /* ===========================
       TEXT COLORS
       =========================== */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #707070;

    /* ===========================
       UTILITY COLORS
       =========================== */
    --border-color: #222222;
    --danger: #ff3366;
    --warning: #ffaa00;
    --success-bg: rgba(0, 255, 136, 0.1);

    /* ===========================
       OPACITY VARIATIONS
       =========================== */
    --primary-green-10: rgba(0, 255, 136, 0.1);
    --primary-green-20: rgba(0, 255, 136, 0.2);
    --primary-green-30: rgba(0, 255, 136, 0.3);
    --primary-green-50: rgba(0, 255, 136, 0.5);

    /* ===========================
       SHADOWS
       =========================== */
    --shadow-primary: 0 5px 20px rgba(0, 255, 136, 0.1);
    --shadow-hover: 0 10px 30px rgba(0, 255, 136, 0.2);
    --shadow-glow: 0 0 20px rgba(0, 255, 136, 0.5);

    /* ===========================
       TYPOGRAPHY
       =========================== */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Courier New', Consolas, monospace;

    --font-size-base: 16px;
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */

    --line-height-base: 1.6;
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;

    /* ===========================
       SPACING
       =========================== */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 2rem;      /* 32px */
    --spacing-lg: 4rem;      /* 64px */
    --spacing-xl: 6rem;      /* 96px */
    --spacing-2xl: 8rem;     /* 128px */

    /* ===========================
       BORDERS
       =========================== */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 50%;

    /* ===========================
       TRANSITIONS
       =========================== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ===========================
       Z-INDEX SCALE
       =========================== */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal: 1500;
    --z-progress: 10000;

    /* ===========================
       CONTAINER
       =========================== */
    --container-max-width: 1200px;
    --container-padding: 5.85rem;
}

/* Mobile responsive spacing */
@media (max-width: 767px) {
    :root {
        --spacing-lg: 3rem;   /* 48px instead of 64px */
        --spacing-xl: 4rem;   /* 64px instead of 96px */
        --container-padding: var(--spacing-sm);
    }
}