@import "tailwindcss";

/* Dark variant definition */
@variant dark (&:where(.dark, .dark *));

@theme {
  /* Custom colors */
  --color-zinc-850: #1d1d20;

  /* Semantic color tokens - Light mode defaults */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f4f4f5;
  --color-surface: #ffffff;
  --color-surface-secondary: #fafafa;
  --color-border: #e4e4e7;
  --color-border-subtle: #f4f4f5;
  --color-text-primary: #18181b;
  --color-text-secondary: #52525b;
  --color-text-tertiary: #71717a;

  /* Custom font sizes */
  --font-size-10xl: 10rem;

  /* Drop shadows */
  --drop-shadow-extreme: 0 0 50px black;

  /* Font families */
  --font-inter: "Inter Variable", sans-serif;
  --font-hanken: "Hanken Grotesk", sans-serif;
  --font-schibsted: "Schibsted Grotesk Variable", sans-serif;

  /* Background images */
  --background-image-gradient-radial: radial-gradient(
    50% 50% at 50% 50%,
    var(--tw-gradient-stops)
  );

  /* Admin colors - Light mode defaults */
  --color-admin-bg: #f9fafb;
  --color-admin-bg-secondary: #ffffff;
  --color-admin-surface: #ffffff;
  --color-admin-surface-hover: #f3f4f6;
  --color-admin-border: #e5e7eb;
  --color-admin-border-hover: #d1d5db;
  --color-admin-text: #111827;
  --color-admin-text-secondary: #4b5563;
  --color-admin-text-muted: #6b7280;
  --color-admin-accent: #6366f1;
  --color-admin-accent-hover: #818cf8;
}

/* Dark mode overrides */
.dark {
  --color-bg-primary: #000000;
  --color-bg-secondary: #09090b;
  --color-surface: #18181b;
  --color-surface-secondary: #27272a;
  --color-border: #27272a;
  --color-border-subtle: #18181b;
  --color-text-primary: #fafafa;
  --color-text-secondary: #d4d4d8;
  --color-text-tertiary: #a1a1aa;

  /* Admin colors - Dark mode overrides */
  --color-admin-bg: #0a0a0b;
  --color-admin-bg-secondary: #18181b;
  --color-admin-surface: #27272a;
  --color-admin-surface-hover: #3f3f46;
  --color-admin-border: #27272a;
  --color-admin-border-hover: #3f3f46;
  --color-admin-text: #fafafa;
  --color-admin-text-secondary: #a1a1aa;
  --color-admin-text-muted: #71717a;
}

html,
body {
  @apply font-inter overflow-x-hidden;
  color: var(--color-text-primary);
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

body {
  @apply h-full;
  background-color: var(--color-bg-primary);
}

/* Smooth theme transitions for all elements */
*:not(canvas):not([class*="animate-"]) {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

/* Elements with explicit transition classes should extend, not replace */
[class*="transition-colors"],
[class*="transition-all"] {
  transition-duration: 0.3s !important;
}

html:not(.dark) {
  .os-scrollbar {
    --os-handle-bg: rgba(0, 0, 0, 0.25) !important;
    --os-handle-bg-hover: rgba(0, 0, 0, 0.35) !important;
    --os-handle-bg-active: rgba(0, 0, 0, 0.45) !important;
  }
}

html.dark {
  .os-scrollbar {
    --os-handle-bg: rgba(255, 255, 255, 0.35) !important;
    --os-handle-bg-hover: rgba(255, 255, 255, 0.45) !important;
    --os-handle-bg-active: rgba(255, 255, 255, 0.55) !important;
  }
}

.os-scrollbar-handle {
  border-radius: 4px;
}

/* Utility class for page main wrapper */
.page-main {
  @apply relative min-h-screen text-zinc-900 dark:text-zinc-50 transition-colors duration-300;
}

/* View Transitions API - page transition animations */

/* Persistent elements (background with dots, theme toggle) - excluded from transition */
/* Hide old snapshots entirely so only the live element shows (prevents doubling/ghosting) */
::view-transition-old(background),
::view-transition-old(theme-toggle) {
  display: none;
}

::view-transition-new(background),
::view-transition-new(theme-toggle) {
  animation: none;
}

/* Page content transition - Material Design shared axis pattern */
@keyframes vt-slide-to-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-20px);
    opacity: 0;
  }
}

@keyframes vt-slide-from-right {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Only animate page content, not root (persistent UI stays static) */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-old(page-content) {
  animation: vt-slide-to-left 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(page-content) {
  animation: vt-slide-from-right 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
