/**
 * Theme Utility Classes
 * 
 * This file contains CSS utility classes for our theme system
 * that work well with Tailwind and Shadcn UI.
 */

/* Background color utilities */

.bg-theme-default { background-color: var(--background); }

.bg-theme-paper { background-color: var(--card); }

.bg-theme-subtle { background-color: var(--muted); }

.bg-theme-card { background-color: var(--card); }

/* Text color utilities */

.text-theme-primary { color: var(--foreground); }

.text-theme-secondary { color: var(--muted-foreground); }

.text-theme-disabled { color: var(--muted-foreground); }

.text-theme-highlight { color: var(--primary); }

/* Border color utilities */

.border-theme-divider { border-color: var(--border); }

/* Hover variants */

.hover\:bg-theme-default:hover { background-color: var(--background); }

.hover\:bg-theme-paper:hover { background-color: var(--card); }

.hover\:bg-theme-subtle:hover { background-color: var(--muted); }

.hover\:bg-theme-card:hover { background-color: var(--card); }

.hover\:text-theme-primary:hover { color: var(--foreground); }

.hover\:text-theme-secondary:hover { color: var(--muted-foreground); }

.hover\:text-theme-highlight:hover { color: var(--primary); }

/* Focus variants */

.focus\:bg-theme-default:focus { background-color: var(--background); }

.focus\:bg-theme-paper:focus { background-color: var(--card); }

.focus\:bg-theme-subtle:focus { background-color: var(--muted); }

.focus\:bg-theme-card:focus { background-color: var(--card); }

/* Active variants */

.active\:bg-theme-default:active { background-color: var(--background); }

.active\:bg-theme-paper:active { background-color: var(--card); }

.active\:bg-theme-subtle:active { background-color: var(--muted); }

.active\:bg-theme-card:active { background-color: var(--card); }

/* Shadcn UI data state classes */

.data-\[state\=open\]\:bg-theme-paper[data-state="open"] { background-color: var(--card); }

.data-\[state\=open\]\:text-theme-primary[data-state="open"] { color: var(--foreground); }

.data-\[active\=true\]\:bg-theme-paper[data-active="true"] { background-color: var(--card); }

.data-\[active\=true\]\:text-theme-primary[data-active="true"] { color: var(--foreground); }

.data-\[active\=true\]\:font-medium[data-active="true"] { font-weight: 500; }

/* Group hover for navigation icons */

.group:hover .group-hover\:rotate-180 { transform: rotate(180deg); }

/* Animation states for UI components */

.data-\[motion\=from-start\]\:animate-in[data-motion="from-start"] { animation-name: slideInFromLeft; }

.data-\[motion\=from-end\]\:animate-in[data-motion="from-end"] { animation-name: slideInFromRight; }

.data-\[motion\=to-start\]\:animate-out[data-motion="to-start"] { animation-name: slideOutToLeft; }

.data-\[motion\=to-end\]\:animate-out[data-motion="to-end"] { animation-name: slideOutToRight; }

.data-\[state\=visible\]\:animate-in[data-state="visible"] { animation-name: fadeIn; }

.data-\[state\=hidden\]\:animate-out[data-state="hidden"] { animation-name: fadeOut; }

.data-\[state\=open\]\:animate-in[data-state="open"] { animation-name: scaleIn; }

.data-\[state\=closed\]\:animate-out[data-state="closed"] { animation-name: scaleOut; }

/* Standard Animation classes */

.animate-in {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

.animate-out {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

/* Custom keyframe animations */

@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutToLeft {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-10px); }
}

@keyframes slideOutToRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(10px); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

/* SF Pro Text utility classes for UI components */

.font-sf-text {
  font-family: var(--font-sf-pro-text);
}

/* Font smoothing */

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text sizes with SF Pro adjustments */

.text-display {
  font-size: 3.5rem;
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 600;
}

.text-heading-1 {
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: -0.021em;
  font-weight: 600;
}

.text-heading-2 {
  font-size: 1.875rem;
  line-height: 1.25;
  letter-spacing: -0.019em;
  font-weight: 600;
}

.text-heading-3 {
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.017em;
  font-weight: 600;
}

.text-title {
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 500;
}

.text-body {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.011em;
}

.text-caption {
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.006em;
  font-family: var(--font-sf-pro-text);
}

.text-footnote {
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: -0.003em;
  font-family: var(--font-sf-pro-text);
}