/**
 * Mobile Design Tokens
 * Single source of truth for all mobile-specific design values
 *
 * Usage:
 * - Use semantic tokens (--mobile-spacing-*) in components
 * - Never hardcode pixel values
 * - Tokens cascade from global :root variables when appropriate
 */

:root {
  /* ===== Mobile Breakpoints ===== */
  --mobile-max: 767px;
  --mobile-small: 374px;    /* iPhone SE */
  --mobile-large: 430px;     /* iPhone Pro Max */

  /* ===== Mobile Spacing Scale ===== */
  /* Use these instead of hardcoded pixels */
  --mobile-spacing-none: 0;
  --mobile-spacing-2xs: 4px;    /* Minimal gap between related elements */
  --mobile-spacing-xs: 8px;     /* Tight spacing (e.g., label → input) */
  --mobile-spacing-sm: 12px;    /* Small gap (e.g., icon → text) */
  --mobile-spacing-md: 16px;    /* Default paragraph spacing */
  --mobile-spacing-lg: 24px;    /* Section spacing within component */
  --mobile-spacing-xl: 32px;    /* Breathing room between components */
  --mobile-spacing-2xl: 48px;   /* Large section breaks */
  --mobile-spacing-3xl: 64px;   /* Major section divisions */

  /* ===== Mobile Typography ===== */
  --mobile-text-xs: 12px;
  --mobile-text-sm: 14px;
  --mobile-text-base: 16px;     /* Body text - meets accessibility */
  --mobile-text-lg: 18px;
  --mobile-text-xl: 20px;       /* Subheadings */
  --mobile-text-2xl: 24px;      /* Section titles */
  --mobile-text-3xl: 32px;      /* Page titles */

  /* ===== Mobile Touch Targets ===== */
  /* RESPONSIVE v2.1: Increased sizes for better usability */
  --mobile-touch-min: 48px; /* Increased from 44px */
  --mobile-touch-comfortable: 60px; /* Increased from 56px - Recommended for primary actions */
  --mobile-touch-large: 64px; /* Increased from 60px - Important CTAs */

  /* ===== Mobile Layout ===== */
  --mobile-gutter: 24px;        /* RESPONSIVE v2.1: Increased from 16px - Screen edge padding */
  --mobile-gutter-sm: 16px;     /* RESPONSIVE v2.1: Increased from 12px - Tight screens (< 375px) */
  --mobile-container-max: 100%; /* Always full width on mobile */

  /* ===== Mobile Navigation ===== */
  --mobile-header-height: 72px; /* RESPONSIVE v2.1: Increased from 64px for better touch targets */
  --mobile-menu-blur: 40px;
  --mobile-menu-overlay-opacity: 0.3;
  --mobile-menu-item-height: 48px; /* Optimized for better screen space usage */

  /* ===== Mobile Animations ===== */
  --mobile-anim-fast: 200ms;
  --mobile-anim-normal: 300ms;
  --mobile-anim-slow: 400ms;
  --mobile-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* Smooth deceleration */
  --mobile-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ===== Mobile Z-Index Scale ===== */
  /* Prevents z-index chaos - use these values only */
  --z-base: 1;
  --z-raised: 10;
  --z-overlay: 100;
  --z-sticky: 1000;
  --z-header: 9999;
  --z-backdrop: 99998;
  --z-modal: 100000;

  /* ===== Mobile Product Demos ===== */
  --mobile-demo-height: 300px;
  --mobile-demo-border-radius: var(--radius-lg);
  --mobile-demo-aspect-ratio: 16 / 10;

  /* ===== Mobile Safe Areas (iOS) ===== */
  --mobile-safe-top: env(safe-area-inset-top, 0);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0);
  --mobile-safe-left: env(safe-area-inset-left, 0);
  --mobile-safe-right: env(safe-area-inset-right, 0);
}

/* ===== Small Devices Adjustments ===== */
@media (max-width: 374px) {
  :root {
    --mobile-gutter: var(--mobile-gutter-sm);
    --mobile-spacing-xl: 24px;  /* Reduce breathing room on small screens */
    --mobile-spacing-2xl: 32px;
  }
}

/* ===== Landscape Adjustments ===== */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --mobile-header-height: 56px; /* RESPONSIVE v2.1: Increased from 48px */
    --mobile-menu-item-height: 48px;
    --mobile-spacing-xl: 24px;
    --mobile-spacing-2xl: 32px;
  }
}

/* ===== Semantic Component Tokens ===== */
/* These map generic tokens to specific use cases */
:root {
  /* Product Card Spacing */
  --mobile-product-image-to-text: var(--mobile-spacing-xl);    /* Image → product name */
  --mobile-product-name-to-headline: var(--mobile-spacing-xs); /* Name → headline */
  --mobile-product-headline-to-desc: var(--mobile-spacing-xs); /* Headline → description */
  --mobile-product-desc-to-cta: var(--mobile-spacing-md);      /* Description → button */
  --mobile-product-card-gap: var(--mobile-spacing-3xl);        /* Between product cards */

  /* Menu Spacing */
  --mobile-menu-section-gap: var(--mobile-spacing-sm);
  --mobile-menu-item-padding: var(--mobile-spacing-lg) var(--mobile-spacing-xl);
  --mobile-menu-cta-margin-top: var(--mobile-spacing-2xl); /* RESPONSIVE v2.1: More space before CTA */

  /* Hero Spacing */
  --mobile-hero-content-padding: var(--mobile-spacing-xl) var(--mobile-spacing-lg);
  --mobile-hero-title-to-desc: var(--mobile-spacing-lg);
  --mobile-hero-desc-to-cta: var(--mobile-spacing-lg);
  --mobile-hero-proof-to-cta: var(--mobile-spacing-2xl);
}