/* MPLS Ramah 2026 v0.7 — Apple-inspired design tokens */
:root {
  --app-bg: #f5f5f7;
  --app-bg-elevated: rgba(255,255,255,.82);
  --app-surface: rgba(255,255,255,.78);
  --app-surface-solid: #ffffff;
  --app-surface-secondary: #f0f1f4;
  --app-text: #1d1d1f;
  --app-text-secondary: #6e6e73;
  --app-text-tertiary: #8e8e93;
  --app-separator: rgba(60,60,67,.16);
  --app-separator-strong: rgba(60,60,67,.28);
  --app-blue: #007aff;
  --app-blue-hover: #006ee6;
  --app-green: #248a3d;
  --app-orange: #c93400;
  --app-red: #d70015;
  --app-purple: #8944ab;
  --app-gold: #a46600;
  --app-cyan: #0071a4;
  --app-blue-soft: rgba(0,122,255,.10);
  --app-green-soft: rgba(36,138,61,.10);
  --app-orange-soft: rgba(201,52,0,.10);
  --app-red-soft: rgba(215,0,21,.09);
  --app-purple-soft: rgba(137,68,171,.10);
  --app-gold-soft: rgba(164,102,0,.10);
  --app-glass: rgba(248,248,250,.76);
  --app-shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  --app-shadow-md: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --app-shadow-lg: 0 24px 70px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07);
  --app-radius-xs: 10px;
  --app-radius-sm: 14px;
  --app-radius-md: 18px;
  --app-radius-lg: 24px;
  --app-radius-xl: 32px;
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-space-8: 32px;
  --app-space-10: 40px;
  --app-content: 1120px;
  --app-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --app-ease: cubic-bezier(.2,.8,.2,1);
  --app-duration: 220ms;

  /* v1.6.6: semantic bridge shared by legacy and newer modules. */
  --surface: var(--app-surface-solid);
  --surface-card: var(--app-surface-solid);
  --surface-subtle: var(--app-surface-secondary);
  --surface-soft: var(--app-surface-secondary);
  --surface-strong: var(--app-bg-elevated);
  --text-primary: var(--app-text);
  --text-secondary: var(--app-text-secondary);
  --text-tertiary: var(--app-text-tertiary);
  --border-color: var(--app-separator);
  --accent: var(--app-blue);
  --shadow-soft: var(--app-shadow-sm);

  /* v1.6.6: shared accessibility and layering scale. */
  --app-touch-target: 44px;
  --app-control-height: 46px;
  --app-font-caption: 12px;
  --app-font-meta: 11px;
  --app-focus-color: rgba(0,122,255,.46);
  --app-focus-ring: 0 0 0 4px var(--app-focus-color);
  --app-z-content: 1;
  --app-z-sticky: 160;
  --app-z-tabbar: 220;
  --app-z-floating: 219;
  --app-z-sheet-backdrop: 300;
  --app-z-sheet: 320;
  --app-z-toast: 420;
  --app-z-picker: 520;
  --app-z-modal: 1200;
  --app-z-modal-top: 1300;
  --app-z-critical: 9999;

  /* Bridge old v0.6 variables to the new system. */
  --bg: var(--app-bg);
  --panel: var(--app-surface);
  --panel2: var(--app-surface-solid);
  --line: var(--app-separator);
  --text: var(--app-text);
  --muted: var(--app-text-secondary);
  --blue: var(--app-blue);
  --cyan: var(--app-cyan);
  --gold: var(--app-gold);
  --danger: var(--app-red);
  --success: var(--app-green);
  --shadow: var(--app-shadow-md);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg: #090b10;
    --app-bg-elevated: rgba(28,28,30,.84);
    --app-surface: rgba(28,28,30,.76);
    --app-surface-solid: #1c1c1e;
    --app-surface-secondary: #242426;
    --app-text: #f5f5f7;
    --app-text-secondary: #aeaeb2;
    --app-text-tertiary: #8e8e93;
    --app-separator: rgba(84,84,88,.42);
    --app-separator-strong: rgba(99,99,102,.58);
    --app-blue: #0a84ff;
    --app-blue-hover: #409cff;
    --app-green: #30d158;
    --app-orange: #ff9f0a;
    --app-red: #ff453a;
    --app-purple: #bf5af2;
    --app-gold: #ffd60a;
    --app-cyan: #64d2ff;
    --app-blue-soft: rgba(10,132,255,.15);
    --app-green-soft: rgba(48,209,88,.13);
    --app-orange-soft: rgba(255,159,10,.13);
    --app-red-soft: rgba(255,69,58,.13);
    --app-purple-soft: rgba(191,90,242,.13);
    --app-gold-soft: rgba(255,214,10,.13);
    --app-glass: rgba(24,24,27,.72);
    --app-focus-color: rgba(10,132,255,.52);
    --app-shadow-sm: 0 1px 2px rgba(0,0,0,.22), 0 5px 18px rgba(0,0,0,.20);
    --app-shadow-md: 0 12px 36px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.18);
    --app-shadow-lg: 0 30px 90px rgba(0,0,0,.48), 0 8px 26px rgba(0,0,0,.26);
  }
}

:root[data-theme="dark"] {
  --app-bg: #090b10;
  --app-bg-elevated: rgba(28,28,30,.84);
  --app-surface: rgba(28,28,30,.76);
  --app-surface-solid: #1c1c1e;
  --app-surface-secondary: #242426;
  --app-text: #f5f5f7;
  --app-text-secondary: #aeaeb2;
  --app-text-tertiary: #8e8e93;
  --app-separator: rgba(84,84,88,.42);
  --app-separator-strong: rgba(99,99,102,.58);
  --app-blue: #0a84ff;
  --app-blue-hover: #409cff;
  --app-green: #30d158;
  --app-orange: #ff9f0a;
  --app-red: #ff453a;
  --app-purple: #bf5af2;
  --app-gold: #ffd60a;
  --app-cyan: #64d2ff;
  --app-blue-soft: rgba(10,132,255,.15);
  --app-green-soft: rgba(48,209,88,.13);
  --app-orange-soft: rgba(255,159,10,.13);
  --app-red-soft: rgba(255,69,58,.13);
  --app-purple-soft: rgba(191,90,242,.13);
  --app-gold-soft: rgba(255,214,10,.13);
  --app-glass: rgba(24,24,27,.72);
  --app-focus-color: rgba(10,132,255,.52);
  --app-shadow-sm: 0 1px 2px rgba(0,0,0,.22), 0 5px 18px rgba(0,0,0,.20);
  --app-shadow-md: 0 12px 36px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.18);
  --app-shadow-lg: 0 30px 90px rgba(0,0,0,.48), 0 8px 26px rgba(0,0,0,.26);
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}