/* ATKV Mobile Platform Design Tokens
 * Based on BRANDING.md specifications
 * Last Updated: 2025-11-22
 * Version: 1.1
 */

:root {
  /* ========================================
     COLORS - Primary Palette
     ======================================== */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary-yellow: #fdb913;
  --color-primary-blue: #2a63af;
  --color-grey: #b7beb5;
  --color-text-permanent: #3c3c3c;

  /* ========================================
     COLORS - Semantic Colors
     ======================================== */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-grey);
  --color-text-light: var(--color-white);
  --color-background-primary: var(--color-white);
  --color-background-secondary: #f9fafb;

  /* ========================================
     BUTTONS - Background Colors
     ======================================== */
  --button-primary-bg: #000000;
  --button-primary-text: var(--color-white);
  --button-primary-hover: #1a1a1a;
  --button-primary-active: #000000;

  --button-secondary-bg: #2a63af;
  --button-secondary-text: var(--color-white);
  --button-secondary-hover: #234f8e;
  --button-secondary-active: #1d3f6f;

  --button-tertiary-bg: #f3f0eb;
  --button-tertiary-text: var(--color-black);
  --button-tertiary-border: #b7beb5;
  --button-tertiary-hover: #e8e4dd;
  --button-tertiary-active: #ddd8d0;

  --button-disabled-bg: #e0e0e0;
  --button-disabled-text: #9e9e9e;
  --button-disabled-border: #cccccc;

  --button-selected-bg: #b7beb5;
  --button-unselected-bg: #ffffff;
  --button-unselected-border: #000000;

  --button-error-bg: #d32f2f;
  --button-error-text: var(--color-white);
  --button-error-hover: #c62828;

  --button-ngo-bg: var(--color-primary-yellow);
  --button-ngo-text: var(--color-black);

  /* ========================================
     CARDS
     ======================================== */
  --card-background: #f9fafb;
  --card-border: #e1e0e1;
  --card-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --card-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --card-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* ========================================
     INPUTS
     ======================================== */
  --input-background: var(--color-white);
  --input-border: var(--color-black);
  --input-border-focus: var(--color-primary-blue);
  --input-border-error: #d32f2f;
  --input-text: var(--color-black);
  --input-placeholder: #9e9e9e;
  --input-disabled-bg: #f5f5f5;
  --input-disabled-text: #9e9e9e;

  /* ========================================
     TYPOGRAPHY - Font Families
     ======================================== */
  --font-family-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ========================================
     TYPOGRAPHY - 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 */

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

  /* ========================================
     TYPOGRAPHY - Line Heights
     ======================================== */
  --line-height-tight: 1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========================================
     TYPOGRAPHY - Headings
     ======================================== */
  --heading-h1-size: 2rem;           /* 32px */
  --heading-h1-weight: var(--font-weight-semibold);
  --heading-h1-line-height: var(--line-height-tight);

  --heading-h2-size: 1.75rem;        /* 28px */
  --heading-h2-weight: var(--font-weight-bold);
  --heading-h2-line-height: var(--line-height-tight);

  --heading-h3-size: 1.5rem;         /* 24px */
  --heading-h3-weight: var(--font-weight-semibold);
  --heading-h3-line-height: var(--line-height-tight);

  --heading-h4-size: 1.25rem;        /* 20px */
  --heading-h4-weight: var(--font-weight-semibold);
  --heading-h4-line-height: var(--line-height-tight);

  --heading-h5-size: 1.75rem;        /* 28px */
  --heading-h5-weight: var(--font-weight-bold);
  --heading-h5-line-height: var(--line-height-tight);

  /* ========================================
     TYPOGRAPHY - Body Text
     ======================================== */
  --body-text-size: var(--font-size-base);
  --body-text-weight: var(--font-weight-regular);
  --body-text-line-height: var(--line-height-normal);

  --body-small-size: 1.25rem;        /* 20px */
  --body-small-weight: var(--font-weight-regular);
  --body-small-line-height: var(--line-height-tight);

  /* ========================================
     TYPOGRAPHY - UI Elements
     ======================================== */
  --button-text-size: var(--font-size-base);
  --button-text-weight: var(--font-weight-medium);

  --input-text-size: var(--font-size-base);
  --input-text-weight: var(--font-weight-medium);

  --menu-text-size: 1.5rem;          /* 24px */
  --menu-text-weight: var(--font-weight-semibold);

  /* ========================================
     SPACING SYSTEM
     ======================================== */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 0.75rem;    /* 12px */
  --spacing-lg: 1rem;       /* 16px */
  --spacing-xl: 1.25rem;    /* 20px */
  --spacing-2xl: 1.5rem;    /* 24px */
  --spacing-3xl: 2rem;      /* 32px */
  --spacing-4xl: 2.5rem;    /* 40px */
  --spacing-5xl: 3rem;      /* 48px */
  --spacing-6xl: 4rem;      /* 64px */

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm: 0.5rem;      /* 8px */
  --radius-md: 1rem;        /* 16px */
  --radius-lg: 1.25rem;     /* 20px */
  --radius-xl: 2rem;        /* 32px */
  --radius-2xl: 4.375rem;   /* 70px */
  --radius-full: 9999px;

  /* Component-specific radius */
  --radius-button: 1.25rem;      /* 20px */
  --radius-card: 1.25rem;        /* 20px */
  --radius-input: 1.25rem;       /* 20px */
  --radius-navigation: 4.375rem; /* 70px */

  /* ========================================
     BORDERS
     ======================================== */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

  /* Component-specific shadows */
  --shadow-top-nav: var(--shadow-sm);
  --shadow-bottom-nav: 0px -2px 4px rgba(0, 0, 0, 0.1);
  --shadow-card: var(--shadow-md);
  --shadow-modal: var(--shadow-xl);
  --shadow-dropdown: var(--shadow-lg);

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  --transition-slower: 500ms ease-in-out;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========================================
     BREAKPOINTS (for JavaScript usage)
     ======================================== */
  --breakpoint-mobile: 393px;
  --breakpoint-tablet: 744px;
  --breakpoint-desktop: 1440px;
  --breakpoint-wide: 1920px;

  /* ========================================
     LAYOUT
     ======================================== */
  --container-max-width: 1440px;
  --container-padding-mobile: var(--spacing-lg);
  --container-padding-tablet: var(--spacing-2xl);
  --container-padding-desktop: var(--spacing-3xl);

  /* ========================================
     GRADIENTS
     ======================================== */
  --gradient-blue: linear-gradient(180deg, #2a63af 0%, #ffffff 100%);
  --gradient-blue-start: #2a63af;
  --gradient-blue-end: #ffffff;
  
  /* Legacy Gradient Support */
  --gradient-ocean: linear-gradient(135deg, #2a63af 0%, #6b9fd8 50%, #89c4e8 100%);
  --color-wallet-gradient-start: #B3D7F0;
  --color-wallet-gradient-end: #A8CDE8;
  --gradient-wallet: linear-gradient(135deg, var(--color-wallet-gradient-start) 0%, var(--color-wallet-gradient-end) 100%);
  --color-wallet-icon-bg: #FFA726;

  /* ========================================
     OPACITY
     ======================================== */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.9;
  --opacity-pressed: 0.8;
}

/* ==========================================
   DARK MODE SUPPORT (Future Enhancement)
   ========================================== */

/* Uncomment and customize when implementing dark mode
[data-theme="dark"] {
  --color-bg-primary: #1A1A1A;
  --color-bg-secondary: #2A2A2A;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #CCCCCC;
  ... etc
}
*/

/* ==========================================
   RESORT-SPECIFIC THEMING (Future Enhancement)
   ========================================== */

/* Each resort can have its own color scheme
[data-resort="klein-kariba"] {
  --color-primary: #specific-resort-color;
  ... etc
}
*/