/* ============================================================
   VitrinaAI — Design Tokens
   Primary: violet/purple. Dark-first. Brazilian Portuguese SaaS.
   Source: vitrine-ai (Tailwind config in _Layout.cshtml)
   ============================================================ */

:root {
  /* ── PRIMARY (violet) ─────────────────────────────────────── */
  --primary-50:  #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;  /* default action */
  --primary-700: #6d28d9;  /* hover, default workspace color */
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;

  /* ── BACKGROUNDS (dark-first) ─────────────────────────────── */
  --bg-light:        #f8f6f6;  /* light theme page bg */
  --bg-dark:         #000000;  /* deepest dark surface */
  --bg-app:          #050208;  /* app shell behind glow */
  --bg-vitrine:      #0a0612;  /* chat / vitrine canvas */
  --bg-vitrine-2:    #0F0A19;  /* vitrine input fields */
  --bg-sidebar-top:  #06020D;  /* sidebar gradient top */
  --bg-sidebar-btm:  #0B0418;  /* sidebar gradient bottom */
  --bg-active-pill:  #16042B;  /* active sidebar item bg */
  --surface-dark:    #0a0a0a;  /* card image bg */
  --surface-modal:   #110826;  /* dark modal */

  /* ── NEUTRALS — gray scale (Tailwind gray-*) ──────────────── */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;  /* input border */
  --gray-800: #1f2937;  /* card border, secondary button */
  --gray-900: #111827;  /* card surface */
  --gray-950: #030712;  /* page bg dark */

  /* ── NEUTRALS — slate (Tailwind slate-*) used for light theme */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* ── SEMANTIC ─────────────────────────────────────────────── */
  --success:        #22c55e;  /* online dot, "Liberado" gradient end */
  --success-light:  #4ade80;
  --success-bg:     rgba(34, 197, 94, 0.10);
  --success-border: rgba(34, 197, 94, 0.20);

  --warning:        #facc15;  /* "Rascunho" / drafts */
  --warning-bg:     rgba(250, 204, 21, 0.10);

  --danger:         #dc2626;  /* destructive / logout */
  --danger-light:   #f87171;
  --danger-bg:      rgba(220, 38, 38, 0.30);
  --danger-border:  rgba(153, 27, 27, 0.50);

  --info:           #3b82f6;
  --emerald-400:    #34d399;  /* "Liberado" gradient start */
  --emerald-500:    #10b981;
  --emerald-600:    #059669;

  /* ── FOREGROUND (semantic) ────────────────────────────────── */
  /* Dark theme defaults (the product is dark-first). */
  --fg-1: #ffffff;          /* headings on dark */
  --fg-2: #e5e7eb;          /* body on dark */
  --fg-3: #9ca3af;          /* secondary text */
  --fg-4: #6b7280;          /* tertiary / metadata */
  --fg-5: rgba(255,255,255,0.40);  /* sidebar idle */
  --fg-muted: rgba(255,255,255,0.30);

  --fg-on-primary: #ffffff;
  --fg-link: var(--primary-400);
  --fg-accent: var(--primary-300);

  /* ── BORDERS ──────────────────────────────────────────────── */
  --border-1: rgba(255, 255, 255, 0.05);  /* hairline (vitrine) */
  --border-2: rgba(255, 255, 255, 0.10);  /* card / modal */
  --border-3: rgba(255, 255, 255, 0.20);  /* hover emphasis */
  --border-card-dark: var(--gray-800);
  --border-input-dark: var(--gray-700);

  /* ── RADII ────────────────────────────────────────────────── */
  --radius-sm: 6px;     /* badges, pills, code */
  --radius-md: 8px;     /* small buttons */
  --radius-lg: 12px;    /* default buttons, inputs (rounded-xl) */
  --radius-xl: 16px;    /* cards, modals (rounded-2xl) */
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── SHADOWS / GLOWS ──────────────────────────────────────── */
  --shadow-sm:   0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-2xl:  0 25px 50px -12px rgba(0,0,0,0.40);

  /* Signature glows — used on hero + CTA buttons */
  --glow-purple:        0 0 120px 40px rgba(139, 92, 246, 0.15);
  --glow-purple-button: 0 10px 25px -5px rgba(76, 29, 149, 0.30);
  --glow-emerald:       0 1px 2px 0 rgba(20, 83, 45, 0.20);

  /* Ambient radial used on storefront + app home */
  --ambient-glow: radial-gradient(circle at 50% 0%,
      rgba(139, 92, 246, 0.08) 0%, transparent 50%);

  /* ── GRADIENTS (hero + brand) ─────────────────────────────── */
  --gradient-primary:    linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
  --gradient-primary-r:  linear-gradient(to right, #7c3aed, #8b5cf6);
  --gradient-violet-tx:  linear-gradient(to right, #a78bfa, #8b5cf6);  /* text gradient */
  --gradient-success:    linear-gradient(to right, #4ade80, #22c55e);  /* "Liberado" badge */
  --gradient-sidebar:    linear-gradient(to bottom, #06020D, #0B0418);
  --gradient-hero-fade:  linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0.85) 100%);
  --gradient-card-overlay: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);

  /* ── SPACING (Tailwind scale, used) ───────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --navbar-height: 64px;
  --sidebar-width: 256px;       /* w-64, admin */
  --sidebar-width-wide: 260px;  /* vitrine / storefront / finalUser */
  --content-max: 1024px;        /* max-w-5xl admin pages */

  /* ── TRANSITIONS ──────────────────────────────────────────── */
  --transition-base: 150ms ease;
  --transition-soft: 200ms ease;
  --transition-slow: 500ms ease;

  /* ════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ──────────────────────────────────────────────────────────── */
  --font-display: "Public Sans", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans:    var(--font-display);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco,
                  "Cascadia Mono", "Roboto Mono", monospace;
  --font-icon:    "Material Symbols Outlined";

  /* Type scale (Tailwind defaults — pinned to the codebase usage) */
  --text-2xs: 10px;   /* badge labels — uppercase */
  --text-xs:  12px;   /* metadata, breadcrumbs, sidebar hints */
  --text-sm:  14px;   /* body small, default UI */
  --text-base: 16px;  /* body default */
  --text-lg:   18px;  /* card titles, agent name */
  --text-xl:   20px;  /* page titles small (h2 minor) */
  --text-2xl:  24px;  /* h1 admin pages */
  --text-3xl:  30px;  /* dashboard stat numbers */
  --text-4xl:  36px;  /* hero h1 small */
  --text-5xl:  48px;  /* hero h1 mid */
  --text-6xl:  60px;  /* hero h1 lg */

  /* Weights — display uses 700/800/900 generously */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;
  --weight-black:    900;

  /* Line heights */
  --lh-none:    1;
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;

  /* Letter spacing (tight tracking on display, wide on uppercase) */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
  --tracking-hero:    0.3em;   /* "Featured Agent" eyebrows */
}

/* ════════════════════════════════════════════════════════════
   SEMANTIC TYPE STYLES
   The product mostly uses Tailwind utility classes, but the
   recurring patterns are codified here for design-system use.
   ──────────────────────────────────────────────────────────── */

html, body {
  font-family: var(--font-display);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--fg-2);
  background: var(--gray-950);
}

