/**
 * ATKV Mobile App Design System
 * Based on design specifications from /design/ folder
 * Mobile-first, accessible, and performant
 * Version: 1.0
 * Last Updated: 2025-11-06
 */

/* ============================================
   COLOR SYSTEM
   ============================================ */

:root {
    /* Primary Colors - Updated from Figma designs */
    --atkv-primary-blue: #2a63af;           /* Navigation, headers, secondary buttons */
    --atkv-primary-black: #000000;          /* Primary buttons, CTAs, text */
    --atkv-primary-yellow: #fdb913;         /* Accent color */
    --atkv-secondary-blue: #4472C4;         /* Visitor actions, secondary CTAs */

    /* Gradient Colors */
    --atkv-hero-gradient-top: #87CEEB;      /* Sky Blue */
    --atkv-hero-gradient-mid: #48B8D0;      /* Turquoise */
    --atkv-hero-gradient-bot: #F4E4C1;      /* Sand/Beige */

    --atkv-auth-gradient-left: #5A8FC7;     /* Blue gradient start */
    --atkv-auth-gradient-right: #E8EDF5;    /* Blue gradient end */

    /* Wallet Colors */
    --atkv-wallet-bg-start: #B3D7F0;        /* Light blue gradient start */
    --atkv-wallet-bg-end: #A8CDE8;          /* Light blue gradient end */
    --atkv-wallet-icon-bg: #FFA726;         /* Orange icon background */

    /* UI Background Colors */
    --atkv-bg-white: #FFFFFF;
    --atkv-bg-light: #F5F5F5;
    --atkv-bg-card: #FFFFFF;

    /* Text Colors */
    --atkv-text-primary: #000000;
    --atkv-text-secondary: #666666;
    --atkv-text-tertiary: #757575;
    --atkv-text-placeholder: #BDBDBD;
    --atkv-text-disabled: #E0E0E0;
    --atkv-text-white: #FFFFFF;

    /* Border Colors */
    --atkv-border-primary: #000000;
    --atkv-border-input: #1A1A1A;
    --atkv-border-divider: #E0E0E0;
    --atkv-border-light: #F0F0F0;

    /* State Colors */
    --atkv-success: #4CAF50;
    --atkv-warning: #FF9800;
    --atkv-error: #F44336;
    --atkv-info: #2196F3;

    /* Interactive States */
    --atkv-hover-darken: rgba(0, 0, 0, 0.1);
    --atkv-active-darken: rgba(0, 0, 0, 0.2);
    --atkv-focus-ring: rgba(74, 122, 184, 0.4);

    /* ============================================
       TYPOGRAPHY
       ============================================ */

    /* Font Families - Updated from Figma designs */
    --atkv-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                        'Helvetica Neue', Arial, sans-serif,
                        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

    /* Font Sizes */
    --atkv-font-size-h1: 40px;              /* Page titles */
    --atkv-font-size-h1-mobile: 32px;
    --atkv-font-size-h2: 28px;              /* Section headings */
    --atkv-font-size-h2-mobile: 24px;
    --atkv-font-size-h3: 20px;              /* Card titles */
    --atkv-font-size-h3-mobile: 18px;
    --atkv-font-size-h4: 18px;              /* Subsections */
    --atkv-font-size-h4-mobile: 16px;

    --atkv-font-size-body-lg: 18px;         /* Large body text */
    --atkv-font-size-body: 16px;            /* Regular body text */
    --atkv-font-size-body-sm: 14px;         /* Small body text */
    --atkv-font-size-caption: 12px;         /* Captions, metadata */

    --atkv-font-size-button: 18px;          /* Button text */
    --atkv-font-size-button-mobile: 16px;
    --atkv-font-size-input: 16px;           /* Input text */
    --atkv-font-size-label: 14px;           /* Form labels */
    --atkv-font-size-nav: 13px;             /* Navigation labels */
    --atkv-font-size-nav-mobile: 12px;

    /* Font Weights */
    --atkv-font-weight-regular: 400;
    --atkv-font-weight-medium: 500;
    --atkv-font-weight-semibold: 600;
    --atkv-font-weight-bold: 700;

    /* Line Heights */
    --atkv-line-height-heading: 1.25;
    --atkv-line-height-body: 1.5;
    --atkv-line-height-button: 1.4;
    --atkv-line-height-tight: 1.2;

    /* ============================================
       SPACING SCALE
       ============================================ */

    --atkv-space-xs: 4px;
    --atkv-space-sm: 8px;
    --atkv-space-md: 16px;
    --atkv-space-lg: 24px;
    --atkv-space-xl: 32px;
    --atkv-space-2xl: 48px;
    --atkv-space-3xl: 64px;

    /* ============================================
       BORDER RADIUS - Updated from Figma designs
       ============================================ */

    --atkv-radius-sm: 8px;
    --atkv-radius-md: 16px;
    --atkv-radius-lg: 20px;                  /* Primary radius for buttons, inputs, cards */
    --atkv-radius-xl: 20px;
    --atkv-radius-2xl: 24px;
    --atkv-radius-full: 9999px;              /* Fully rounded / pill shape */

    /* ============================================
       SHADOWS (ELEVATION)
       ============================================ */

    --atkv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --atkv-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --atkv-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
    --atkv-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.1);
    --atkv-shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.15);

    --atkv-shadow-nav-top: 0 2px 4px rgba(0, 0, 0, 0.1);
    --atkv-shadow-nav-bottom: 0 -2px 4px rgba(0, 0, 0, 0.1);

    /* ============================================
       Z-INDEX SCALE
       ============================================ */

    --atkv-z-base: 0;
    --atkv-z-dropdown: 100;
    --atkv-z-sticky: 200;
    --atkv-z-nav: 300;
    --atkv-z-modal-backdrop: 400;
    --atkv-z-modal: 500;
    --atkv-z-toast: 600;
    --atkv-z-tooltip: 700;

    /* ============================================
       LAYOUT
       ============================================ */

    --atkv-nav-top-height: 64px;
    --atkv-nav-top-height-mobile: 56px;
    --atkv-nav-bottom-height: 72px;
    --atkv-nav-bottom-height-mobile: 64px;

    --atkv-container-max-width: 1280px;
    --atkv-container-padding: 16px;
    --atkv-container-padding-desktop: 24px;

    /* ============================================
       TRANSITIONS
       ============================================ */

    --atkv-transition-fast: 100ms;
    --atkv-transition-base: 200ms;
    --atkv-transition-medium: 300ms;
    --atkv-transition-slow: 400ms;

    --atkv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --atkv-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --atkv-ease-in: cubic-bezier(0.4, 0, 1, 1);

    /* ============================================
       TOUCH TARGETS
       ============================================ */

    --atkv-touch-target-min: 44px;           /* WCAG minimum */
    --atkv-touch-target-comfortable: 48px;

    /* ============================================
       BREAKPOINTS (for reference in media queries)
       ============================================ */

    --atkv-breakpoint-mobile: 0;
    --atkv-breakpoint-tablet: 768px;
    --atkv-breakpoint-desktop: 1024px;
    --atkv-breakpoint-wide: 1280px;
}

