/* SiteIQ — Design Refinement
   Loaded after the Tailwind bundle. Targets font, colour, polish.
   No structural changes — layout is untouched. */

/* ── Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  --siq-bg:           #0B0D13;
  --siq-panel:        #10131C;
  --siq-panel-raised: #13172200;
  --siq-border:       rgba(255,255,255,0.07);
  --siq-border-hi:    rgba(255,255,255,0.13);
  --siq-accent:       #8B5CF6;
  --siq-accent-dim:   rgba(139,92,246,0.18);
  --siq-accent-glow:  rgba(139,92,246,0.30);
  --siq-teal:         #2DD4BF;
  --siq-text:         #ECF0FA;
  --siq-muted:        #7C849E;
  --siq-muted-hi:     #A0A9C2;
  --font-sans:        'Figtree', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ── Base rendering ─────────────────────────────────────────────── */
html, :host {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility;
}

body {
  background-color: #f8fafc !important;
  color: #1e293b !important;
}

code, kbd, pre, samp,
[class*="font-mono"], [class*="monospace"] {
  font-family: var(--font-mono) !important;
  font-size: 0.8125em;
  letter-spacing: -0.01em;
}

/* ── Background overrides — remap dark tokens to light ──────────── */
.bg-siteiq-bg              { background-color: #f8fafc !important; }
.bg-siteiq-panel           { background-color: #ffffff !important; }
.bg-siteiq-bg\/70          { background-color: rgba(248,250,252,0.9) !important; }
.bg-siteiq-line            { background-color: #e2e8f0 !important; }
.bg-siteiq-accent\/10      { background-color: rgba(124,58,237,0.08) !important; }
.border-siteiq-line        { border-color: #e2e8f0 !important; }
.divide-siteiq-line > * + * { border-color: #e2e8f0 !important; }

/* ── Text — remap dark-theme tokens to readable slate ───────────── */
.text-siteiq-text, .text-siteiq-text\/90 { color: #1e293b !important; }
.text-siteiq-muted         { color: #64748b !important; }
.text-siteiq-muted\/50     { color: #94a3b8 !important; }
.text-siteiq-accent        { color: #7C3AED !important; }

/* Dark-on-dark text patterns — lift to readable slate */
.card .text-white           { color: #1e293b !important; }
.card [class*="text-white"] { color: #1e293b !important; }
.card .text-brand-violet-soft { color: #7C3AED !important; }
.card .group-hover\:text-white:hover { color: #7C3AED !important; }

/* ── Card — force light theme on all remaining dark cards ──────── */
.card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #1e293b !important;
}

.card-hover {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

.card-hover:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-ghost, .btn-danger {
  border-radius: 5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 60%, #9D6CF8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.4),
    0 4px 16px rgba(139,92,246,0.3),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  color: #fff !important;
}

.btn-primary:hover {
  filter: none !important;
  background: linear-gradient(135deg, #8B5CF6 0%, #9D6CF8 60%, #A78BFA 100%) !important;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.5),
    0 6px 20px rgba(139,92,246,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.btn-ghost {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: var(--siq-border) !important;
  color: var(--siq-text) !important;
}

.btn-ghost:hover {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: var(--siq-border-hi) !important;
}

.btn-danger {
  background-color: rgba(127,29,29,0.35) !important;
  border-color: rgba(239,68,68,0.25) !important;
  color: #FCA5A5 !important;
}

.btn-danger:hover {
  background-color: rgba(127,29,29,0.55) !important;
  border-color: rgba(239,68,68,0.4) !important;
}

/* ── Input ──────────────────────────────────────────────────────── */
.input {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: var(--siq-border) !important;
  color: var(--siq-text) !important;
  border-radius: 5px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.input::placeholder {
  color: var(--siq-muted) !important;
  opacity: 1 !important;
}

.input:focus {
  border-color: rgba(139,92,246,0.55) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.12) !important;
  outline: none !important;
  background-color: rgba(255,255,255,0.055) !important;
}

/* ── Section title ──────────────────────────────────────────────── */
.section-title {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: var(--siq-muted) !important;
  text-transform: uppercase !important;
}

/* ── Chip / badge ───────────────────────────────────────────────── */
.chip {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border-radius: 3px !important;
}

/* ── Dark box readability fix (e.g. site cards, bg-black elements) ─ */
.bg-black, .bg-slate-800, .bg-slate-900 {
  background-color: #1A1E2B !important;
  color: var(--siq-text) !important;
}

/* Ensure text inside dark containers is always readable */
.bg-black *,
.bg-slate-800 *,
.bg-slate-900 * {
  color: var(--siq-text);
}

/* Site card name / label text — force readable contrast */
.bg-black .text-white,
.bg-black [class*="text-"],
.bg-slate-800 [class*="text-"],
.bg-slate-900 [class*="text-"] {
  color: var(--siq-text) !important;
}

/* ── Surface grid: subtler ──────────────────────────────────────── */
.surface-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

/* ── Gradients: punchier ────────────────────────────────────────── */
.bg-gradient-brand {
  background-image: linear-gradient(135deg, #7C3AED, #8B5CF6, #2DD4BF) !important;
}
.bg-gradient-brand-soft {
  background-image: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(45,212,191,0.22)) !important;
}

/* ── Borders ────────────────────────────────────────────────────── */
.border-siteiq-line { border-color: var(--siq-border) !important; }
.border-siteiq-accent { border-color: rgba(139,92,246,0.5) !important; }

/* ── Scrollbar ──────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}

/* ── Selection ──────────────────────────────────────────────────── */
::selection {
  background: rgba(139,92,246,0.3);
  color: #fff;
}

/* ── Focus ring (accessibility) ─────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(139,92,246,0.6) !important;
  outline-offset: 2px !important;
}

/* ── Table refinement ───────────────────────────────────────────── */
table { border-collapse: collapse; }

thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--siq-muted) !important;
}

/* ── Transitions: system-wide consistency ───────────────────────── */
a, button, [role=button] {
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease, opacity 0.15s ease !important;
}

/* ── Headings: tighter tracking ─────────────────────────────────── */
h1, h2, h3, h4 {
  letter-spacing: -0.025em;
  font-weight: 600;
}
h1 { letter-spacing: -0.035em; }

/* ── Flatten rounded corners globally ──────────────────────────── */
/* Tailwind rounded-xl / rounded-2xl / rounded-3xl → sharp */
[class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"] {
  border-radius: 6px !important;
}
[class*="rounded-lg"] {
  border-radius: 5px !important;
}
[class*="rounded-md"] {
  border-radius: 4px !important;
}
/* Full pills (rounded-full) stay full on icon buttons / avatars only —
   on anything wider than 48px snap to 6px */
[class*="rounded-full"]:not([class*="w-6"]):not([class*="w-8"]):not([class*="w-10"]):not([class*="w-12"]):not([class*="h-6"]):not([class*="h-8"]):not([class*="h-10"]):not([class*="h-12"]) {
  border-radius: 5px !important;
}

/* ── Modals: better backdrop ────────────────────────────────────── */
[class*="fixed"][class*="inset-0"][class*="bg-black"] {
  background-color: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}