/**
 * WC OTP Login — design tokens (SSOT)
 *
 * @since 1.1.0
 */

:root {
    /* Brand — green primary (rgb(0, 172, 34) / #00ac22) */
    --wc-otp-primary-h: 132;
    --wc-otp-primary-s: 100%;
    --wc-otp-primary-l: 34%;
    --wc-otp-primary: hsl(var(--wc-otp-primary-h), var(--wc-otp-primary-s), var(--wc-otp-primary-l));
    --wc-otp-primary-hover: hsl(var(--wc-otp-primary-h), var(--wc-otp-primary-s), 28%);
    --wc-otp-primary-active: hsl(var(--wc-otp-primary-h), var(--wc-otp-primary-s), 24%);
    --wc-otp-primary-light: hsl(var(--wc-otp-primary-h), 45%, 95%);
    --wc-otp-primary-muted: hsl(var(--wc-otp-primary-h), 28%, 88%);
    --wc-otp-primary-glow: hsla(var(--wc-otp-primary-h), var(--wc-otp-primary-s), var(--wc-otp-primary-l), 0.22);

    /* Semantic (success follows brand green) */
    --wc-otp-success: var(--wc-otp-primary);
    --wc-otp-success-hover: var(--wc-otp-primary-hover);
    --wc-otp-success-light: var(--wc-otp-primary-light);
    --wc-otp-success-border: hsla(var(--wc-otp-primary-h), var(--wc-otp-primary-s), var(--wc-otp-primary-l), 0.22);
    --wc-otp-success-glow: var(--wc-otp-primary-glow);

    --wc-otp-error-h: 354;
    --wc-otp-error: hsl(var(--wc-otp-error-h), 70%, 54%);
    --wc-otp-error-light: hsl(var(--wc-otp-error-h), 70%, 96%);
    --wc-otp-error-border: hsla(var(--wc-otp-error-h), 70%, 54%, 0.2);
    --wc-otp-error-glow: hsla(var(--wc-otp-error-h), 70%, 54%, 0.2);

    --wc-otp-info: hsl(var(--wc-otp-primary-h), 35%, 38%);
    --wc-otp-info-light: hsl(var(--wc-otp-primary-h), 40%, 96%);
    --wc-otp-info-border: hsla(var(--wc-otp-primary-h), 35%, 38%, 0.2);

    --wc-otp-danger: #b42318;

    /* Neutrals */
    --wc-otp-text: #1f2937;
    --wc-otp-text-secondary: #6b7280;
    --wc-otp-text-muted: #94a3b8;
    --wc-otp-border: #e5e7eb;
    --wc-otp-border-focus: #d1d5db;
    --wc-otp-bg: #ffffff;
    --wc-otp-bg-elevated: #ffffff;
    --wc-otp-bg-subtle: #f3f7f5;
    --wc-otp-bg-muted: #eef2f0;
    --wc-otp-on-primary: #ffffff;
    --wc-otp-overlay: rgba(0, 0, 0, 0.48);
    --wc-otp-surface-close: rgba(243, 247, 245, 0.9);

    /* Telegram brand (third-party, not theme primary) */
    --wc-otp-telegram: #229ed9;
    --wc-otp-telegram-light: rgba(34, 158, 217, 0.08);
    --wc-otp-telegram-border: rgba(34, 158, 217, 0.28);

    /* Layout */
    --wc-otp-shell-max: 440px;
    --wc-otp-modal-max: 432px;
    --wc-otp-z-modal: 999999;
    --wc-otp-radius-xs: 6px;
    --wc-otp-radius-sm: 8px;
    --wc-otp-radius: 12px;
    --wc-otp-radius-xl: 16px;
    --wc-otp-radius-xxl: 24px;
    --wc-otp-radius-pill: 999px;
    --wc-otp-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --wc-otp-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08);
    --wc-otp-shadow-glow: 0 0 0 2px var(--wc-otp-primary-glow);

    /* Spacing */
    --wc-otp-space-2xs: 2px;
    --wc-otp-space-xs: 8px;
    --wc-otp-space-sm: 12px;
    --wc-otp-space-md: 18px;
    --wc-otp-space-lg: 20px;
    --wc-otp-space-xl: 24px;
    --wc-otp-space-2xl: 26px;
    --wc-otp-space-3xl: 28px;
    --wc-otp-space-4xl: 32px;
    --wc-otp-identity-icon-size: 34px;

    /* Controls — primary button & OTP digit defaults */
    --wc-otp-btn-padding: 16px 24px;
    --wc-otp-btn-padding-compact: 14px 20px;
    --wc-otp-status-padding: 14px var(--wc-otp-space-md);
    --wc-otp-modal-padding: 48px 32px;
    --wc-otp-digit-w: 48px;
    --wc-otp-digit-h: 48px;
    --wc-otp-digit-fs: 2rem;
    --wc-otp-digit-gap: var(--wc-otp-space-sm);

    /* Motion */
    --wc-otp-ease: cubic-bezier(0.28, 0.84, 0.36, 1);
    --wc-otp-ease-bounce: cubic-bezier(0.28, 1.12, 0.42, 1);
    --wc-otp-duration: 0.19s;
    --wc-otp-duration-slow: 0.36s;

    /* Spinner (matches theme .Spinner:after) */
    --wc-otp-spinner-size: 24px;
    --wc-otp-spinner-size-sm: 14px;
    --wc-otp-spinner-duration: 500ms;
    --wc-otp-spinner-fg-on-primary: var(--wc-otp-on-primary);
    --wc-otp-spinner-fg-on-muted: var(--wc-otp-primary);
}