/**
 * ATKV Mobile App Design System
 * Design Tokens - CSS Variables
 *
 * This file contains all design tokens extracted from Figma.
 * Use these variables throughout the application for consistency.
 */

:root {
  /* ==========================================
     COLORS
     ========================================== */

  /* Primary Colors */
  --color-primary: #000000;
  --color-primary-hover: #1a1a1a;
  --color-primary-active: #333333;

  /* Secondary Colors */
  --color-secondary: #2a63af;
  --color-secondary-hover: #234f8f;
  --color-secondary-active: #1c3f70;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d7d6d7;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Tertiary Colors */
  --color-tertiary: #f3f0eb;
  --color-tertiary-stroke: #b7beb5;
  --color-tertiary-hover: #e8e4dc;

  /* Background Colors */
  --color-background-primary: #ffffff;
  --color-background-secondary: #f9fafb;
  --color-background-gradient-start: #2a63af;
  --color-background-gradient-end: #ffffff;

  /* Text Colors */
  --color-text-primary: #000000;
  --color-text-secondary: #4b5563;
  --color-text-placeholder: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #d1d5db;

  /* Border Colors */
  --color-border-default: #d7d6d7;
  --color-border-focus: #000000;
  --color-border-error: #ef4444;
  --color-border-success: #10b981;

  /* Status Colors */
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;


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

  /* Font Families */
  --font-family-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md: 1.125rem;     /* 18px */
  --font-size-lg: 1.25rem;      /* 20px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-2xl: 1.75rem;     /* 28px */
  --font-size-3xl: 2rem;        /* 32px */
  --font-size-4xl: 2.5rem;      /* 40px */

  /* Specific Typography Tokens */
  --font-size-heading-h1: 2rem;         /* 32px */
  --font-size-heading-h2: 1.75rem;      /* 28px */
  --font-size-heading-h3: 1.5rem;       /* 24px */
  --font-size-heading-h4: 1.75rem;      /* 28px */
  --font-size-paragraph: 1.25rem;       /* 20px */
  --font-size-button: 1rem;             /* 16px */
  --font-size-input: 1rem;              /* 16px */
  --font-size-input-label: 1.25rem;     /* 20px */

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

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;


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

  --spacing-0: 0;
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 0.75rem;    /* 12px */
  --spacing-base: 1rem;     /* 16px */
  --spacing-lg: 1.25rem;    /* 20px */
  --spacing-xl: 1.5rem;     /* 24px */
  --spacing-2xl: 1.75rem;   /* 28px */
  --spacing-3xl: 2rem;      /* 32px */
  --spacing-4xl: 2.5rem;    /* 40px */
  --spacing-5xl: 3rem;      /* 48px */
  --spacing-6xl: 3.375rem;  /* 54px */
  --spacing-7xl: 4rem;      /* 64px */

  /* Component Specific Spacing */
  --spacing-button-padding-x: 4.75rem;  /* 76px */
  --spacing-button-padding-y: 1rem;     /* 16px */
  --spacing-input-padding-x: 0.75rem;   /* 12px */
  --spacing-input-padding-y: 1rem;      /* 16px */
  --spacing-container-padding: 1.5rem;  /* 24px */
  --spacing-section-gap: 3.375rem;      /* 54px */


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

  /* Container Widths */
  --container-mobile: 393px;
  --container-tablet: 768px;
  --container-desktop: 1440px;
  --container-max-width: 1200px;

  /* Component Dimensions */
  --input-height: 55px;
  --input-height-with-label: 91px;
  --button-height: 52px;
  --logo-size: 99px;
  --icon-size: 24px;
  --form-container-width: 345px;
  --form-container-max-width: 393px;

  /* Grid */
  --grid-gap: 1rem;
  --grid-gap-sm: 0.5rem;
  --grid-gap-lg: 1.5rem;


  /* ==========================================
     BORDERS
     ========================================== */

  /* Border Widths */
  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-sm: 0.5rem;     /* 8px */
  --border-radius-md: 1rem;       /* 16px */
  --border-radius-lg: 1.25rem;    /* 20px */
  --border-radius-xl: 1.5rem;     /* 24px */
  --border-radius-2xl: 2rem;      /* 32px */
  --border-radius-3xl: 3.75rem;   /* 60px */
  --border-radius-full: 9999px;

  /* Component Specific Border Radius */
  --border-radius-button: var(--border-radius-md);
  --border-radius-input: var(--border-radius-lg);
  --border-radius-card: var(--border-radius-xl);
  --border-radius-container: var(--border-radius-3xl);


  /* ==========================================
     SHADOWS
     ========================================== */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* Component Specific Shadows */
  --shadow-button: var(--shadow-sm);
  --shadow-button-hover: var(--shadow-md);
  --shadow-card: var(--shadow-md);
  --shadow-input-focus: 0 0 0 3px rgba(42, 99, 175, 0.1);


  /* ==========================================
     TRANSITIONS & ANIMATIONS
     ========================================== */

  /* Durations */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-medium: 300ms;
  --duration-slow: 500ms;

  /* Timing Functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear: linear;

  /* Transition Presets */
  --transition-base: all var(--duration-base) var(--ease-in-out);
  --transition-fast: all var(--duration-fast) var(--ease-in-out);
  --transition-colors: color var(--duration-base) var(--ease-in-out),
                       background-color var(--duration-base) var(--ease-in-out),
                       border-color var(--duration-base) var(--ease-in-out);
  --transition-transform: transform var(--duration-base) var(--ease-in-out);
  --transition-opacity: opacity var(--duration-base) var(--ease-in-out);


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

  --z-index-base: 0;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;


  /* ==========================================
     BREAKPOINTS
     ========================================== */

  --breakpoint-xs: 320px;
  --breakpoint-sm: 393px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1440px;
  --breakpoint-2xl: 1920px;
}

