@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --font-heading: ui-sans-serif, system-ui, sans-serif;
    --font-body: ui-sans-serif, system-ui, sans-serif;
    --font-display: ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}



@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-[#05080d] text-slate-100 font-body;
  }
}

@layer components {
  .studio-shell { @apply flex min-h-screen bg-[#0a0a0c] text-slate-200; background-image: radial-gradient(circle at 80% -5%, rgba(0,170,200,.12), transparent 34%), linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size:auto,40px 40px,40px 40px; }
  .studio-shell.light-studio { filter: saturate(.85) brightness(1.2); }
  .glass-panel { @apply rounded-xl border border-white/[.07] bg-[#121418]/80 shadow-[0_18px_50px_rgba(0,0,0,.25)] backdrop-blur-xl; }
  .icon-button { @apply grid h-8 w-8 place-items-center rounded-md text-slate-500 transition hover:bg-cyan-400/10 hover:text-cyan-300; }
  .icon-button svg { @apply h-4 w-4; }
  .studio-input { @apply h-9 rounded-md border border-white/[.08] bg-black/30 px-3 text-xs text-white outline-none transition placeholder:text-slate-600 focus:border-cyan-400/50; }
  .studio-input option { @apply bg-slate-900; }
  .primary-button { @apply inline-flex h-8 items-center gap-2 rounded-md bg-cyan-400 px-3 text-[11px] font-semibold text-slate-950 transition hover:bg-cyan-300; }
  .primary-button svg { @apply h-3.5 w-3.5; }
  .secondary-button { @apply inline-flex h-8 items-center gap-2 rounded-md border border-white/10 px-3 text-[11px] text-slate-400 transition hover:text-white; }
  .nav-tab { @apply flex h-9 items-center gap-2 rounded-md px-3 text-[11px] font-medium uppercase tracking-wider transition; }
  .nav-tab svg { @apply h-3.5 w-3.5; }
  .glow-dot { @apply h-1.5 w-1.5 rounded-full bg-cyan-400 shadow-[0_0_8px_#00f2ff]; }
}

* { scrollbar-width: thin; scrollbar-color: #1e3a4a transparent; }
/* SHiRE embedded-module mode */
.shire-embedded {
  min-height: 100%;
  height: 100%;
}
.shire-embedded footer {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
