/**
 * Spomotion Design System
 * ========================
 * A comprehensive design system for consistent styling across the website.
 * Import this file at the top of styles.css or use as reference.
 */

/* ============================================
   1. COLOR PALETTE
   ============================================ */
:root {
    /* Primary Brand Colors */
    --color-primary: #5183EB;
    --color-primary-hover: #3A6FD8;
    --color-primary-active: #2A5FC8;

    /* Text Colors */
    --color-text-primary: #0f172a;
    --color-text-secondary: #C2C2C2;
    --color-text-placeholder: #C2C2C2;
    --color-text-white: #FFFFFF;

    /* Background Colors */
    --color-bg-primary: #FFFFFF;
    --color-bg-input: #FFFFFF;

    /* Border Colors */
    --color-border-light: #F0F0F0;
    --color-border-focus: #5183EB;

    /* Status Colors */
    --color-success: #19C37D;
    --color-success-dark: #047854;
    --color-success-bg: #E6F4F0;
    --color-success-border: #9BD5C3;
    --color-error: #EF4444;
    --color-error-bg: rgba(239, 68, 68, 0.15);

    /* Gradient Colors (used in carousel) */
    --color-gradient-green: #19C37D;
    --color-gradient-blue: #5183EB;
    --color-gradient-dark-blue: #1F4A7A;
    --color-gradient-darker-blue: #143B5E;

    /* ============================================
     2. TYPOGRAPHY
     ============================================ */

    /* Font Family */
    --font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

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

    /* Font Sizes */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 42px;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;

    /* Letter Spacing */
    --letter-spacing-base: -0.12px;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: -0.006em;

    /* ============================================
     3. SPACING
     ============================================ */
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-60: 60px;

    /* ============================================
     4. BORDER RADIUS
     ============================================ */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ============================================
     5. SHADOWS
     ============================================ */
    --shadow-sm: 0px 1px 2px rgba(228, 229, 231, 0.25);
    --shadow-focus: 0px 0px 0px 3px rgba(81, 131, 235, 0.15);
    --shadow-error: 0px 0px 0px 3px rgba(239, 68, 68, 0.15);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);

    /* ============================================
     6. TRANSITIONS
     ============================================ */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ============================================
     7. Z-INDEX LAYERS
     ============================================ */
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-popover: 50;
    --z-tooltip: 60;

    /* ============================================
     8. BREAKPOINTS (for reference)
     ============================================ */
    /*
   * --breakpoint-xs: 320px;   Extra small mobile
   * --breakpoint-sm: 375px;   Small mobile
   * --breakpoint-md: 480px;   Mobile
   * --breakpoint-lg: 768px;   Tablet
   * --breakpoint-xl: 900px;   Small desktop
   * --breakpoint-2xl: 1100px; Large desktop
   */
}

/* ============================================
   9. UTILITY CLASSES
   ============================================ */

/* Text utilities */
.text-primary {
    color: var(--color-text-primary);
}

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

.text-brand {
    color: var(--color-primary);
}

.text-success {
    color: var(--color-success-dark);
}

.text-error {
    color: var(--color-error);
}

/* Font weight utilities */
.font-regular {
    font-weight: var(--font-weight-regular);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

/* Text alignment */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Display utilities */
.hidden {
    display: none;
}

.block {
    display: block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

/* Flex utilities */
.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-8 {
    gap: var(--spacing-8);
}

.gap-16 {
    gap: var(--spacing-16);
}

/* ============================================
   10. COMPONENT TOKENS
   ============================================ */

/* Button
 * -------
 * Primary button component used across the site.
 * Uses .download-btn class with consistent structure:
 *
 * HTML Structure:
 * <a href="#" class="download-btn">
 *   <span class="bg-fill"></span>
 *   <div class="btn-content">
 *     <span class="btn-text">Button Text</span>
 *   </div>
 *   <div class="border-ring" aria-hidden="true"></div>
 * </a>
 *
 * Or with icon:
 * <button class="download-btn">
 *   <span class="bg-fill"></span>
 *   <div class="btn-content">
 *     <div class="icon-wrapper">
 *       <svg class="apple-icon">...</svg>
 *     </div>
 *     <span class="btn-text">Button Text</span>
 *   </div>
 *   <div class="border-ring" aria-hidden="true"></div>
 * </button>
 */
:root {
    --btn-height: 40px;
    --btn-padding-x: 16px;
    --btn-font-size: var(--font-size-base);
    --btn-font-weight: var(--font-weight-semibold);
    --btn-radius: 40px;
}

/* Input */
:root {
    --input-height: 40px;
    --input-padding-x: 12px;
    --input-padding-y: 8px;
    --input-font-size: var(--font-size-base);
    --input-radius: var(--radius-md);
}

/* Card */
:root {
    --card-padding: var(--spacing-16);
    --card-radius: var(--radius-xl);
}