/* ============================================
   UTILITY CLASSES - GRADIENTS
   ============================================ */

.atkv-gradient-hero {
    background: linear-gradient(
        to bottom,
        var(--atkv-hero-gradient-top) 0%,
        var(--atkv-hero-gradient-mid) 50%,
        var(--atkv-hero-gradient-bot) 100%
    );
}

.atkv-gradient-auth {
    background: linear-gradient(
        to right,
        var(--atkv-auth-gradient-left) 0%,
        var(--atkv-auth-gradient-right) 100%
    );
}

.atkv-gradient-wallet {
    background: linear-gradient(
        135deg,
        var(--atkv-wallet-bg-start) 0%,
        var(--atkv-wallet-bg-end) 100%
    );
}

/* ============================================
   UTILITY CLASSES - SPACING
   ============================================ */

.atkv-mt-xs { margin-top: var(--atkv-space-xs); }
.atkv-mt-sm { margin-top: var(--atkv-space-sm); }
.atkv-mt-md { margin-top: var(--atkv-space-md); }
.atkv-mt-lg { margin-top: var(--atkv-space-lg); }
.atkv-mt-xl { margin-top: var(--atkv-space-xl); }
.atkv-mt-2xl { margin-top: var(--atkv-space-2xl); }

.atkv-mb-xs { margin-bottom: var(--atkv-space-xs); }
.atkv-mb-sm { margin-bottom: var(--atkv-space-sm); }
.atkv-mb-md { margin-bottom: var(--atkv-space-md); }
.atkv-mb-lg { margin-bottom: var(--atkv-space-lg); }
.atkv-mb-xl { margin-bottom: var(--atkv-space-xl); }
.atkv-mb-2xl { margin-bottom: var(--atkv-space-2xl); }

