ACVE/app/globals.css

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

:root {
  /* ACVE core variables */
  --acve-brand: #98143f;
  --acve-brand-strong: #7c1033;
  --acve-brand-soft: #f7e8eb;
  --acve-ink: #2f2931;
  --acve-muted: #655e66;
  --acve-line: #d8cec2;
  --acve-panel: #fffaf3;
  --acve-panel-strong: #fffdf9;
  --acve-shell-bg: linear-gradient(180deg, #faf4ea 0%, #f4ebde 100%);
  --acve-body-bg: radial-gradient(circle at top right, #fff8ef 0%, #f8efe3 52%, #f2e7d9 100%);
  --acve-heading-font: "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --acve-body-font: "Segoe UI", "Trebuchet MS", "Verdana", sans-serif;
  --acve-space-1: 4px;
  --acve-space-2: 8px;
  --acve-space-3: 12px;
  --acve-space-4: 16px;
  --acve-space-5: 24px;
  --acve-space-6: 32px;
  --acve-space-7: 48px;

  /* SHADCN mapping */
  --background: 36 45% 95%;
  --foreground: 330 10% 18%;
  --primary: 341 77% 34%;
  --primary-foreground: 0 0% 100%;
  --card: 34 55% 98%;
  --card-foreground: 330 10% 18%;
  --border: 32 26% 80%;
  --input: 32 26% 80%;
  --ring: 341 77% 34%;
  --secondary: 28 37% 90%;
  --secondary-foreground: 330 10% 20%;
  --muted: 30 28% 90%;
  --muted-foreground: 329 8% 41%;
  --accent: 345 53% 94%;
  --accent-foreground: 339 51% 24%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --popover: 34 55% 98%;
  --popover-foreground: 330 10% 18%;
  --radius: 0.95rem;
}

.dark {
  --acve-brand: #bf4069;
  --acve-brand-strong: #c95a7f;
  --acve-brand-soft: #3c1f2d;
  --acve-ink: #ede6e0;
  --acve-muted: #b5aeb6;
  --acve-line: #353847;
  --acve-panel: #171c27;
  --acve-panel-strong: #1b2130;
  --acve-shell-bg: linear-gradient(180deg, #121621 0%, #0f1420 100%);
  --acve-body-bg: radial-gradient(circle at top right, #1f2433 0%, #151a26 54%, #0f131e 100%);

  --background: 222 30% 11%;
  --foreground: 30 25% 92%;
  --primary: 338 53% 51%;
  --primary-foreground: 0 0% 100%;
  --card: 224 26% 15%;
  --card-foreground: 30 25% 92%;
  --border: 225 17% 27%;
  --input: 225 17% 27%;
  --ring: 338 53% 51%;
  --secondary: 224 20% 20%;
  --secondary-foreground: 30 25% 92%;
  --muted: 224 20% 19%;
  --muted-foreground: 225 14% 71%;
  --accent: 336 27% 24%;
  --accent-foreground: 30 25% 92%;
  --destructive: 0 63% 38%;
  --destructive-foreground: 0 0% 100%;
  --popover: 224 26% 15%;
  --popover-foreground: 30 25% 92%;
}

@layer base {
  * {
    @apply border-border;
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--acve-body-bg);
  color: hsl(var(--foreground));
  font-family: var(--acve-body-font);
  font-size: 16px;
  line-height: 1.45;
  text-rendering: geometricPrecision;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button,
input,
select,
textarea,
[role="button"] {
  outline-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--acve-heading-font);
}

::selection {
  background: #f1d9e1;
  color: #3f1020;
}

.dark ::selection {
  background: #5d2e41;
  color: #fff6fa;
}

.acve-shell {
  background: var(--acve-shell-bg);
}

.acve-panel {
  border: 1px solid var(--acve-line);
  background: var(--acve-panel);
  border-radius: 16px;
}

.acve-heading {
  color: var(--acve-brand);
  font-family: var(--acve-heading-font);
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.acve-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--acve-line);
  border-radius: 9999px;
  background: var(--acve-panel-strong);
  color: var(--acve-muted);
  padding: 8px 14px;
  font-size: 0.95rem;
}

.acve-button-primary {
  background: var(--acve-brand);
  color: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--acve-brand);
  min-height: 44px;
}

.acve-button-secondary {
  border: 1px solid var(--acve-brand);
  color: var(--acve-brand);
  background: var(--acve-panel-strong);
  border-radius: 12px;
  min-height: 44px;
}

.acve-page {
  display: flex;
  flex-direction: column;
  gap: var(--acve-space-5);
}

.acve-section-tight {
  padding: var(--acve-space-4);
}

.acve-section-base {
  padding: var(--acve-space-5);
}

.acve-scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.acve-scrollbar-none::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (min-width: 768px) {
  .acve-page {
    gap: var(--acve-space-6);
  }
}

/* Dark-mode compatibility layer for legacy light-only utility classes */
.dark .bg-white,
.dark .bg-white\/70,
.dark .bg-white\/80,
.dark .bg-white\/90,
.dark .bg-\[\#faf8f8\],
.dark .bg-\[\#f6f6f8\] {
  background-color: hsl(var(--card)) !important;
}

.dark .bg-slate-50,
.dark .bg-slate-50\/40,
.dark .bg-slate-50\/50,
.dark .bg-slate-50\/80,
.dark .bg-slate-100,
.dark .bg-slate-200 {
  background-color: hsl(var(--muted)) !important;
}

.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .border-slate-400,
.dark .border-gray-200 {
  border-color: hsl(var(--border)) !important;
}

.dark .text-black,
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700 {
  color: hsl(var(--foreground)) !important;
}

.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-slate-400 {
  color: hsl(var(--muted-foreground)) !important;
}

.dark [class*="text-[#1"],
.dark [class*="text-[#2"],
.dark [class*="text-[#3"],
.dark [class*="text-[#0"] {
  color: hsl(var(--foreground)) !important;
}