/* MAJARAH MANAGEMENT — supplemental styles beyond Tailwind utilities */

/* ===== Theme tokens (light default) ===== */
:root {
  color-scheme: light;

  --cream-50:  255 255 255;
  --cream-100: 250 246 239;
  --cream-200: 242 234 218;
  --cream-300: 233 221 195;

  --ink-900: 28 23 18;
  --ink-800: 34 29 24;
  --ink-700: 58 50 42;
  --ink-600: 91 81 71;
  --ink-500: 122 111 99;
  --ink-400: 156 145 134;
  --ink-300: 189 179 166;

  --gold-50:  251 246 236;
  --gold-100: 243 231 201;
  --gold-200: 233 214 163;
  --gold-300: 223 197 125;
  --gold-400: 210 174 92;
  --gold-500: 192 154 69;
  --gold-600: 164 126 55;
  --gold-700: 138 103 46;

  --crimson-50:  252 238 236;
  --crimson-100: 247 217 212;
  --crimson-200: 239 179 169;
  --crimson-300: 226 140 126;
  --crimson-400: 208 106 90;
  --crimson-500: 189 78 61;
  --crimson-600: 158 62 48;
  --crimson-700: 127 50 38;

  --shadow-o-card: 0.12;
}

/* System preference, used only until the visitor picks explicitly (see [data-theme] below, which always wins) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --cream-50:  17 23 38;
    --cream-100: 11 15 25;
    --cream-200: 13 18 32;
    --cream-300: 20 27 46;

    --ink-900: 245 243 240;
    --ink-800: 235 230 222;
    --ink-700: 205 197 186;
    --ink-600: 176 167 155;
    --ink-500: 150 141 129;
    --ink-400: 118 110 100;
    --ink-300: 90 83 74;

    --gold-50:  36 29 18;
    --gold-100: 45 37 22;
    --gold-200: 233 214 163;
    --gold-300: 223 197 125;
    --gold-400: 210 174 92;
    --gold-500: 192 154 69;
    --gold-600: 210 174 92;
    --gold-700: 192 154 69;

    --crimson-50:  42 24 20;
    --crimson-100: 247 217 212;
    --crimson-200: 239 179 169;
    --crimson-300: 226 140 126;
    --crimson-400: 208 106 90;
    --crimson-500: 189 78 61;
    --crimson-600: 158 62 48;
    --crimson-700: 127 50 38;

    --shadow-o-card: 0.5;
  }
}

/* Explicit user choice via the toggle — always wins over system preference */
:root[data-theme="dark"] {
  color-scheme: dark;

  --cream-50:  17 23 38;
  --cream-100: 11 15 25;
  --cream-200: 13 18 32;
  --cream-300: 20 27 46;

  --ink-900: 245 243 240;
  --ink-800: 235 230 222;
  --ink-700: 205 197 186;
  --ink-600: 176 167 155;
  --ink-500: 150 141 129;
  --ink-400: 118 110 100;
  --ink-300: 90 83 74;

  --gold-50:  36 29 18;
  --gold-100: 45 37 22;
  --gold-200: 233 214 163;
  --gold-300: 223 197 125;
  --gold-400: 210 174 92;
  --gold-500: 192 154 69;
  --gold-600: 210 174 92;
  --gold-700: 192 154 69;

  --crimson-50:  42 24 20;
  --crimson-100: 247 217 212;
  --crimson-200: 239 179 169;
  --crimson-300: 226 140 126;
  --crimson-400: 208 106 90;
  --crimson-500: 189 78 61;
  --crimson-600: 158 62 48;
  --crimson-700: 127 50 38;

  --shadow-o-card: 0.5;
}

:root[data-theme="light"] {
  color-scheme: light;

  --cream-50:  255 255 255;
  --cream-100: 250 246 239;
  --cream-200: 242 234 218;
  --cream-300: 233 221 195;

  --ink-900: 28 23 18;
  --ink-800: 34 29 24;
  --ink-700: 58 50 42;
  --ink-600: 91 81 71;
  --ink-500: 122 111 99;
  --ink-400: 156 145 134;
  --ink-300: 189 179 166;

  --gold-50:  251 246 236;
  --gold-100: 243 231 201;
  --gold-200: 233 214 163;
  --gold-300: 223 197 125;
  --gold-400: 210 174 92;
  --gold-500: 192 154 69;
  --gold-600: 164 126 55;
  --gold-700: 138 103 46;

  --crimson-50:  252 238 236;
  --crimson-100: 247 217 212;
  --crimson-200: 239 179 169;
  --crimson-300: 226 140 126;
  --crimson-400: 208 106 90;
  --crimson-500: 189 78 61;
  --crimson-600: 158 62 48;
  --crimson-700: 127 50 38;

  --shadow-o-card: 0.12;
}

/* Smooth color transition when the theme toggle flips */
body,
header,
[class*="bg-"],
[class*="border-"] {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "kern" 1;
}

/* Native <button> elements default to an arrow cursor in most browsers, unlike <a> tags */
button:not(:disabled),
[role="button"] {
  cursor: pointer;
}

/* Visually hidden but still announced by screen readers */
.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;
}

/* Fade-up entrance animation staggering for hero (Tailwind animate-fade-up handles the base) */
.animate-fade-up {
  opacity: 0;
  animation-delay: 0.05s;
}

/* Brand mark: orbiting rings + twinkling star (logo icon, header + footer) */
@keyframes brandRing1 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes brandRing2 {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes brandTwinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.brand-ring-1 {
  transform-origin: 12px 12px;
  animation: brandRing1 9s linear infinite;
}
.brand-ring-2 {
  transform-origin: 12px 12px;
  animation: brandRing2 12s linear infinite;
}
.brand-star {
  animation: brandTwinkle 2.6s ease-in-out infinite;
}

/* Custom scrollbar — warm cream track, gold thumb */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgb(var(--cream-200));
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--gold-400));
  border-radius: 999px;
  border: 2px solid rgb(var(--cream-200));
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--gold-600));
}

/* Language switch active state */
[data-lang-btn].is-active {
  background: linear-gradient(90deg, rgb(var(--gold-500)), rgb(var(--gold-600)));
  color: rgb(var(--cream-50));
}
[data-lang-btn]:not(.is-active) {
  color: rgb(var(--ink-400));
}
[data-lang-btn]:not(.is-active):hover {
  color: rgb(var(--ink-900));
}

/* Select element: hide default arrow so the custom SVG arrow (set inline via Tailwind bg-image) shows cleanly */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
}
select option {
  background-color: rgb(var(--cream-100));
  color: rgb(var(--ink-900));
}

/* Smooth cross-fade whenever translated text swaps */
[data-i18n],
[data-i18n-placeholder] {
  transition: opacity 0.15s ease;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Focus visibility for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgb(var(--crimson-500));
  outline-offset: 2px;
}