/*
 * Apple Design System
 * Loaded last so its tokens override both Tailwind builds.
 *
 * Palette refs (light / dark):
 *   blue  — Apple accent (#0071e3 / #0a84ff)
 *   gray  — Apple neutrals (#f5f5f7 … #1d1d1f)
 *   slate — Apple neutrals (kept in sync with gray)
 */

/* ------------------------------------------------------------------ *
 * 1. Design tokens (override Tailwind v4 + TailAdmin theme variables)
 * ------------------------------------------------------------------ */
:root {
  /* Accent — Apple blue */
  --color-blue-50:  #eef6ff;
  --color-blue-100: #d9ebff;
  --color-blue-200: #b5d8ff;
  --color-blue-300: #86c0ff;
  --color-blue-400: #4d9fff;
  --color-blue-500: #0a84ff;
  --color-blue-600: #0071e3;
  --color-blue-700: #0061c3;
  --color-blue-800: #0051a4;
  --color-blue-900: #003d7a;
  --color-blue-950: #002852;

  /* Neutrals — Apple gray */
  --color-gray-50:  #f5f5f7;
  --color-gray-100: #e8e8ed;
  --color-gray-200: #d2d2d7;
  --color-gray-300: #c7c7cc;
  --color-gray-400: #aeaeb2;
  --color-gray-500: #86868b;
  --color-gray-600: #6e6e73;
  --color-gray-700: #48484a;
  --color-gray-800: #333336;
  --color-gray-900: #1d1d1f;
  --color-gray-950: #0f0f11;

  /* Slate — homepage uses slate; keep Apple-neutral */
  --color-slate-50:  #f5f5f7;
  --color-slate-100: #e8e8ed;
  --color-slate-200: #d2d2d7;
  --color-slate-300: #c7c7cc;
  --color-slate-400: #aeaeb2;
  --color-slate-500: #86868b;
  --color-slate-600: #6e6e73;
  --color-slate-700: #48484a;
  --color-slate-800: #333336;
  --color-slate-900: #1d1d1f;
  --color-slate-950: #0f0f11;

  /* Apple semantic tokens */
  --apple-bg: #ffffff;
  --apple-bg-secondary: #f5f5f7;
  --apple-card-bg: #ffffff;
  --apple-text: #1d1d1f;
  --apple-text-secondary: #86868b;
  --apple-accent: #0071e3;
  --apple-accent-hover: #0061c3;
  --apple-border: rgba(0, 0, 0, 0.08);
  --apple-fill: rgba(0, 0, 0, 0.06);

  /* Radius — softer, Apple-like */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;

  /* Elevation — soft layered shadows */
  --apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04);
  --apple-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --apple-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.08);
  --apple-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12);

  /* Motion */
  --apple-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --apple-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --apple-duration: 300ms;
}

.dark {
  /* Accent — Apple dark blue */
  --color-blue-50:  #0a2038;
  --color-blue-100: #0a2a4d;
  --color-blue-200: #0d3a6b;
  --color-blue-300: #13508f;
  --color-blue-400: #5bb0ff;
  --color-blue-500: #3395ff;
  --color-blue-600: #0a84ff;
  --color-blue-700: #0071e3;
  --color-blue-800: #005bb5;
  --color-blue-900: #0b3a66;
  --color-blue-950: #0a2240;

  /* Neutrals — Apple dark */
  --color-gray-50:  #f5f5f7;
  --color-gray-100: #e8e8ed;
  --color-gray-200: #d2d2d7;
  --color-gray-300: #c7c7cc;
  --color-gray-400: #86868b;
  --color-gray-500: #6e6e73;
  --color-gray-600: #48484a;
  --color-gray-700: #3a3a3c;
  --color-gray-800: #1d1d1f;
  --color-gray-900: #000000;
  --color-gray-950: #000000;

  --color-slate-50:  #f5f5f7;
  --color-slate-100: #e8e8ed;
  --color-slate-200: #d2d2d7;
  --color-slate-300: #c7c7cc;
  --color-slate-400: #86868b;
  --color-slate-500: #6e6e73;
  --color-slate-600: #48484a;
  --color-slate-700: #3a3a3c;
  --color-slate-800: #1d1d1f;
  --color-slate-900: #000000;
  --color-slate-950: #000000;

  --apple-bg: #000000;
  --apple-bg-secondary: #1d1d1f;
  --apple-card-bg: #1d1d1f;
  --apple-text: #f5f5f7;
  --apple-text-secondary: #a1a1a6;
  --apple-accent: #0a84ff;
  --apple-accent-hover: #3395ff;
  --apple-border: rgba(255, 255, 255, 0.12);
  --apple-fill: rgba(255, 255, 255, 0.08);

  --apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --apple-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --apple-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --apple-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.65);
}

/* ------------------------------------------------------------------ *
 * 2. Base
 * ------------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Segoe UI", system-ui, -system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

::selection {
  background: color-mix(in srgb, var(--apple-accent) 20%, transparent);
}

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid var(--apple-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar — subtle Apple-style */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* ------------------------------------------------------------------ *
 * 3. Component helpers
 * ------------------------------------------------------------------ */

