/* ============================================================
   SMG Design Tokens & Shared Styles
   Version: 1.0
   ============================================================ */

/* ── Focus management ───────────────────────────────────────
   Remove blue focus outline on mouse click.
   Keep outline only for keyboard navigation (:focus-visible).
   ──────────────────────────────────────────────────────────── */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--accent-primary, #FE5000);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Programmatic focus targets (e.g. <FocusOnNavigate>) should not show the
   visible ring. Focus management (accessibility/screen reader) is preserved;
   only the visible ring is hidden on these non-keyboard targets. */
h1:focus, h1:focus-visible,
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible {
  outline: none;
}

/* --- Light Mode Tokens (default) --- */
/* html:not(.dark) ensures light tokens win even when OS is dark mode */
html:not(.dark) {
  --bg-primary: #FAFAF9;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #F4F4F2;
  --bg-hover: #F0EFED;
  --bg-selected: #FFF3ED;

  --text-primary: #1A1A1A;
  --text-secondary: #53565A;
  --text-tertiary: #97999B;

  --accent-primary: #FE5000;
  --accent-hover: #E54800;
  --accent-light: #FFF3ED;

  --success: #059669;
  --success-light: #ECFDF5;
  --warning: #D97706;
  --warning-light: #FFFBEB;
  --error: #DC2626;
  --error-light: #FEF2F2;
  --info: #2563EB;
  --info-light: #EFF6FF;

  --border-default: #E5E5E3;
  --border-strong: #D4D4D2;
  --border-subtle: #F0F0EE;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* :root fallback for pages that haven't toggled yet */
:root {
  --bg-primary: #FAFAF9;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #F4F4F2;
  --bg-hover: #F0EFED;
  --bg-selected: #FFF3ED;
  --text-primary: #1A1A1A;
  --text-secondary: #53565A;
  --text-tertiary: #97999B;
  --accent-primary: #FE5000;
  --accent-hover: #E54800;
  --accent-light: #FFF3ED;
  --success: #059669;
  --success-light: #ECFDF5;
  --warning: #D97706;
  --warning-light: #FFFBEB;
  --error: #DC2626;
  --error-light: #FEF2F2;
  --info: #2563EB;
  --info-light: #EFF6FF;
  --border-default: #E5E5E3;
  --border-strong: #D4D4D2;
  --border-subtle: #F0F0EE;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --- Dark Mode Tokens — .dark class (JS toggle) --- */
.dark {
  --bg-primary: #111113;
  --bg-surface: #1A1A1E;
  --bg-surface-alt: #222226;
  --bg-hover: #2A2A2E;
  --bg-selected: #2D1A0E;

  --text-primary: #EBEBEB;
  --text-secondary: #A1A1A6;
  --text-tertiary: #6B6B70;

  --accent-primary: #FF6B1A;
  --accent-hover: #FF8040;
  --accent-light: #2D1A0E;

  --border-default: #2A2A2E;
  --border-strong: #3A3A3E;
  --border-subtle: #1F1F23;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* --- Base Typography --- */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* --- Utility Classes --- */

/* Scrollbar hiding */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animate-in (dropdown, modal) */
.animate-in {
  animation: dropIn 0.15s ease-out;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Safe area for mobile bottom nav */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* ============================================================
   Dark Mode — CSS class overrides (.dark selector)
   .dark class overrides surface colors. html:not(.dark) keeps
   light mode protected from the OS dark-mode media query.
   ============================================================ */

/* Light mode: keep tokens even if OS dark mode is on */
html:not(.dark) .bg-white          { background-color: #FFFFFF !important; }
html:not(.dark) .bg-gray-50        { background-color: #F9FAFB !important; }
html:not(.dark) .bg-gray-100       { background-color: #F3F4F6 !important; }
html:not(.dark) input:not([type="range"]):not(.smg-checkbox),
html:not(.dark) select,
html:not(.dark) textarea           { background-color: #FFFFFF !important; color: #1A1A1A !important; }

/* Dark mode: .dark class darkens surfaces */
.dark .bg-white                    { background-color: #1A1A1E !important; }
.dark .bg-gray-50                  { background-color: #2A2A2E !important; }
.dark .bg-gray-100                 { background-color: #222226 !important; }

/* Borders */
html:not(.dark) .border-gray-100,
html:not(.dark) .border-gray-200   { border-color: #E5E5E3 !important; }
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300             { border-color: #2A2A2E !important; }

/* Inputs */
.dark input:not([type="range"]):not(.smg-checkbox),
.dark select,
.dark textarea                     { background-color: #222226 !important; color: #EBEBEB !important; border-color: #2A2A2E !important; }
.dark input::placeholder,
.dark textarea::placeholder        { color: #6B6B70 !important; }

/* Dropdown/popup shadows */
html:not(.dark) .shadow-xl,
html:not(.dark) .shadow-elevated   { --tw-shadow-color: rgba(0,0,0,0.12); }
.dark .shadow-xl.bg-white,
.dark .shadow-elevated.bg-white    { background-color: #1A1A1E !important; }

/* Hover states */
html:not(.dark) .hover\:bg-gray-50:hover  { background-color: #F9FAFB !important; }
.dark .hover\:bg-white:hover,
.dark .hover\:bg-gray-50:hover            { background-color: #2A2A2E !important; }

/* Text */
html:not(.dark) .text-gray-900 { color: #111827 !important; }
html:not(.dark) .text-gray-700 { color: #374151 !important; }
.dark .text-gray-900           { color: #EBEBEB !important; }
.dark .text-gray-700           { color: #A1A1A6 !important; }
.dark .text-gray-600           { color: #A1A1A6 !important; }
.dark .text-gray-500           { color: #6B6B70 !important; }

/* Reduced motion */
@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;
  }
}

/* ============================================================
   SMG --vx-* design tokens
   Vocabulary used by the app screens (and the ported VA form
   components: SmgSelect / SmgStoreSelect / SmgPills). Coexists
   with the --accent-* tokens above (same brand values).
   ============================================================ */
:root{
  /* Brand ramp — SMG Orange (Pantone Orange 021 C) */
  --vx-brand-50:#FFF1EA;--vx-brand-100:#FFDDCC;--vx-brand-200:#FFB997;--vx-brand-300:#FF9362;--vx-brand-400:#FF6E2E;--vx-brand-500:#FE5000;--vx-brand-600:#E84600;--vx-brand-700:#C23A02;--vx-brand-800:#992E06;--vx-brand-900:#7A2608;
  /* Neutrals — cool gray (Cool Gray 11 = 700, Cool Gray 7 = 500) */
  --vx-neutral-0:#FFFFFF;--vx-neutral-25:#FAFBFB;--vx-neutral-50:#F4F5F6;--vx-neutral-100:#ECEDEF;--vx-neutral-200:#E2E3E5;--vx-neutral-300:#D1D3D6;--vx-neutral-400:#AEB0B4;--vx-neutral-500:#97999B;--vx-neutral-600:#73767A;--vx-neutral-700:#53565A;--vx-neutral-800:#3A3D42;--vx-neutral-900:#26292E;
  /* Semantic — solid / tint bg / text-on-tint */
  --vx-success:#1E9E5A;--vx-success-bg:#E7F6EE;--vx-success-text:#146C3E;
  --vx-warning:#E08600;--vx-warning-bg:#FCF0DA;--vx-warning-text:#8A5300;
  --vx-danger:#E0342B;--vx-danger-bg:#FCEAE9;--vx-danger-text:#9C201A;
  --vx-info:#2D6CDF;--vx-info-bg:#E9F0FD;--vx-info-text:#1B4699;
  /* Semantic roles — light-first (dark swaps below) */
  --vx-bg:var(--vx-neutral-50);--vx-surface:var(--vx-neutral-0);--vx-surface-2:var(--vx-neutral-25);--vx-border:var(--vx-neutral-200);--vx-border-strong:var(--vx-neutral-300);--vx-text:#2C2F34;--vx-text-2:var(--vx-neutral-700);--vx-text-3:var(--vx-neutral-500);--vx-primary:var(--vx-brand-500);--vx-primary-hover:var(--vx-brand-600);--vx-on-primary:#FFFFFF;--vx-focus-ring:0 0 0 3px rgba(254,80,0,.25);
  /* Typography */
  --vx-font-sans:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;--vx-font-display:'Plus Jakarta Sans',var(--vx-font-sans);
  --vx-text-display:1.75rem;--vx-text-h1:1.375rem;--vx-text-h2:1.125rem;--vx-text-h3:1rem;--vx-text-body:.9375rem;--vx-text-sm:.8125rem;--vx-text-xs:.72rem;
  --vx-weight-regular:400;--vx-weight-medium:500;--vx-weight-semibold:600;--vx-leading-body:1.5;--vx-leading-tight:1.2;
  /* Spacing (×4) · radius · elevation · motion */
  --vx-space-1:4px;--vx-space-2:8px;--vx-space-3:12px;--vx-space-4:16px;--vx-space-5:20px;--vx-space-6:24px;--vx-space-8:32px;--vx-space-10:40px;--vx-space-12:48px;
  --vx-radius-sm:8px;--vx-radius-md:10px;--vx-radius-lg:14px;--vx-radius-xl:18px;--vx-radius-pill:999px;
  --vx-shadow-sm:0 1px 2px rgba(20,22,26,.06);--vx-shadow-md:0 4px 16px rgba(20,22,26,.08);--vx-shadow-lg:0 12px 32px rgba(20,22,26,.12);
  --vx-ease:cubic-bezier(.2,.6,.2,1);--vx-dur:160ms;
}
[data-theme="dark"]{--vx-bg:#161719;--vx-surface:#1E2022;--vx-surface-2:#26282B;--vx-border:#313438;--vx-border-strong:#3C4045;--vx-text:#F1F2F3;--vx-text-2:#BFC1C4;--vx-text-3:#8A8D91;--vx-primary-hover:var(--vx-brand-400);--vx-success-bg:#12301F;--vx-warning-bg:#34260A;--vx-danger-bg:#341312;--vx-info-bg:#122039;}
@media (prefers-reduced-motion:reduce){:root{--vx-dur:0ms}}