/*
 * SkifPro Brand Theme
 *
 * Color tokens extracted from skif.pro wiki reference design.
 * Must be loaded AFTER shadcn/base to override CSS custom properties.
 */

:root {
  /* Brand primary: #2b7ff2 → HSL(215 88% 56%) */
  --primary: 215 88% 56%;
  --primary-foreground: 0 0% 100%;

  /* Background: #f4f6fb */
  --background: 225 33% 97%;
  --foreground: 225 25% 14%;

  /* Card: #ffffff */
  --card: 0 0% 100%;
  --card-foreground: 225 25% 14%;

  /* Popover */
  --popover: 0 0% 100%;
  --popover-foreground: 225 25% 14%;

  /* Muted: dim=#5c6478, bg=#eef0f5 */
  --muted: 220 15% 95%;
  --muted-foreground: 224 12% 42%;

  /* Accent: soft blue tint */
  --accent: 217 80% 96%;
  --accent-foreground: 215 50% 20%;

  /* Border: #dfe4ee */
  --border: 222 24% 90%;
  --input: 222 24% 90%;

  /* Focus ring */
  --ring: 215 88% 56%;

  /* Destructive */
  --destructive: 0 65% 50%;
  --destructive-foreground: 0 0% 100%;

  /* Secondary */
  --secondary: 215 30% 95%;
  --secondary-foreground: 215 50% 20%;

  /* Sidebar */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 225 25% 14%;
  --sidebar-primary: 215 88% 56%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-ring: 215 88% 56%;
  --sidebar-accent: 217 80% 96%;
  --sidebar-accent-foreground: 215 50% 20%;
  --sidebar-border: 222 24% 90%;

  /* Radius: 14px */
  --radius: 0.875rem;
}

.dark {
  /* Brand primary: #388eff → HSL(214 100% 61%) */
  --primary: 214 100% 61%;
  --primary-foreground: 0 0% 100%;

  /* Background: #090c14 → HSL(224 38% 6%) */
  --background: 224 38% 6%;
  --foreground: 221 32% 92%;

  /* Card: #141927 → HSL(224 32% 12%) */
  --card: 224 32% 12%;
  --card-foreground: 221 32% 92%;

  /* Popover */
  --popover: 224 32% 12%;
  --popover-foreground: 221 32% 92%;

  /* Muted: #0f1320 (raised bg), dim=#7c849a */
  --muted: 226 36% 9%;
  --muted-foreground: 224 13% 55%;

  /* Accent: #191f33 card-hover */
  --accent: 226 34% 15%;
  --accent-foreground: 214 80% 85%;

  /* Border: #1e2640 → HSL(226 36% 18%) */
  --border: 226 36% 18%;
  --input: 226 36% 18%;

  /* Focus ring */
  --ring: 214 100% 61%;

  /* Destructive */
  --destructive: 0 65% 45%;
  --destructive-foreground: 0 0% 100%;

  /* Secondary */
  --secondary: 226 36% 9%;
  --secondary-foreground: 214 80% 85%;

  /* Sidebar */
  --sidebar-background: 224 38% 6%;
  --sidebar-foreground: 221 32% 92%;
  --sidebar-primary: 214 100% 61%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-ring: 214 100% 61%;
  --sidebar-accent: 226 34% 15%;
  --sidebar-accent-foreground: 214 80% 85%;
  --sidebar-border: 226 36% 18%;
}

/* ---- Login split-screen ---- */
.login-gradient {
  background: linear-gradient(135deg, hsl(215 88% 56%) 0%, hsl(224 60% 22%) 100%);
}
.dark .login-gradient {
  background: linear-gradient(135deg, hsl(224 38% 12%) 0%, hsl(214 60% 18%) 50%, hsl(224 38% 6%) 100%);
}

.login-pattern {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.dark .login-pattern {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---- Global typographic refinements ---- */
body {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Card hover transitions (ref: skif.pro wiki) ---- */
.shadcn-card,
[data-shadcn-card] {
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.shadcn-card:hover,
[data-shadcn-card]:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.dark .shadcn-card:hover,
.dark [data-shadcn-card]:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

/* ---- Focus ring style ---- */
*:focus-visible {
  box-shadow: 0 0 0 3px rgba(43, 127, 242, 0.12);
}
.dark *:focus-visible {
  box-shadow: 0 0 0 3px rgba(56, 142, 255, 0.15);
}

/* ---- Glassmorphism topbar ---- */
.topbar-glass {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  /* Light: rgba(244,246,251,0.88) */
  background-color: rgba(244, 246, 251, 0.88);
  border-bottom: 1px solid hsl(222 24% 90%);
}
.dark .topbar-glass {
  /* Dark: rgba(9,12,20,0.85) */
  background-color: rgba(9, 12, 20, 0.85);
  border-bottom: 1px solid hsl(226 36% 18%);
}