/*
Theme Name: Naturals Spa & Salon (Packaged)
Theme URI: https://example.com/
Author: Your Name
Description: WordPress theme packaged from the project — Naturals Spa & Salon.
Version: 1.0
Text Domain: naturals-spa
*/

/* Imported project styles (original theme CSS follows) */
/* Tailwind is loaded via CDN script in functions.php */

:root {
  --background: oklch(0.98 0.001 70);
  --foreground: oklch(0.2 0.01 280);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.01 280);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.01 280);
  --primary: rgb(103,44,115);
  --primary-foreground: #ffffff;
  --secondary: oklch(0.95 0.05 280);
  --secondary-foreground: oklch(0.55 0.23 280);
  --muted: oklch(0.92 0.01 280);
  --muted-foreground: oklch(0.45 0.05 280);
  --accent: oklch(0.58 0.25 285);
  --accent-foreground: oklch(0.98 0.001 70);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.01 280);
  --input: oklch(0.95 0.01 280);
  --ring: oklch(0.55 0.23 280);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.2 0.01 280);
  --foreground: oklch(0.98 0.001 70);
  --card: oklch(0.25 0.01 280);
  --card-foreground: oklch(0.98 0.001 70);
  --popover: oklch(0.25 0.01 280);
  --popover-foreground: oklch(0.98 0.001 70);
  --primary: rgb(103 44 115);
  --primary-foreground: #ffffff;
  --secondary: oklch(0.35 0.05 280);
  --secondary-foreground: oklch(0.98 0.001 70);
  --muted: oklch(0.35 0.05 280);
  --muted-foreground: oklch(0.65 0.08 280);
  --accent: oklch(0.75 0.27 295);
  --accent-foreground: oklch(0.15 0.01 280);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.35 0.05 280);
  --input: oklch(0.3 0.05 280);
  --ring: oklch(0.7 0.25 290);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Geist', sans-serif;
}

.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.bg-secondary { background-color: var(--secondary); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.border-border { border-color: var(--border); }
.bg-card { background-color: var(--card); }
.text-card-foreground { color: var(--card-foreground); }

/* Strong overrides for primary color */
.bg-primary { background-color: rgb(103,44,115) !important; }
.text-primary { color: rgb(103,44,115) !important; }
.text-primary-foreground { color: #ffffff !important; }
.border-primary { border-color: rgb(103,44,115) !important; }

/* Force primary (replace blue) for common utility classes and links */
:root {
  --primary: rgb(103,44,115);
}

a, a:link, a:visited, a:hover, a:active {
  color: rgb(103,44,115) !important;
}

/* Common Tailwind-like blue utility overrides */
.text-blue-50, .text-blue-100, .text-blue-200, .text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900,
.bg-blue-50, .bg-blue-100, .bg-blue-200, .bg-blue-300, .bg-blue-400, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900,
.border-blue-50, .border-blue-100, .border-blue-200, .border-blue-300, .border-blue-400, .border-blue-500, .border-blue-600, .border-blue-700, .border-blue-800, .border-blue-900,
.ring-blue-50, .ring-blue-100, .ring-blue-200, .ring-blue-300, .ring-blue-400, .ring-blue-500, .ring-blue-600, .ring-blue-700, .ring-blue-800, .ring-blue-900 {
  color: var(--primary) !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Buttons and links */
.btn-primary, .button-primary, .btn--primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* Navbar: force link color to white for better visibility */
/* Navbar: force link color to white for better visibility (nav only) */
nav.sticky {
  color: inherit;
}
nav.sticky a, nav.sticky a:link, nav.sticky a:visited, nav.sticky a:hover, nav.sticky .mobile-menu a {
  color: #fff !important;
}
nav.sticky .menu-icon, nav.sticky .close-icon {
  color: #fff !important;
}

/* Hero: only change font color inside hero */
.site-hero, .site-hero * {
  color: #fff !important;
}
.site-hero a, .site-hero a:link, .site-hero a:visited, .site-hero a:hover {
  color: #fff !important;
}