/**
 * PhotoXED Design Tokens — Liquid Glass + iOS
 * This file owns all color, spacing, radius, shadow, and motion tokens.
 * NEVER put feature-specific values here.
 */

:root {
  /* Base colors — darker header/footer per spec */
  --bg: #0a0a12;
  --bg-elev: #11111a;
  --bg-glass: rgba(17, 17, 26, 0.72);
  --bg-glass-strong: rgba(10, 10, 18, 0.92);

  /* Footer segbar + sheet chrome (shared) */
  --chrome-glass-bg: var(--bg-glass-strong);
  --chrome-glass-filter: saturate(240%) blur(48px);

  /* Text */
  --tx: #f5f5f7;
  --tx2: #a1a1aa;
  --tx3: #71717a;

  /* Accents — colorful wheel palette */
  --coral: #ff6b6b;
  --gold: #ffd93d;
  --emerald: #6bcb77;
  --sky: #4d96ff;
  --accent: #a78bfa;

  /* Glass & borders */
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.06);

  /* Semantic */
  --success: #34c759;
  --warning: #ff9500;
  --danger: #ff3b30;
  --info: #007aff;

  /* Spacing (iOS-friendly) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radii */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Motion — spring-like per spec */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 220ms;
  --dur-slow: 380ms;

  /* Safe area */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);

  /* App chrome — header/footer total bar height (excludes safe areas) */
  --chrome-bar-height: 64px;
  --header-height: calc(var(--safe-top) + var(--chrome-bar-height));
  --segbar-height: calc(var(--safe-bottom) + var(--chrome-bar-height));
  --sheet-bottom: var(--segbar-height); /* JS refines to footer border-top at runtime */
}

/* iPad breakpoint — ONE AND ONLY (per PHOTOXED.md). Base styles = iPhone. No 480px, no 1024px, no max-width queries. */
@media (min-width: 768px) {
  :root {
    --sp-4: 18px;
    --sp-6: 28px;
    --sp-8: 36px;
    --radius-lg: 26px;
  }
}