/**
 * VLRS design tokens — surfaces, type, radii, shadows (premier / responsive)
 * Load before feature CSS. Safe-area and motion prefs included.
 */
:root {
  /* Accent — warm copper-amber (brand) */
  --rs-orange: #ea580c;
  --rs-orange-hover: #f97316;
  --rs-orange-dark: #c2410c;
  --rs-orange-soft: #fff7ed;
  --rs-orange-mid: #ffedd5;
  --rs-orange-border: #fed7aa;
  --rs-white: #ffffff;
  --rs-cream: #fffbf5;
  --rs-ink: #0c0a09;
  --rs-ink-soft: #3f3b36;
  --rs-muted: #6b6560;
  --rs-line: #e8e4df;
  --rs-success: #16a34a;
  --rs-danger: #dc2626;

  /* Premier surfaces — calmer than flat peach */
  --rs-page-bg: #f4f1ec;
  --rs-page-bg-2: #faf8f4;
  --rs-surface: #ffffff;
  --rs-surface-muted: #fbf9f6;
  --rs-nav-bg: rgba(255, 255, 255, 0.88);
  --rs-nav-border: rgba(15, 23, 42, 0.08);
  --rs-footer-bg: #0f0d0c;
  --rs-footer-line: rgba(255, 255, 255, 0.08);

  --rs-radius-xs: 8px;
  --rs-radius-sm: 12px;
  --rs-radius: 16px;
  --rs-radius-lg: 22px;
  --rs-radius-xl: 28px;
  --rs-radius-pill: 999px;

  --rs-shadow-xs: 0 1px 2px rgba(12, 10, 9, 0.04);
  --rs-shadow-sm: 0 2px 8px rgba(12, 10, 9, 0.05), 0 1px 2px rgba(12, 10, 9, 0.04);
  --rs-shadow: 0 8px 30px rgba(12, 10, 9, 0.07), 0 2px 8px rgba(12, 10, 9, 0.04);
  --rs-shadow-lg: 0 20px 50px rgba(12, 10, 9, 0.1), 0 8px 20px rgba(12, 10, 9, 0.05);
  --rs-shadow-orange: 0 14px 40px rgba(234, 88, 12, 0.28);

  --rs-safe-top: env(safe-area-inset-top, 0px);
  --rs-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rs-safe-left: env(safe-area-inset-left, 0px);
  --rs-safe-right: env(safe-area-inset-right, 0px);

  --rs-header-h: 56px;
  --rs-tabbar-h: 64px;
  --rs-sidebar-w: 268px;
  --rs-touch: 48px;

  --rs-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --rs-font-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;

  --rs-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --rs-text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --rs-text-xl: clamp(1.35rem, 1.15rem + 0.8vw, 1.65rem);
  --rs-text-2xl: clamp(1.65rem, 1.35rem + 1.2vw, 2rem);

  --rs-blur-nav: blur(20px);

  /* Page shell — gutters & max widths (rs-app-shell.css) */
  --rs-gutter: clamp(12px, 3vw, 24px);
  --rs-gutter-lg: clamp(20px, 4vw, 40px);
  --rs-content-max: min(1120px, 100%);
  --rs-content-max-wide: min(1200px, 100%);
}

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

/* —— Touch & zoom: professional mobile behavior —— */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Reduces accidental double-tap zoom on buttons/links (does not replace accessible zoom).
 * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
 */
body {
  touch-action: manipulation;
}

/*
 * iOS Safari zooms focused fields if computed font-size < 16px.
 * Apply on coarse pointers (phones/tablets) only so desktop layouts stay unchanged.
 */
@media (hover: none) and (pointer: coarse) {
  textarea,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]) {
    font-size: max(1rem, 16px) !important;
  }
}