/**
 * Design Tokens
 */

/* ============================================
   MOBILE VIEWPORT FIXES
   Fix for mobile browsers where 100vh includes address bar
   ============================================ */
html, body {
  height: 100%;
  height: 100dvh; /* Dynamic viewport height - excludes mobile address bar */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Fallback for browsers that don't support dvh */
@supports not (height: 100dvh) {
  html, body {
    height: 100vh;
    /* Use CSS env() for safe area insets on iOS */
    height: calc(100vh - env(safe-area-inset-bottom, 0px));
  }
}

:root {
  /* Dock tint (lighter, more transparent) */
  --lg-tint: rgba(30, 30, 35, 0.12);
  --lg-tint-strong: rgba(25, 25, 30, 0.18);
  --lg-tint-gradient: linear-gradient(
    135deg,
    rgba(30, 30, 35, 0.12),
    rgba(40, 40, 50, 0.08)
  );

  /* Menu background (darker, more opaque) */
  /* NOTE: Dynamic values are set via JS - window.liquidGlassMenuConfig */
  /* These are fallback values for initial render */
  --menu-bg: rgba(25, 25, 35, 0.55);
  --menu-blur: 40px;

  /* Cupertino system colors (dark mode) */
  --cupertino-blue: rgba(10, 132, 255, 0.9); /* #0A84FF */
  --cupertino-red: rgba(255, 69, 58, 0.9); /* #FF453A */
  --cupertino-gray: rgba(142, 142, 147, 1); /* #8E8E93 */

  /* ============================================
     ANIMATION VARIABLES
     Centralized timing and easing from animations.dart
     ============================================ */

  /* Durations - Standard */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-medium: 300ms;

  /* Durations - Interaction */
  --duration-menu-toggle: 200ms;
  --duration-menu-blink: 240ms;

  /* Durations - Window Animation Components */
  --duration-fly-in: 220ms;
  --duration-fly-out: 320ms;
  --duration-shrink: 550ms;
  
  /* Durations - Window Expand (Platform Specific) */
  --duration-expand-macos: 800ms;
  --duration-expand-ios: 950ms;

  /* Durations - Desktop Transitions */
  --duration-bg-expand: 1100ms;
  --duration-bg-shrink: 1500ms;
  --duration-dock-fade: 600ms;

  /* Curves (Easing) */
  --curve-ease-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* Standard Material/iOS */
  --curve-ios-open: cubic-bezier(0.1, 1.1, 0.3, 1); /* Spring-like expand */
  --curve-ios-close: cubic-bezier(0.16, 1, 0.3, 1); /* Smooth decelerate */
  --curve-fly-in: cubic-bezier(0, 0, 0.2, 1); /* Aggressive entry */
  --curve-fly-out: cubic-bezier(0.4, 0, 1, 1); /* Aggressive exit */

  /* JavaScript Hook Variables */
  --anim-target-scale-x: 0.01;
  --anim-target-scale-y: 0.01;
  --anim-translate-x: 0px;
  --anim-translate-y: 0px;
}