/* Hero — the storefront banner heading */
.h-hero {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: var(--weight-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-1);
}

/* h1 — page heading (dashboard, admin, app home) */
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* h2 — section title (cards, marketplace rows) */
.h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* h3 — sub-section / category row */
.h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
}

/* Stat number — dashboard cards */
.stat {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
  line-height: var(--lh-none);
}

/* Body */
.body {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.body-lg {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body-muted {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

/* Eyebrow / label uppercase  — section starters */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--primary-400);
}

/* Badge label — uppercase 10px (Liberado / Lock price) */
.badge-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Metadata / breadcrumb / "online" */
.meta {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--fg-3);
}

/* Code / inline code (chat markdown) */
code, .code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

/* The signature gradient text — "agentes com IA" / hero title splits */
.text-gradient-violet {
  background: var(--gradient-violet-tx);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Ambient glow utility (used over hero + page backgrounds) */
.bg-ambient-purple {
  background: var(--ambient-glow);
}

/* Reusable card surface — admin / dashboard / modal */
.card-dark {
  background: var(--gray-900);
  border: 1px solid var(--gray-800);
  border-radius: var(--radius-xl);
}

/* Reusable button — primary CTA */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  background: var(--primary-600);
  color: var(--fg-on-primary);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background var(--transition-base);
}
.btn-primary:hover { background: var(--primary-700); }