.atkv-p-sm { padding: var(--atkv-space-sm); }
.atkv-p-md { padding: var(--atkv-space-md); }
.atkv-p-lg { padding: var(--atkv-space-lg); }
.atkv-p-xl { padding: var(--atkv-space-xl); }

/* ============================================
   UTILITY CLASSES - TEXT
   ============================================ */

.atkv-text-primary { color: var(--atkv-text-primary); }
.atkv-text-secondary { color: var(--atkv-text-secondary); }
.atkv-text-white { color: var(--atkv-text-white); }

.atkv-text-center { text-align: center; }
.atkv-text-left { text-align: left; }
.atkv-text-right { text-align: right; }

.atkv-font-regular { font-weight: var(--atkv-font-weight-regular); }
.atkv-font-medium { font-weight: var(--atkv-font-weight-medium); }
.atkv-font-semibold { font-weight: var(--atkv-font-weight-semibold); }
.atkv-font-bold { font-weight: var(--atkv-font-weight-bold); }

/* ============================================
   UTILITY CLASSES - LAYOUT
   ============================================ */

.atkv-container {
    max-width: var(--atkv-container-max-width);
    margin: 0 auto;
    padding: 0 var(--atkv-container-padding);
}

@media (min-width: 1024px) {
    .atkv-container {
        padding: 0 var(--atkv-container-padding-desktop);
    }
}

.atkv-card {
    background: var(--atkv-bg-card);
    border-radius: var(--atkv-radius-lg);
    box-shadow: var(--atkv-shadow-md);
    padding: var(--atkv-space-lg);
}

.atkv-card-rounded {
    border-radius: var(--atkv-radius-2xl);
}

/* ============================================
   UTILITY CLASSES - ACCESSIBILITY
   ============================================ */

.atkv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible styles for keyboard navigation */
.atkv-focus-visible:focus-visible,
*:focus-visible {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .atkv-no-print {
        display: none !important;
    }
}

/* ============================================
   BUTTON COMPONENTS - From Figma Designs
   ============================================ */

.atkv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atkv-space-sm);
    padding: var(--atkv-space-md) var(--atkv-space-2xl);
    font-family: var(--atkv-font-family);
    font-size: var(--atkv-font-size-button-mobile);
    font-weight: var(--atkv-font-weight-medium);
    line-height: var(--atkv-line-height-button);
    text-align: center;
    border-radius: var(--atkv-radius-lg);
    border: none;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
    white-space: nowrap;
    min-height: var(--atkv-touch-target-min);
}

@media (min-width: 768px) {
    .atkv-btn {
        font-size: var(--atkv-font-size-button);
    }
}

.atkv-btn:focus-visible {
    outline: 2px solid var(--atkv-primary-blue);
    outline-offset: 2px;
}

.atkv-btn:active {
    transform: translateY(1px);
}

.atkv-btn-primary {
    background-color: var(--atkv-primary-black);
    color: var(--atkv-text-white);
}

.atkv-btn-primary:hover:not(:disabled) {
    background-color: #1a1a1a;
    opacity: 0.9;
}

.atkv-btn-primary:active:not(:disabled) {
    background-color: var(--atkv-primary-black);
    opacity: 0.8;
}

.atkv-btn-secondary {
    background-color: var(--atkv-primary-blue);
    color: var(--atkv-text-white);
}

.atkv-btn-secondary:hover:not(:disabled) {
    background-color: #234f8e;
}

