@import url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic.css');
@import 'tailwindcss';

@theme {
  --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-script: 'Pacifico', cursive;
  --font-dyslexic: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

html[data-font-size='large'] {
  font-size: 18px;
}

html[data-font-size='xlarge'] {
  font-size: 20px;
}

/* Dyslexic Font Overrides */
html[data-dyslexic='true'],
html[data-dyslexic='true'] body,
html[data-dyslexic='true'] *,
html[data-dyslexic='true'] *::before,
html[data-dyslexic='true'] *::after {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', sans-serif !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.1em !important;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  transition:
    background 0.4s ease,
    color 0.4s ease;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Theme: Embrace (default — mirrors embracehomecare.com.au) */
[data-theme='embrace'] {
  --color-primary: #5b21b6;
  --color-primary-hover: #4c1d95;
  --color-secondary: #ea580c;
  --color-accent: #db2777;
  --color-bg: #faf8ff;
  --color-bg-alt: #ffffff;
  --color-surface: #ffffff;
  --color-text: #1e1b4b;
  --color-muted: #64748b;
  --color-border: #e9e5f5;
  --color-topbar: #5b21b6;
  --color-hero-gradient: linear-gradient(135deg, #faf8ff 0%, #fff7ed 50%, #fdf2f8 100%);
  --color-glass-card: rgba(255, 255, 255, 0.85);
}

[data-theme='light'] {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-secondary: #0ea5e9;
  --color-accent: #6366f1;
  --color-bg: #f8fafc;
  --color-bg-alt: #ffffff;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-topbar: #1e40af;
  --color-hero-gradient: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  --color-glass-card: rgba(255, 255, 255, 0.88);
}

[data-theme='dark'] {
  --color-primary: #a78bfa;
  --color-primary-hover: #8b5cf6;
  --color-secondary: #fb923c;
  --color-accent: #f472b6;
  --color-bg: #0f0f14;
  --color-bg-alt: #16161d;
  --color-surface: #1c1c26;
  --color-text: #f1f5f9;
  --color-muted: #94a3b8;
  --color-border: #2e2e3a;
  --color-topbar: #1c1c26;
  --color-hero-gradient: linear-gradient(135deg, #0f0f14 0%, #1a1525 50%, #14101a 100%);
  --color-glass-card: rgba(28, 28, 38, 0.85);
}

[data-theme='ocean'] {
  --color-primary: #0d9488;
  --color-primary-hover: #0f766e;
  --color-secondary: #0891b2;
  --color-accent: #f43f5e;
  --color-bg: #f0fdfa;
  --color-bg-alt: #ffffff;
  --color-surface: #ffffff;
  --color-text: #134e4a;
  --color-muted: #64748b;
  --color-border: #ccfbf1;
  --color-topbar: #115e59;
  --color-hero-gradient: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 50%, #fff1f2 100%);
  --color-glass-card: rgba(255, 255, 255, 0.85);
}

/* High Contrast Overrides */
html[data-high-contrast='true'] {
  --color-primary: #000000 !important;
  --color-primary-hover: #111111 !important;
  --color-secondary: #0000cc !important;
  --color-accent: #b91c1c !important;
  --color-bg: #ffffff !important;
  --color-bg-alt: #f1f5f9 !important;
  --color-surface: #ffffff !important;
  --color-text: #000000 !important;
  --color-muted: #000000 !important;
  --color-border: #000000 !important;
  --color-topbar: #000000 !important;
  filter: contrast(125%);
}

html[data-high-contrast='true'] * {
  border-color: #000000 !important;
}

html[data-high-contrast='true'] body,
html[data-high-contrast='true'] div,
html[data-high-contrast='true'] p,
html[data-high-contrast='true'] span,
html[data-high-contrast='true'] h1,
html[data-high-contrast='true'] h2,
html[data-high-contrast='true'] h3,
html[data-high-contrast='true'] h4,
html[data-high-contrast='true'] h5,
html[data-high-contrast='true'] h6 {
  color: #000000 !important;
}

html[data-high-contrast='true'] button {
  border: 2px solid #000000 !important;
}

@layer utilities {
  .text-primary {
    color: var(--color-primary);
  }
  .text-secondary {
    color: var(--color-secondary);
  }
  .text-muted {
    color: var(--color-muted);
  }
  .bg-theme {
    background: var(--color-bg);
  }
  .bg-surface {
    background: var(--color-surface);
  }
  .bg-primary {
    background: var(--color-primary);
  }
  .border-theme {
    border-color: var(--color-border);
  }
  .glass-panel {
    background: var(--color-glass-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

::selection {
  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* Scrollbar refinement */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px color-mix(in srgb, var(--color-primary) 20%, transparent);
  }
  50% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary) 45%, transparent);
  }
}

.animate-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-line {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-primary) 25%, transparent),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}