/* CautColeg.ro Design Tokens - Single Source of Truth */
:root {
    --brand: #FF385C;
    --brand-light: #FF5A7D;
    --brand-dark: #E31C5F;
    --black: #222222;
    --gray: #717171;
    --gray-light: #B0B0B0;
    --gray-lighter: #DDDDDD;
    --gray-lightest: #EBEBEB;
    --gray-bg: #F7F7F7;
    --white: #FFFFFF;
    --bg: var(--white);
    --bg-secondary: var(--gray-bg);
    --text-primary: var(--black);
    --text-secondary: var(--gray);
    --text-muted: var(--gray-light);
    --border: var(--gray-lighter);
    --border-dark: var(--gray-lightest);
    --divider: var(--gray-lightest);
    --success: #008A05;
    --success-light: #E6F9E6;
    --error: #C13515;
    --error-light: #FDEDED;
    --warning: #E07912;
    --warning-light: #FFF8E1;
    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font: var(--font-family); 
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 26px;
    --fs-3xl: 32px;
    --fs-4xl: 40px;
    --fs-5xl: 48px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.2);
    --shadow-pill: 0 3px 12px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-pill-hover: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.1);
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --header-height: 80px;
    --container-max: 1280px;
    --container-narrow: 1080px;
    --container-pad: 24px;
}
@media (min-width: 744px) {
    :root {
        --container-pad: 40px;
    }
}
@media (min-width: 1128px) {
    :root {
        --container-pad: 80px;
    }
}