/* =========================================================
   Market UI v2 - Verification Code Variables
   Path: public/assets/marketv2/components/verification-code/variables.css

   Role:
   - minimal contract for OTP / verification code entry
   - supports both .m-verification-code and legacy .verification-code
   - keeps DOM compatibility with input + .boxes > span markup
========================================================= */

:root,
.m-theme-default {
    --m-verification-code-gap: var(--m-field-gap-lg);
    --m-verification-code-box-size: var(--m-field-verification-box-size);
    --m-verification-code-box-radius: var(--m-field-verification-box-radius);
    --m-verification-code-border-width: var(--m-field-border-width);

    --m-verification-code-font-size: var(--m-field-font-size-lg);
    --m-verification-code-font-weight: 700;
    --m-verification-code-line-height: 1;

    --m-verification-code-bg: var(--m-context-surface, var(--m-surface, #ffffff));
    --m-verification-code-bg-filled: var(--m-context-surface-raised, var(--m-surface-raised, var(--m-verification-code-bg)));
    --m-verification-code-bg-active: var(--m-context-surface-hover, var(--m-surface-hover, var(--m-verification-code-bg)));

    --m-verification-code-border: var(--m-context-border, var(--m-border, #dbe3ee));
    --m-verification-code-border-active: var(--m-context-border-active, var(--m-context-accent-color, var(--m-accent, #2563eb)));

    --m-verification-code-text: var(--m-context-text-strong, var(--m-text-strong, #0f172a));
    --m-verification-code-text-empty: var(--m-context-text-faint, var(--m-text-faint, #94a3b8));
    --m-verification-code-focus-ring: var(--m-context-focus-ring, rgba(37, 99, 235, 0.18));
    --m-verification-code-focus-shadow: var(--m-field-focus-shadow);

    --m-verification-code-disabled-opacity: 0.6;
    --m-verification-code-transition-fast: var(--m-field-transition-fast);
}