/* Frosted glass — navbars & overlays */
.apple-glass {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--apple-border);
}
.dark .apple-glass {
  background: rgba(22, 22, 24, 0.72);
}

/* Elevated Apple card */
.apple-card {
  background: var(--apple-card-bg);
  border: 1px solid var(--apple-border);
  border-radius: 1.25rem;
  box-shadow: var(--apple-shadow-md);
}

/* Pill button */
.apple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.625rem 1.5rem;
  border-radius: 980px;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: transform var(--apple-duration) var(--apple-ease),
    box-shadow var(--apple-duration) var(--apple-ease),
    background-color var(--apple-duration) var(--apple-ease),
    color var(--apple-duration) var(--apple-ease);
}
.apple-btn:active {
  transform: scale(0.97);
}

.apple-btn-primary {
  background: var(--apple-accent);
  color: #fff;
}
.apple-btn-primary:hover {
  background: var(--apple-accent-hover);
}

.apple-btn-secondary {
  background: transparent;
  color: var(--apple-accent);
  box-shadow: inset 0 0 0 1.5px var(--apple-accent);
}
.apple-btn-secondary:hover {
  background: var(--apple-accent);
  color: #fff;
}

.apple-btn-ghost {
  background: var(--apple-fill);
  color: var(--apple-text);
}
.apple-btn-ghost:hover {
  background: color-mix(in srgb, var(--apple-fill) 80%, var(--apple-text));
}

/* Hero gradient headline */
.apple-gradient-text {
  background: linear-gradient(
    100deg,
    var(--apple-accent) 0%,
    color-mix(in srgb, var(--apple-accent) 40%, #8ec2ff) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Entrance animation */
@keyframes apple-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.apple-animate-in {
  animation: apple-fade-in-up 0.7s var(--apple-ease-out) both;
}
.apple-animate-in-1 { animation-delay: 0.05s; }
.apple-animate-in-2 { animation-delay: 0.15s; }
.apple-animate-in-3 { animation-delay: 0.25s; }
.apple-animate-in-4 { animation-delay: 0.35s; }

/* ------------------------------------------------------------------ *
 * 3b. Dark-mode readability fallbacks
 * Views that omit dark: text/bg still stay contrast-safe.
 * Tailwind dark: utilities still win when they are more specific.
 * ------------------------------------------------------------------ */
.dark {
  color-scheme: dark;
}

.dark body {
  color: var(--apple-text);
}

.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700 {
  color: #f5f5f7;
}

.dark .text-gray-600,
.dark .text-gray-500,
.dark .text-slate-600,
.dark .text-slate-500 {
  color: #d2d2d7;
}

.dark .text-gray-400,
.dark .text-slate-400 {
  color: #a1a1a6;
}

.dark .placeholder-gray-500::placeholder,
.dark .placeholder-gray-400::placeholder {
  color: #86868b;
}

/* Light mode: gray-400 token is too faint for captions */
.text-gray-400,
.text-slate-400 {
  color: #6e6e73;
}

.dark .bg-white {
  background-color: var(--apple-card-bg);
}

.dark .bg-gray-50,
.dark .bg-slate-50 {
  background-color: #000000;
}

.dark .bg-gray-100,
.dark .bg-slate-100 {
  background-color: #1d1d1f;
}

.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: rgba(255, 255, 255, 0.12);
}

.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.12);
}

.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.dark textarea,
.dark select {
  color: #f5f5f7;
  background-color: #1d1d1f;
  border-color: rgba(255, 255, 255, 0.16);
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #86868b;
}

.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.dark .hover\:text-gray-900:hover,
.dark .hover\:text-gray-800:hover {
  color: #ffffff;
}

.dark .text-blue-600 {
  color: #5bb0ff;
}

.dark .text-blue-700 {
  color: #8ec2ff;
}

.dark .bg-blue-50,
.dark .bg-blue-100 {
  background-color: rgba(10, 132, 255, 0.22);
}

.dark .bg-green-50,
.dark .bg-green-100 {
  background-color: rgba(52, 211, 153, 0.18);
}

.dark .bg-red-50,
.dark .bg-red-100 {
  background-color: rgba(255, 107, 107, 0.16);
}

.dark .hover\:text-blue-700:hover,
.dark .hover\:text-blue-600:hover {
  color: #8ec2ff;
}

.dark .text-red-600 {
  color: #ff6b6b;
}

.dark .text-red-700,
.dark .text-red-800 {
  color: #fca5a5;
}

.dark .text-green-600,
.dark .text-green-700,
.dark .text-green-800 {
  color: #34d399;
}

.dark .text-amber-700,
.dark .text-amber-800,
.dark .text-yellow-800 {
  color: #fcd34d;
}

.dark thead {
  color: #d2d2d7;
}

button.bg-red-600,
input[type="submit"].bg-red-600,
input[type="button"].bg-red-600 {
  background-color: #dc2626;
  color: #ffffff;
}

.dark button.bg-red-600,
.dark input[type="submit"].bg-red-600,
.dark input[type="button"].bg-red-600 {
  background-color: #e11d48;
  color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * 4. Accessibility
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}