/* Nexa design tokens — trích nguyên từ Content Auto Pilot (auto.thecare.vn)
 * Dùng chung cho Edit Autopilot để hai app trông cùng một nhà.
 * Xem docs/design-system.md để biết cách dùng từng token.
 * Tailwind v4: nạp file này sau @import "tailwindcss".
 */

:root {
  /* --- Màu thương hiệu --- */
  --nexa-magenta:      oklch(47% .2 352);      /* #B80F5B */
  --nexa-orange:       oklch(75% .16 62);      /* #F7941D */
  --nexa-orange-deep:  oklch(64% .15 58);
  --nexa-ivory:        oklch(98.5% .004 75);
  --nexa-graphite:     oklch(23% .01 55);      /* #302A2A */
  --nexa-warm-gray:    oklch(61% .012 65);     /* #776D73 */

  /* Sắc phái sinh dùng trong gradient và viền */
  --nexa-plum:         #711037;
  --nexa-magenta-deep: #9A0F52;
  --nexa-pink-bright:  #D41970;
  --nexa-plum-darkest: #4C0B2A;
  --nexa-border-card:  #E7DCE3;
  --nexa-border-pink:  #E5A7C4;
  --nexa-border-sidebar: #F1DCE7;
  --nexa-tint-pink:    #FFF1F8;
  --nexa-tint-pink-2:  #FFF2F8;
  --nexa-tint-cream:   #FFF8ED;
  --nexa-tint-sidebar: #FFF9FC;

  /* --- Token ngữ nghĩa (chuẩn shadcn) --- */
  --background:            var(--nexa-ivory);
  --foreground:            var(--nexa-graphite);
  --card:                  oklch(100% 0 0);
  --card-foreground:       var(--nexa-graphite);
  --popover:               oklch(100% 0 0);
  --popover-foreground:    var(--nexa-graphite);
  --primary:               var(--nexa-magenta);
  --primary-foreground:    oklch(100% 0 0);
  --secondary:             oklch(96.5% .022 352);
  --secondary-foreground:  oklch(34% .012 55);
  --muted:                 oklch(95.5% .008 70);
  --muted-foreground:      var(--nexa-warm-gray);
  --accent:                oklch(95% .045 352);
  --accent-foreground:     var(--nexa-graphite);
  --destructive:           oklch(57.7% .245 27.325);
  --destructive-foreground: oklch(98.5% 0 0);
  --border:                oklch(90% .012 70);
  --input:                 oklch(90% .012 70);
  --ring:                  var(--nexa-magenta);
  --radius:                .8rem;

  /* Sidebar */
  --sidebar:                     oklch(99.5% .004 75);
  --sidebar-foreground:          var(--nexa-graphite);
  --sidebar-primary:             var(--nexa-magenta);
  --sidebar-primary-foreground:  oklch(100% 0 0);
  --sidebar-accent:              oklch(95% .045 352);
  --sidebar-accent-foreground:   var(--nexa-graphite);
  --sidebar-border:              oklch(90% .012 70);
  --sidebar-ring:                var(--nexa-magenta);
  --sidebar-width:               16rem;   /* 256px */

  /* Biểu đồ */
  --chart-1: var(--nexa-magenta);
  --chart-2: var(--nexa-orange);
  --chart-3: oklch(58% .105 35);
  --chart-4: oklch(50% .05 58);
  --chart-5: var(--nexa-graphite);

  /* --- Gradient thương hiệu --- */
  --gradient-hero:    linear-gradient(to bottom right,
                        var(--nexa-plum) 0%, #B80F5B 50%, #F7941D 100%);
  --gradient-accent:  linear-gradient(to right,
                        var(--nexa-magenta-deep) 0%, var(--nexa-pink-bright) 50%, #F7941D 100%);
  --gradient-sidebar: linear-gradient(180deg, #FFFFFF 0%, var(--nexa-tint-sidebar) 100%);
  --gradient-nav-active: linear-gradient(to right,
                        var(--nexa-tint-pink) 0%, #FFFFFF 50%, var(--nexa-tint-cream) 100%);

  /* --- Đổ bóng --- */
  --shadow-card:       0 10px 24px rgba(68,16,45,.07);
  --shadow-card-hover: 0 16px 32px rgba(68,16,45,.12);
  --shadow-hero:       0 22px 46px rgba(88,12,52,.28);
  --shadow-nav-active: 0 6px 18px rgba(108,12,61,.13);
  --shadow-chip:       0 6px 14px rgba(184,15,91,.28);
  --shadow-sidebar:    8px 0 28px rgba(142,21,91,.05);
}

/* Ánh xạ token sang Tailwind v4 để dùng được bg-primary, text-muted-foreground... */
@theme inline {
  --color-background:  var(--background);
  --color-foreground:  var(--foreground);
  --color-card:        var(--card);
  --color-primary:     var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary:   var(--secondary);
  --color-muted:       var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent:      var(--accent);
  --color-destructive: var(--destructive);
  --color-border:      var(--border);
  --color-input:       var(--input);
  --color-ring:        var(--ring);
  --radius-md:  calc(var(--radius) - 2px);
  --radius-lg:  var(--radius);
  --radius-xl:  calc(var(--radius) + 4px);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}

/* --- Lớp tiện ích tái dựng đúng component của Content Auto Pilot --- */
.nexa-hero {
  background: var(--gradient-hero);
  border: 1px solid var(--nexa-magenta-deep);
  border-radius: 1rem;
  box-shadow: var(--shadow-hero);
  color: #fff;
  padding: 1.75rem 1.5rem;
}
.nexa-kicker {                       /* nhãn IN HOA giãn chữ trên hero */
  font-size: .75rem; font-weight: 700; letter-spacing: .18em;
  color: rgb(255 255 255 / .8); text-transform: uppercase;
}
.nexa-card {
  background: var(--card);
  border: 1px solid var(--nexa-border-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.nexa-card:hover {
  transform: translateY(-2px);
  border-color: var(--nexa-border-pink);
  box-shadow: var(--shadow-card-hover);
}
.nexa-card-accentbar {               /* thanh gradient 6px dán mép trên thẻ */
  position: absolute; inset-inline: 0; top: 0; height: 6px;
  background: var(--gradient-accent);
}
.nexa-nav-item {
  display: flex; align-items: center; gap: .75rem;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: .625rem .75rem; font-size: .875rem; font-weight: 500;
  color: var(--foreground); transition: all .2s;
}
.nexa-nav-item[data-active="true"] {
  border-color: var(--nexa-border-pink);
  background: var(--gradient-nav-active);
  color: var(--nexa-magenta);
  box-shadow: var(--shadow-nav-active);
}
.nexa-chip {
  height: 2rem; border-radius: calc(var(--radius) - 0.2rem);
  padding-inline: .75rem; font-size: .875rem; font-weight: 600;
  color: var(--muted-foreground); transition: all .2s;
}
.nexa-chip[data-active="true"] {
  background: var(--nexa-magenta); color: #fff; box-shadow: var(--shadow-chip);
}