/* SiliSuite V2 — Liquid Glass + Cloud theme (F-01) */

/* F-01: tokens apply whenever silisuite preset is active (light/dark class irrelevant) */
html[data-theme-preset="silisuite"] {
  color-scheme: dark;
  --ss-bg: #0a0f1e;
  --ss-bg-gradient-end: #1a2a5e;
  --ss-glass-bg: rgba(255, 255, 255, 0.05);
  --ss-glass-border-color: rgba(255, 255, 255, 0.12);
  --ss-glass-blur: blur(16px) saturate(180%);
  --ss-card: rgba(13, 27, 62, 0.6);
  --ss-accent: #4f8ef7;
  --ss-violet: #7b5cf0;
  --ss-emerald: #10b981;
  --ss-success: #34d399;
  --ss-warning: #f59e0b;
  --ss-subtext: #c8d6f0;
  --ss-subtext-hover: #ffffff;
  --ss-motion-fast: 150ms ease-out;
  --ss-motion-base: 200ms ease-out;
  --ss-motion-slow: 250ms ease-out;
  --ss-glass-fallback: rgba(13, 27, 62, 0.92);

  --font-sans: var(--font-sora), system-ui, sans-serif;
  --background: var(--ss-bg);
  --foreground: #e8eef8;
  --card: var(--ss-card);
  --card-foreground: #e8eef8;
  --popover: var(--ss-card);
  --popover-foreground: #e8eef8;
  --primary: var(--ss-accent);
  --primary-foreground: #ffffff;
  --secondary: rgba(255, 255, 255, 0.08);
  --secondary-foreground: #e8eef8;
  --muted: rgba(255, 255, 255, 0.06);
  --muted-foreground: #94a3b8;
  --accent: rgba(79, 142, 247, 0.15);
  --accent-foreground: #e8eef8;
  --destructive: #ef4444;
  --border: rgba(255, 255, 255, 0.12);
  --input: rgba(255, 255, 255, 0.08);
  --ring: var(--ss-accent);
  --sidebar: rgba(13, 27, 62, 0.55);
  --sidebar-foreground: #e8eef8;
  --sidebar-primary: var(--ss-accent);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(255, 255, 255, 0.06);
  --sidebar-accent-foreground: #e8eef8;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-ring: var(--ss-accent);
}

@keyframes ss-cloud-drift-1 {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(24px);
  }
}

@keyframes ss-cloud-drift-2 {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-18px);
  }
}

