/* ==========================================================================
   PAYPOINT KIOSK - DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */

:root {
    /* Brand & Primary Color Palette */
    --color-primary: #0070BA;
    --color-primary-dark: #005EA6;
    --color-primary-soft: #EAF5FC;
    --color-primary-rgb: 0, 112, 186;

    /* Backgrounds & Surfaces */
    --color-background: #F7F9FC;
    --color-surface: #FFFFFF;
    --color-surface-soft: #F1F4F8;
    --color-surface-hover: #F8FAFC;

    /* Typography & Neutral Shades */
    --color-text: #172033;
    --color-text-secondary: #667085;
    --color-text-muted: #98A2B3;
    --color-border: #DDE3EA;
    --color-border-focus: #0070BA;

    /* Semantic Status Colors */
    --color-success: #168A55;
    --color-success-soft: #EAF8F0;
    --color-warning: #D98A00;
    --color-warning-soft: #FEF6E7;
    --color-error: #D92D20;
    --color-error-soft: #FEECEB;

    /* Absolute Neutrals */
    --color-white: #FFFFFF;
    --color-black: #111111;

    /* Border Radii */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Elevation & Shadows */
    --shadow-sm: 0 4px 16px rgba(20, 30, 50, 0.06);
    --shadow-md: 0 12px 32px rgba(20, 30, 50, 0.08);
    --shadow-lg: 0 20px 48px rgba(20, 30, 50, 0.12);
    --shadow-card-hover: 0 16px 36px rgba(0, 112, 186, 0.12);

    /* Animation Timing */
    --transition-fast: 180ms ease;
    --transition-normal: 280ms ease;
    --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Typography Tokens */
    --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

    /* Kiosk Touch Dimensions */
    --btn-height-primary: 64px;
    --btn-height-secondary: 56px;
    --btn-radius: 18px;
    --touch-target-min: 52px;
    --header-height: 80px;
    --footer-height: 54px;
}