/*
 * Fitvala Design Tokens — canonical layer (load first)
 * Namespaced CSS variables for guest + app surfaces.
 */

:root {
  /* Typography */
  --fv-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, Segoe UI, Roboto, Arial, sans-serif;

  /* Surfaces (light default) */
  --fv-bg: #F6F7F9;
  --fv-surface: #FFFFFF;
  --fv-surface-2: #F1F3F6;
  --fv-text: rgba(15, 23, 42, 0.92);
  --fv-muted: rgba(15, 23, 42, 0.62);
  --fv-border: rgba(15, 23, 42, 0.10);
  --fv-line: var(--fv-border);

  /* Brand */
  --fv-brand: #0FA266;
  --fv-brand-2: #0C8D58;
  --fv-brand-hover: #0C8D58;
  --fv-brand-pressed: #0A7449;
  --fv-brand-soft: rgba(15, 162, 102, 0.12);
  --fv-accent: #FB7731;
  --fv-green: var(--fv-brand);
  --fv-orange: var(--fv-accent);

  /* Semantic */
  --fv-success: #16A34A;
  --fv-warning: #F59E0B;
  --fv-danger: #EF4444;

  /* Legacy aliases (used across existing stylesheets) */
  --fv-card: var(--fv-surface);
  --fv-primary: var(--fv-brand);

  /* Radii */
  --fv-radius-sm: 10px;
  --fv-radius-md: 16px;
  --fv-radius-lg: 20px;
  --fv-radius-xl: 24px;
  --fv-r-12: var(--fv-radius-sm);
  --fv-r-16: var(--fv-radius-md);
  --fv-r-20: var(--fv-radius-lg);
  --fv-radius-12: var(--fv-radius-sm);
  --fv-radius-16: var(--fv-radius-md);
  --fv-radius-20: var(--fv-radius-lg);
  --fv-radius-24: var(--fv-radius-xl);

  /* Shadows */
  --fv-shadow-soft: 0 10px 28px rgba(2, 6, 23, 0.06);
  --fv-shadow-card: 0 12px 30px rgba(2, 6, 23, 0.08);
  --fv-shadow-1: var(--fv-shadow-soft);
  --fv-shadow-2: 0 14px 40px rgba(2, 6, 23, 0.12);
  --fv-shadow: var(--fv-shadow-card);

  /* Spacing (8px grid) */
  --fv-4: 4px;
  --fv-8: 8px;
  --fv-12: 12px;
  --fv-16: 16px;
  --fv-20: 20px;
  --fv-24: 24px;
  --fv-32: 32px;
  --fv-space-4: var(--fv-4);
  --fv-space-8: var(--fv-8);
  --fv-space-12: var(--fv-12);
  --fv-space-16: var(--fv-16);
  --fv-space-20: var(--fv-20);
  --fv-space-24: var(--fv-24);
  --fv-space-32: var(--fv-32);

  /* Type scale */
  --fv-11: 11px;
  --fv-13: 13px;
  --fv-15: 15px;
  --fv-17: 17px;
  --fv-font-s: 12px;
  --fv-font-m: 14px;
  --fv-font-l: 16px;
  --fv-font-xl: 20px;
  --fv-font-2xl: 28px;

  /* Layout */
  --fv-maxw: 1040px;
  --fv-maxw-guest: 1180px;
  --fv-maxw-narrow: 720px;
  --fv-tabbar-h: 70px;
  --fv-safe-top: env(safe-area-inset-top, 0px);
  --fv-safe-bottom: 78px;

  /* Focus & glass */
  --fv-focus: 0 0 0 4px rgba(15, 162, 102, 0.20);
  --fv-glass: rgba(255, 255, 255, 0.72);

  /* Rings */
  --fv-ring-activity: var(--fv-accent);
  --fv-ring-exercise: var(--fv-brand);
  --fv-ring-nutrition: #FFB26B;
  --fv-ring-hydration: #3BA5F5;
  --fv-ring-habits: #5B8CFF;
  --fv-ring-recovery: #A855F7;
  --fv-ring-consistency: var(--fv-ring-recovery);
}

@media (min-width: 768px) {
  :root {
    --fv-safe-bottom: 0px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --fv-bg: #0B0F14;
    --fv-surface: rgba(255, 255, 255, 0.06);
    --fv-surface-2: rgba(255, 255, 255, 0.09);
    --fv-text: rgba(255, 255, 255, 0.92);
    --fv-muted: rgba(255, 255, 255, 0.65);
    --fv-border: rgba(255, 255, 255, 0.10);
    --fv-line: var(--fv-border);
    --fv-card: var(--fv-surface);
    --fv-shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.35);
    --fv-shadow-card: 0 18px 56px rgba(0, 0, 0, 0.45);
    --fv-glass: rgba(15, 23, 42, 0.70);
  }
}

:root[data-theme="dark"],
#fitvala-app-shell[data-theme="dark"],
body.fitvala-app-shell[data-theme="dark"] {
  --fv-bg: #0B0F14;
  --fv-surface: rgba(255, 255, 255, 0.06);
  --fv-surface-2: rgba(255, 255, 255, 0.09);
  --fv-text: rgba(255, 255, 255, 0.92);
  --fv-muted: rgba(255, 255, 255, 0.65);
  --fv-border: rgba(255, 255, 255, 0.10);
  --fv-line: var(--fv-border);
  --fv-card: var(--fv-surface);
  --fv-shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.35);
  --fv-shadow-card: 0 18px 56px rgba(0, 0, 0, 0.45);
  --fv-glass: rgba(15, 23, 42, 0.70);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}