/* ============================================================
   PULSE Design System — delade tokens (2026-08-08)
   Extraherad från production/index.html (Baltazars v3-tokens).
   ÄNDRA HÄR, inte i production/index.html — production/index.html
   ska på sikt importera den här filen i stället för att duplicera
   variablerna. Tre produkter (B2B, Booking, Employee) länkar hit
   så de aldrig glider isär visuellt.
   Light: EDE3CF/241E17/7A5C3A/C7A979/C3834C
   Dark:  102326/F7EBD8/C7A979/3A6871/C3834C
   ============================================================ */

:root {
  /* ---- LIGHT (default) ---- */
  --background: #E7DFD9;
  --foreground: #2C2926;
  --surface: #EFE9E3;
  --surfaceElevated: #F4EFE9;
  --primary: #8C6F58;
  --primaryHover: #765C48;
  --primaryForeground: #F7F3EF;
  --secondary: #DCCEB3;
  --secondaryHover: #CBB98E;
  --secondaryForeground: #2C2926;
  --accent: #8C6F58;
  --accentHover: #765C48;
  --accentForeground: #F7F3EF;
  --border: #CBC3BF;
  --borderSubtle: #D8D1CB;
  --muted: #DCCEB3;
  --mutedForeground: #635D56;
  --subtleForeground: #8A8178;

  --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);

  --success-bg: #D4D5CA; --success-tx: #3D5C47;
  --warning-bg: #E6D7C5; --warning-tx: #7A5530;
  --danger-bg:  #DDCCC8; --danger-tx:  #6D3038;

  --shadow: 0 1px 2px rgba(44,41,38,0.04), 0 4px 16px rgba(44,41,38,0.05);
  --shadow-lg: 0 8px 40px rgba(44,41,38,0.10);

  /* Phone Mirror: fixed to PULSE-APP's own always-dark look, not swapped by
     the B2B light/dark theme toggle -- a phone screenshot doesn't change
     because the dashboard theme changed. This is the real source of truth
     (production/index.html links this file; its own inline copy of these
     two tokens is dead/shadowed and was fixed to match, 2026-08-27). */
  --phone-bezel: #111114;
  --phone-screen: #0A0A0C;
  --app-card: #18181C;
  --app-card-border: rgba(255,255,255,0.07);
  --app-text: #F5F5F5;
  --app-text-secondary: #9B9BA1;
  --app-divider: rgba(255,255,255,0.08);
  --app-accent-green: #1DB954;
  --app-accent-purple: #6C38CC;

  --bg: var(--background);
  --bg-warm: var(--surface);
  --surface-2: var(--surfaceElevated);
  --surface-hover: var(--muted);
  --tint: var(--muted);
  --text: var(--foreground);
  --text-2: var(--mutedForeground);
  --text-3: var(--subtleForeground);
  --border-soft: var(--borderSubtle);
  --accent-hover: var(--accentHover);
  --accent-text: var(--accentForeground);
}

[data-theme="dark"], :root.dark {
  --background: #102326;
  --foreground: #F7EBD8;
  --surface: #183238;
  --surfaceElevated: #213F45;
  --primary: #C7A979;
  --primaryHover: #D6BC90;
  --primaryForeground: #241E17;
  --secondary: #3A6871;
  --secondaryHover: #477A84;
  --secondaryForeground: #F7EBD8;
  --accent: #C3834C;
  --accentHover: #D2955F;
  --accentForeground: #241E17;
  --border: #3E6268;
  --borderSubtle: #2A464C;
  --muted: #1D3A40;
  --mutedForeground: #C7B9A3;
  --subtleForeground: #8E806E;

  --success-bg: #22463C; --success-tx: #BCE3C4;
  --warning-bg: #453F2A; --warning-tx: #EACF9C;
  --danger-bg:  #432C2B; --danger-tx:  #EAB3AB;

  --shadow: 0 1px 2px rgba(0,0,0,0.22), 0 4px 20px rgba(0,0,0,0.28);
  --shadow-lg: 0 14px 52px rgba(0,0,0,0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: "Times New Roman", Times, serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s ease, color 0.5s ease;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

.hidden { display: none !important; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }