/**
 * Design tokens.
 *
 * @package VPK
 */

:root {

    /* COLORS */
    --vpk-color-primary: #0F3D6E;
    --vpk-color-primary-hover: #0B2F56;
    --vpk-color-accent: #F58220;
    --vpk-color-text: #1F2937;
    --vpk-color-text-light: #6B7280;
    --vpk-color-white: #ffffff;
    --vpk-color-background: var(--vpk-color-white);
    --vpk-color-surface: #F8FAFC;
    --vpk-color-border: #E5E7EB;

    /* CONTAINER */
    --vpk-container-width: 1320px;
    --vpk-container-padding-desktop: 24px;
    --vpk-container-padding-mobile: 16px;

    /* SPACING */
    --vpk-space-xs: 4px;
    --vpk-space-sm: 8px;
    --vpk-space-md: 16px;
    --vpk-space-lg: 24px;
    --vpk-space-xl: 32px;
    --vpk-space-2xl: 48px;
    --vpk-space-3xl: 64px;
    --vpk-space-4xl: 80px;
    --vpk-space-5xl: 96px;

    /* TYPOGRAPHY */
    --vpk-font-size-xs: 12px;
    --vpk-font-size-sm: 14px;
    --vpk-font-size-md: 16px;
    --vpk-font-size-lg: 18px;
    --vpk-font-size-xl: 20px;
    --vpk-font-size-2xl: 24px;
    --vpk-font-size-3xl: 32px;
    --vpk-font-size-4xl: 48px;
    --vpk-font-size-5xl: 60px;

    /* BORDER RADIUS */
    --vpk-radius-none: 0;
    --vpk-radius-sm: 4px;
    --vpk-radius-md: 8px;
    --vpk-radius-lg: 12px;
    --vpk-radius-pill: 999px;

    /* SHADOWS */
    --vpk-shadow-sm: 0 1px 2px rgba(15, 61, 110, 0.08);
    --vpk-shadow-md: 0 4px 12px rgba(15, 61, 110, 0.12);
    --vpk-shadow-lg: 0 8px 24px rgba(15, 61, 110, 0.16);

    /* TRANSITIONS */
    --vpk-transition-fast: 150ms;
    --vpk-transition-normal: 250ms;

    /* Z-INDEX */
    --vpk-z-base: 1;
    --vpk-z-header: 100;
    --vpk-z-dropdown: 200;
    --vpk-z-modal: 1000;
}