/* ─────────────────────────────────────────────
   Design Tokens — Ported from @lola/ui
   Defines all CSS variables for the Orbit design system.
   These are referenced by Tailwind CSS 4 via @theme inline.
   ───────────────────────────────────────────── */

:root {
  /* Colors — Semantic palette (light mode defaults) */

  /* Primary — Violet */
  --color-primary: rgb(139 92 246);
  --color-primary-foreground: rgb(255 255 255);
  --color-primary-hover: rgb(124 58 237);
  --color-primary-active: rgb(109 40 217);
  --color-primary-subtle: rgb(139 92 246 / 0.1);

  /* Secondary — Slate */
  --color-secondary: rgb(100 116 139);
  --color-secondary-foreground: rgb(255 255 255);
  --color-secondary-hover: rgb(71 85 105);
  --color-secondary-active: rgb(51 65 85);
  --color-secondary-subtle: rgb(100 116 139 / 0.1);

  /* Destructive — Red */
  --color-destructive: rgb(239 68 68);
  --color-destructive-foreground: rgb(255 255 255);
  --color-destructive-hover: rgb(220 38 38);
  --color-destructive-active: rgb(185 28 28);
  --color-destructive-subtle: rgb(239 68 68 / 0.1);

  /* Warning — Amber */
  --color-warning: rgb(245 158 11);
  --color-warning-foreground: rgb(255 255 255);
  --color-warning-hover: rgb(217 119 6);
  --color-warning-active: rgb(180 83 9);
  --color-warning-subtle: rgb(245 158 11 / 0.1);

  /* Success — Emerald */
  --color-success: rgb(16 185 129);
  --color-success-foreground: rgb(255 255 255);
  --color-success-hover: rgb(5 150 105);
  --color-success-active: rgb(4 120 87);
  --color-success-subtle: rgb(16 185 129 / 0.1);

  /* Muted */
  --color-muted: rgb(245 243 240);
  --color-muted-foreground: rgb(108 102 95);

  /* Accent — Cyan */
  --color-accent: rgb(6 182 212);
  --color-accent-foreground: rgb(255 255 255);
  --color-accent-hover: rgb(8 145 178);
  --color-accent-active: rgb(14 116 144);
  --color-accent-subtle: rgb(6 182 212 / 0.1);

  /* Surfaces */
  --color-background: rgb(252 251 249);
  --color-foreground: rgb(24 22 18);
  --color-card: rgb(255 255 255);
  --color-card-foreground: rgb(24 22 18);
  --color-border: rgb(232 228 222);
  --color-input: rgb(232 228 222);
  --color-ring: rgb(139 92 246);

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Z-index scale */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 200;
  --z-popover: 300;
  --z-toast: 400;

  /* Typography — Font families */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;

  /* Animation — Easing curves */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Animation — Durations */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
}

/* ─────────────────────────────────────────────
   Dark mode overrides
   ───────────────────────────────────────────── */

.dark input,
.dark textarea,
.dark select,
.dark option {
  color: var(--color-foreground);
}

.dark select,
.dark option {
  background-color: var(--color-card);
}

.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.dark {
  --color-primary: rgb(167 139 250);
  --color-primary-foreground: rgb(10 10 14);
  --color-primary-hover: rgb(139 92 246);
  --color-primary-active: rgb(124 58 237);
  --color-primary-subtle: rgb(139 92 246 / 0.15);

  --color-secondary: rgb(160 170 185);
  --color-secondary-foreground: rgb(10 10 14);
  --color-secondary-hover: rgb(120 130 145);
  --color-secondary-active: rgb(90 100 115);
  --color-secondary-subtle: rgb(120 130 145 / 0.15);

  --color-destructive: rgb(248 113 113);
  --color-destructive-foreground: rgb(10 10 14);
  --color-destructive-hover: rgb(239 68 68);
  --color-destructive-active: rgb(220 38 38);
  --color-destructive-subtle: rgb(239 68 68 / 0.15);

  --color-warning: rgb(251 191 36);
  --color-warning-foreground: rgb(10 10 14);
  --color-warning-hover: rgb(245 158 11);
  --color-warning-active: rgb(217 119 6);
  --color-warning-subtle: rgb(245 158 11 / 0.15);

  --color-success: rgb(52 211 153);
  --color-success-foreground: rgb(10 10 14);
  --color-success-hover: rgb(16 185 129);
  --color-success-active: rgb(5 150 105);
  --color-success-subtle: rgb(16 185 129 / 0.15);

  --color-muted: rgb(28 26 22);
  --color-muted-foreground: rgb(165 160 152);

  --color-accent: rgb(34 211 238);
  --color-accent-foreground: rgb(10 10 14);
  --color-accent-hover: rgb(6 182 212);
  --color-accent-active: rgb(8 145 178);
  --color-accent-subtle: rgb(6 182 212 / 0.15);

  --color-background: rgb(14 13 12);
  --color-foreground: rgb(242 240 237);
  --color-card: rgb(22 20 18);
  --color-card-foreground: rgb(242 240 237);
  --color-border: rgb(45 42 38);
  --color-input: rgb(38 36 32);
  --color-ring: rgb(167 139 250);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

/* ─────────────────────────────────────────────
   Keyframe animations
   ───────────────────────────────────────────── */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slide-in-up {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-down {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  50% { opacity: 0.5; }
}