/* =====================================================================
   DENTIQ DENTAL CLINIC — Stylesheet
   Tailwind CSS (CDN) generates all utility classes from index.html.
   This file holds only what utilities can't express: design tokens,
   base refinements, accessibility rules, and motion preferences.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   Consumed by the Tailwind config in index.html via var(--token, fallback)
   so the palette has a single source of truth.
------------------------------------------------------------------------ */
:root {
  --color-navy: #15233D;
  --color-navy-dark: #0E1726;
  --color-navy-light: #1F3354;
  --color-gold: #C9A268;
  --color-cream: #F7F4EF;
}

/* ---------------------------------------------------------------------
   2. Base / Global Refinements
------------------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
  /* Keeps anchor-linked sections from hiding behind the fixed navbar */
  scroll-padding-top: 5rem;
}

body {
  font-family: 'Inter', sans-serif;
}

::selection {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

/* ---------------------------------------------------------------------
   3. Accessibility — visible keyboard focus
   Tailwind's preflight removes the default outline; this restores a
   clear, on-brand focus ring for keyboard navigation.
------------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
   4. Custom Scrollbar (WebKit + Firefox)
------------------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-cream);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-navy-light);
  border-radius: 999px;
  border: 2px solid var(--color-cream);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-navy-light) var(--color-cream);
}

/* ---------------------------------------------------------------------
   5. Motion Preferences — respect prefers-reduced-motion
   Safety net in addition to the JS-level AOS configuration.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-aos] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}