@layer utilities {
  .ss-glass {
    background: var(--ss-glass-bg);
    border: 1px solid var(--ss-glass-border-color);
    -webkit-backdrop-filter: var(--ss-glass-blur);
    backdrop-filter: var(--ss-glass-blur);
    transition:
      transform var(--ss-motion-fast),
      box-shadow var(--ss-motion-fast),
      border-color var(--ss-motion-fast);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ss-glass {
      background: var(--ss-glass-fallback);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  /* Cards: palette tint rgba(13,27,62,0.6) + glass blur/border per spec */
  .ss-glass-card {
    background: var(--ss-glass-bg);
    background-color: var(--ss-card);
    border: 1px solid var(--ss-glass-border-color);
    -webkit-backdrop-filter: var(--ss-glass-blur);
    backdrop-filter: var(--ss-glass-blur);
    transition:
      transform var(--ss-motion-fast),
      box-shadow var(--ss-motion-slow);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ss-glass-card {
      background: var(--ss-glass-fallback);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  .ss-glass-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }

  .ss-heading {
    font-weight: 700;
  }

  .ss-body {
    font-weight: 400;
  }

  .ss-label {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted-foreground);
  }

  .ss-cta-subtext {
    color: var(--ss-subtext);
    transition: color var(--ss-motion-fast);
  }

  .group:hover .ss-cta-subtext,
  .group:focus-visible .ss-cta-subtext,
  .ss-cta-subtext-trigger:hover .ss-cta-subtext,
  .ss-cta-subtext-trigger:focus-visible .ss-cta-subtext {
    color: var(--ss-subtext-hover);
  }
}

html[data-theme-preset="silisuite"] [data-slot="card"] {
  background: var(--ss-glass-bg) !important;
  background-color: var(--ss-card) !important;
  border: 1px solid var(--ss-glass-border-color) !important;
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
  box-shadow: none;
  --tw-ring-shadow: 0 0 #0000;
  transition:
    transform var(--ss-motion-fast),
    box-shadow var(--ss-motion-fast);
}

html[data-theme-preset="silisuite"] [data-slot="card"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

html[data-theme-preset="silisuite"] [data-slot="sheet-content"],
html[data-theme-preset="silisuite"] [data-slot="dialog-content"],
html[data-theme-preset="silisuite"] [data-slot="alert-dialog-content"],
html[data-theme-preset="silisuite"] [data-slot="dropdown-menu-content"],
html[data-theme-preset="silisuite"] [data-slot="popover-content"],
html[data-theme-preset="silisuite"] [data-slot="select-content"],
html[data-theme-preset="silisuite"] [data-slot="command"],
html[data-theme-preset="silisuite"] [data-slot="command-dialog"] [data-slot="dialog-content"] {
  background: var(--ss-card) !important;
  border: 1px solid var(--ss-glass-border-color);
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
}

html[data-theme-preset="silisuite"] [data-slot="command-input-wrapper"] {
  border-bottom: 1px solid var(--ss-glass-border-color);
}

html[data-theme-preset="silisuite"] [data-slot="sidebar-inner"],
html[data-theme-preset="silisuite"] [data-slot="sidebar"] {
  background: var(--sidebar) !important;
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
  border-color: var(--sidebar-border);
}

html[data-theme-preset="silisuite"] input,
html[data-theme-preset="silisuite"] textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--ss-glass-border-color);
  color: #e8eef8;
}

html[data-theme-preset="silisuite"] body,
html[data-theme-preset="silisuite"] p,
html[data-theme-preset="silisuite"] .ss-body {
  font-weight: 400;
}

html[data-theme-preset="silisuite"] h1,
html[data-theme-preset="silisuite"] h2,
html[data-theme-preset="silisuite"] h3,
html[data-theme-preset="silisuite"] h4,
html[data-theme-preset="silisuite"] [data-slot="card-title"] {
  font-weight: 700;
}

/* Staff/client chrome headers — full glass spec (blur 16px saturate 180%) */
html[data-theme-preset="silisuite"] [data-slot="sidebar-inset"] > header,
html[data-theme-preset="silisuite"] .ss-chrome-header {
  background: var(--ss-glass-bg) !important;
  border-bottom: 1px solid var(--ss-glass-border-color) !important;
  -webkit-backdrop-filter: var(--ss-glass-blur) !important;
  backdrop-filter: var(--ss-glass-blur) !important;
}

html[data-theme-preset="silisuite"] [data-slot="card-footer"],
html[data-theme-preset="silisuite"] [data-slot="dialog-footer"],
html[data-theme-preset="silisuite"] [data-slot="sheet-footer"],
html[data-theme-preset="silisuite"] [data-slot="alert-dialog-footer"] {
  background: var(--ss-glass-bg) !important;
  border-color: var(--ss-glass-border-color) !important;
}

html[data-theme-preset="silisuite"] [data-slot="dropdown-menu-sub-content"] {
  background: var(--ss-card) !important;
  border: 1px solid var(--ss-glass-border-color);
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
}

html[data-theme-preset="silisuite"] [data-slot="dialog-overlay"],
html[data-theme-preset="silisuite"] [data-slot="sheet-overlay"] {
  background: rgba(10, 15, 30, 0.55) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

html[data-theme-preset="silisuite"] [data-state="open"][data-slot="dialog-content"],
html[data-theme-preset="silisuite"] [data-state="open"][data-slot="sheet-content"] {
  animation: ss-modal-in var(--ss-motion-base) ease-out forwards;
}

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

/* Labels — spec letter-spacing 0.08em on form/section labels */
html[data-theme-preset="silisuite"] label[data-slot="label"],
html[data-theme-preset="silisuite"] [data-slot="label"] {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Tables inside glass surfaces */
html[data-theme-preset="silisuite"] [data-slot="table-row"]:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme-preset="silisuite"] .ss-table-shell {
  background: var(--ss-glass-bg);
  background-color: var(--ss-card);
  border: 1px solid var(--ss-glass-border-color);
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
  border-radius: 0.75rem;
  overflow: hidden;
}

html[data-theme-preset="silisuite"] kbd {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--ss-glass-border-color) !important;
  color: #e8eef8;
}

html[data-theme-preset="silisuite"] [data-slot="tabs-list"].ss-glass,
html[data-theme-preset="silisuite"] [data-slot="tabs-list"]:not([class*="bg-"]) {
  background: var(--ss-glass-bg) !important;
  border: 1px solid var(--ss-glass-border-color);
  -webkit-backdrop-filter: var(--ss-glass-blur);
  backdrop-filter: var(--ss-glass-blur);
}

/* Legacy muted panels → translucent on silisuite routes */
html[data-theme-preset="silisuite"] .bg-muted,
html[data-theme-preset="silisuite"] .bg-muted\/30,
html[data-theme-preset="silisuite"] .bg-muted\/40,
html[data-theme-preset="silisuite"] .bg-muted\/50 {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme-preset="silisuite"] .hover\:bg-muted\/30:hover,
html[data-theme-preset="silisuite"] .hover\:bg-muted\/40:hover,
html[data-theme-preset="silisuite"] .hover\:bg-muted\/50:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme-preset="silisuite"] [data-slot="card-footer"] {
  background: rgba(255, 255, 255, 0.04) !important;
}