/* ==========================================================================
   SeikoVision Japan / Visiocare Optics Spain
   Accessible, Minimalist Japanese Medical Optical Aesthetics
   Compliant with WCAG 2.1 AA/AAA & European Accessibility Act
   ========================================================================== */

/* --- Custom Properties & Typography Roots --- */
:root {
  --font-base: 16px;
  --color-brand-blue: #0f4c81;
  --color-brand-blue-hover: #0a365c;
  --color-brand-navy: #091e3a;
  --color-brand-teal: #0d9488;
  --color-brand-slate: #334155;
  --color-border-subtle: #e2e8f0;
  --color-bg-page: #f8fafc;
  --color-surface: #ffffff;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --focus-ring-color: #0284c7;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}

html {
  font-size: var(--font-base);
  scroll-behavior: smooth;
  color-scheme: light;
}

/* Font Scale Levels */
html.font-scale-sm {
  --font-base: 14px;
}
html.font-scale-md {
  --font-base: 16px;
}
html.font-scale-lg {
  --font-base: 18px;
}
html.font-scale-xl {
  --font-base: 20px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- High Visibility Focus Indicator (WCAG 2.4.7 / 2.4.11) --- */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
  border-radius: 4px;
}

/* --- Skip to Main Content Link (WCAG 2.4.1) --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background-color: #091e3a;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  z-index: 9999;
  border-radius: 0 0 0.5rem 0.5rem;
  transition: top 0.2s ease-in-out;
  text-decoration: underline;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #ffd700 !important;
}

/* --- Touch Targets (WCAG 2.5.5 / 2.5.8 Minimum 48x48px) --- */
.min-touch-target {
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- High Contrast Mode (WCAG 2.1 AAA - Strict Black, Yellow, White) --- */
html.contrast-high {
  color-scheme: dark;
  --color-bg-page: #000000;
  --color-surface: #0a0a0a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #fef08a;
  --focus-ring-color: #ffd700;
}

html.contrast-high body {
  background-color: #000000 !important;
  color: #ffffff !important;
}

html.contrast-high header,
html.contrast-high nav,
html.contrast-high main,
html.contrast-high section,
html.contrast-high footer,
html.contrast-high aside,
html.contrast-high article,
html.contrast-high div,
html.contrast-high dialog,
html.contrast-high .bg-white,
html.contrast-high .bg-slate-50,
html.contrast-high .bg-slate-100,
html.contrast-high .bg-blue-50,
html.contrast-high .bg-blue-900,
html.contrast-high .bg-indigo-900,
html.contrast-high .bg-sky-50 {
  background-color: #000000 !important;
  color: #ffffff !important;
}

html.contrast-high .border,
html.contrast-high .border-t,
html.contrast-high .border-b,
html.contrast-high .border-l,
html.contrast-high .border-r,
html.contrast-high .border-slate-200,
html.contrast-high .border-slate-300,
html.contrast-high .border-slate-100,
html.contrast-high .divide-slate-200 {
  border-color: #ffd700 !important;
}

html.contrast-high a,
html.contrast-high .text-blue-600,
html.contrast-high .text-blue-700,
html.contrast-high .text-sky-600,
html.contrast-high .text-sky-700,
html.contrast-high .text-teal-600 {
  color: #ffd700 !important;
  text-decoration: underline !important;
}

html.contrast-high .text-slate-500,
html.contrast-high .text-slate-600,
html.contrast-high .text-slate-700,
html.contrast-high .text-gray-500,
html.contrast-high .text-gray-600 {
  color: #ffffff !important;
}

html.contrast-high button,
html.contrast-high input,
html.contrast-high select,
html.contrast-high textarea {
  border: 2px solid #ffd700 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

html.contrast-high .bg-blue-600,
html.contrast-high .bg-blue-700,
html.contrast-high .bg-navy-900,
html.contrast-high .btn-primary {
  background-color: #ffd700 !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border: 2px solid #ffffff !important;
}

html.contrast-high .badge-contrast {
  background-color: #ffd700 !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}

html.contrast-high .bg-amber-50,
html.contrast-high .bg-emerald-50,
html.contrast-high .bg-blue-50 {
  border: 2px solid #ffd700 !important;
}

html.contrast-high svg {
  stroke: currentColor;
}

/* --- Institutional Trust & Japanese Minimalist Card Aesthetics --- */
.card-optical {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
}

.card-optical:hover {
  border-color: #0f4c81;
  box-shadow: 0 4px 12px -2px rgba(15, 76, 129, 0.12);
}

.jis-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
}

.ce-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
}

/* Prevent auto-zoom on iOS Safari */
input, select, textarea {
  font-size: 16px !important;
}

/* Screen reader announcer utility */
.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;
}

/* Drawer transitions */
.drawer-backdrop {
  transition: opacity 0.3s ease-out;
}

.drawer-panel {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}