.atkv-btn-secondary:active:not(:disabled) {
    background-color: #1d3f6f;
}

.atkv-btn-tertiary {
    background-color: #f3f0eb;
    color: var(--atkv-primary-black);
    border: 1px solid #b7beb5;
}

.atkv-btn-tertiary:hover:not(:disabled) {
    background-color: #e8e4dd;
}

.atkv-btn-tertiary:active:not(:disabled) {
    background-color: #ddd8d0;
}

.atkv-btn:disabled,
.atkv-btn-disabled {
    background-color: #e0e0e0;
    color: #9e9e9e;
    border: 1px solid #cccccc;
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.atkv-btn-block {
    width: 100%;
    display: flex;
}

.atkv-btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.atkv-btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-top-color: transparent;
    animation: atkv-button-spinner 0.6s linear infinite;
}

@keyframes atkv-button-spinner {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.atkv-btn-sm {
    padding: var(--atkv-space-sm) var(--atkv-space-lg);
    font-size: var(--atkv-font-size-body-sm);
}

.atkv-btn-lg {
    padding: var(--atkv-space-lg) var(--atkv-space-3xl);
    font-size: var(--atkv-font-size-body-lg);
}

/* ============================================
   INPUT COMPONENTS - From Figma Designs
   ============================================ */

.atkv-input-field {
    display: flex;
    flex-direction: column;
    gap: var(--atkv-space-sm);
    width: 100%;
}

.atkv-input-label {
    font-family: var(--atkv-font-family);
    font-size: var(--atkv-font-size-body);
    font-weight: var(--atkv-font-weight-semibold);
    color: var(--atkv-text-primary);
    line-height: var(--atkv-line-height-tight);
}

.atkv-input-description {
    font-size: var(--atkv-font-size-body-sm);
    color: var(--atkv-text-secondary);
}

.atkv-input-error {
    font-size: var(--atkv-font-size-body-sm);
    color: var(--atkv-error);
}

.atkv-input {
    width: 100%;
    height: 55px;
    padding: var(--atkv-space-md) var(--atkv-space-lg);
    font-family: var(--atkv-font-family);
    font-size: var(--atkv-font-size-input);
    font-weight: var(--atkv-font-weight-medium);
    line-height: var(--atkv-line-height-tight);
    background-color: var(--atkv-bg-white);
    border: 1px solid var(--atkv-border-input);
    border-radius: var(--atkv-radius-lg);
    color: var(--atkv-text-primary);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
    outline: none;
}

.atkv-input::placeholder {
    color: var(--atkv-text-placeholder);
    opacity: 1;
}

.atkv-input:focus {
    border-color: var(--atkv-primary-blue);
    box-shadow: 0 0 0 3px rgba(42, 99, 175, 0.1);
}

.atkv-input-error-state,
.atkv-input-field--error .atkv-input {
    border-color: var(--atkv-error);
}

.atkv-input-error-state:focus {
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
}

.atkv-input:disabled,
.atkv-input-disabled {
    background-color: #f5f5f5;
    color: #9e9e9e;
    cursor: not-allowed;
    opacity: 0.5;
}

/* ============================================
   CARD COMPONENTS - From Figma Designs
   ============================================ */

.atkv-card-simple {
    background-color: var(--atkv-bg-card);
    border: 2px solid var(--atkv-border-divider);
    border-radius: var(--atkv-radius-lg);
    padding: var(--atkv-space-lg);
    transition: all var(--atkv-transition-base) var(--atkv-ease-in-out);
}

.atkv-card-simple:hover {
    box-shadow: var(--atkv-shadow-md);
    transform: translateY(-2px);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .atkv-btn {
        padding: var(--atkv-space-md) var(--atkv-space-xl);
    }
}

/* ============================================
   ACCESSIBILITY - Button and Input
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .atkv-btn,
    .atkv-input,
    .atkv-card-simple {
        transition: none;
    }

    .atkv-btn:active {
        transform: none;
    }

    .atkv-card-simple:hover {
        transform: none;
    }

    .atkv-btn-loading::after {
        animation: none;
    }
}