/* CSS Tokens System */
:root {
    /* Colors (Extracted from Referente diseño UX.webp) */
    --color-bg-primary: #FFF9E6; /* Warm beige background */
    --color-bg-secondary: #FFFFFF; /* White for cards */
    --color-text-primary: #111111; /* Very dark navy/black */
    --color-text-secondary: #555555; /* Dark grey for secondary text */
    --color-accent: #7B61FF; /* Vibrant purple accent */
    --color-accent-light: rgba(123, 97, 255, 0.1); /* Light purple for hovers/backgrounds */
    --color-shape-yellow: #E8D046; /* Yellow blob background behind person */
    --color-danger: #FF4C4C; /* Red for alerts or specific sections like gamification */
    --color-info: #3AB0FF; /* Light blue for specific sections like strategy */
    
    /* Typography */
    --font-family-base: 'Inter', sans-serif;
    
    --font-size-xs: 0.875rem; /* 14px */
    --font-size-sm: 1rem; /* 16px */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.5rem; /* 24px */
    --font-size-xl: 2.5rem; /* 40px */
    --font-size-xxl: 4rem; /* 64px */
    
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing (8pt system) */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem; /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2rem; /* 32px */
    --spacing-xl: 3rem; /* 48px */
    --spacing-xxl: 5rem; /* 80px */
    
    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-pill: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 24px rgba(0,0,0,0.12);
    
    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
}

/* Dark mode overrides (if needed later for INTJ-A logic) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Placeholder for potential dark mode tokens */
    }
}
