/*
 * eSIMsData Mini App design tokens.
 * These tokens are the foundation for the UI kit and should not change
 * visual output by themselves. Existing legacy variables are mapped in
 * public/styles.css for backwards compatibility.
 */

:root {
    /* Brand */
    --esd-color-brand-primary: #582C4F;
    --esd-color-brand-primary-soft: rgba(88, 44, 79, 0.08);
    --esd-color-brand-primary-light: #F5EEF3;
    --esd-color-brand-primary-mid: #8b4a7a;
    --esd-color-action: #007AFF;
    --esd-gradient-calculator-hero: linear-gradient(135deg, #5b2060 0%, #c084c0 100%);
    --esd-gradient-calculator-cta: linear-gradient(135deg, #582c4f 0%, #9b4d9b 100%);

    /* Text */
    --esd-color-text-primary: #000000;
    --esd-color-text-secondary: #636366;
    --esd-color-text-inverse: #FFFFFF;

    /* Surfaces */
    --esd-color-bg-page: #F2F2F7;
    --esd-color-bg-surface: #FFFFFF;
    --esd-color-bg-muted: #F2F2F7;
    --esd-color-border: #E5E5EA;
    --esd-color-control-muted: #7474801F;
    --esd-color-selected-bg: var(--esd-color-brand-primary-light);
    --esd-color-selected-border: var(--esd-color-brand-primary);
    --esd-color-highlight-bg: var(--esd-color-brand-primary-light);
    --esd-color-highlight-border: #E0C8DA;
    --esd-color-calculator-highlight-bg: var(--esd-color-highlight-bg);
    --esd-color-calculator-highlight-border: var(--esd-color-highlight-border);

    /* Semantic states */
    --esd-color-success: #34C759;
    --esd-color-error: #FF3B30;
    --esd-color-warning: #FF9500;
    --esd-color-info: #007AFF;
    --esd-status-success-bg: #EAF8EE;
    --esd-status-success-border: #CDEED6;
    --esd-status-success-text: #207A35;
    --esd-status-warning-bg: #FFF6DF;
    --esd-status-warning-border: #F1D9A6;
    --esd-status-warning-text: #8A6200;
    --esd-status-info-bg: #EAF3FF;
    --esd-status-info-border: #CFE1F7;
    --esd-status-info-text: #2766A8;
    --esd-status-error-bg: #FDECEC;
    --esd-status-error-border: #F1CCCC;
    --esd-status-error-text: #B33A3A;
    --esd-status-neutral-bg: #F2F2F7;
    --esd-status-neutral-border: #E2E2E7;
    --esd-status-neutral-text: #636366;
    --esd-color-disabled-bg: #E5E5EA;
    --esd-color-disabled-text: #8E8E93;

    /* Payment accents */
    --esd-color-stars-bg: #F3F0FF;
    --esd-color-stars-fg: #7C3AED;
    --esd-color-stripe-bg: #EEF2FF;
    --esd-color-stripe-fg: #635BFF;
    --esd-color-cryptomus-bg: #ECFDF5;
    --esd-color-cryptomus-fg: #10B981;

    /* Spacing */
    --esd-space-2xs: 2px;
    --esd-space-xs: 4px;
    --esd-space-sm: 8px;
    --esd-space-md: 12px;
    --esd-space-lg: 16px;
    --esd-space-xl: 20px;
    --esd-space-2xl: 24px;
    --esd-space-3xl: 32px;
    --esd-space-4xl: 40px;

    /* Radius */
    --esd-radius-xs: 4px;
    --esd-radius-sm: 6px;
    --esd-radius-md: 8px;
    --esd-radius-lg: 10px;
    --esd-radius-xl: 12px;
    --esd-radius-sheet: 16px;
    --esd-radius-pill: 9999px;

    /* Shadows */
    --esd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --esd-shadow-bottom-nav: 0 -2px 10px rgba(0, 0, 0, 0.05);
    --esd-shadow-sheet: 0 -10px 30px rgba(0, 0, 0, 0.15);

    /* Layout */
    --esd-bottom-nav-stack: calc(80px + env(safe-area-inset-bottom));
}