/* ==========================================
   MOBILE-FIRST TOKEN OVERRIDES (≤ 767px)
   ==========================================
   The base tokens above were sized for desktop. On phones we drop the
   typographic and spacing scale so dense screens (profile, wallet,
   bookings, news) read at native mobile sizes rather than scaled-down
   desktop. Desktop / tablet keep the original tokens.
*/
@media (max-width: 767px) {
  :root {
    /* Typography - tighter scale for phones */
    --font-size-xs: 0.6875rem;     /* 11px */
    --font-size-sm: 0.75rem;       /* 12px */
    --font-size-base: 0.875rem;    /* 14px */
    --font-size-md: 1rem;          /* 16px */
    --font-size-lg: 1.0625rem;     /* 17px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.375rem;     /* 22px */
    --font-size-3xl: 1.5rem;       /* 24px */
    --font-size-4xl: 1.75rem;      /* 28px */

    --font-size-heading-h1: 1.5rem;       /* 24px */
    --font-size-heading-h2: 1.25rem;      /* 20px */
    --font-size-heading-h3: 1.0625rem;    /* 17px */
    --font-size-heading-h4: 1rem;         /* 16px - was 28px, larger than H3 */
    --font-size-paragraph: 0.875rem;      /* 14px - was 20px */
    --font-size-button: 0.9375rem;        /* 15px */
    --font-size-input: 1rem;              /* 16px - keep for iOS no-zoom */
    --font-size-input-label: 0.8125rem;   /* 13px - was 20px */

    /* Spacing - tighter on phones */
    --spacing-button-padding-x: 1.25rem;  /* 20px - was 76px */
    --spacing-container-padding: 1rem;    /* 16px - was 24px */
    --spacing-section-gap: 1.25rem;       /* 20px - was 54px */
    --grid-gap: 0.75rem;                  /* 12px - was 16px */
    --grid-gap-lg: 1rem;                  /* 16px - was 24px */

    /* Component sizes */
    --input-height: 48px;                 /* was 55px */
    --button-height: 48px;                /* was 52px */
    --logo-size: 64px;                    /* was 99px */

    /* Border radius - slightly smaller cards feel tighter on phones */
    --border-radius-card: var(--border-radius-md);  /* 16px instead of 24px */
  }
}

/* ==========================================
   DARK MODE SUPPORT (Optional)
   ========================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Adjust colors for dark mode if needed */
    /* --color-background-primary: #1f2937; */
    /* --color-text-primary: #ffffff; */
  }
}