/* Semantic tokens */
:root {
  --color-bg: 250 249 247;
  --color-fg: 26 24 21;
  --color-card: 255 255 255;
  --color-border: 229 225 216;
  --color-muted: 242 240 236;
  --color-muted-fg: 125 118 106;
  --color-ring: 251 86 7;
}
.dark {
  --color-bg: 15 13 11;
  --color-fg: 250 249 247;
  --color-card: 26 24 21;
  --color-border: 43 40 34;
  --color-muted: 43 40 34;
  --color-muted-fg: 168 160 146;
  --color-ring: 255 122 51;
}

html { scroll-behavior: smooth; }
body {
  background-color: rgb(var(--color-bg));
  color: rgb(var(--color-fg));
  transition: background-color .25s ease, color .25s ease;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--color-border)); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #FB5607; }

::selection { background: #FB5607; color: #fff; }

:focus-visible {
  outline: 2px solid rgb(var(--color-ring));
  outline-offset: 2px;
}

.bg-gradient-animated {
  background-size: 300% 300%;
  animation: gradient-shift 6s ease infinite;
}
.glass {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
}
.dark .glass {
  background: rgba(26,24,21,0.6);
  border: 1px solid rgba(255,255,255,0.08);
}
.shimmer-loading {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%),
    linear-gradient(rgb(var(--color-muted)), rgb(var(--color-muted)));
  background-size: 200% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.6s infinite;
}