/* ============================================================
   AffiBlast — Crextio-inspired Theme
   Soft cream + yellow accent + charcoal CTA
   Loaded AFTER Tailwind CDN to override default color palette.
   ============================================================ */

:root {
    --cream-50:  #FAF7EE;
    --cream-100: #F5F1E8;
    --cream-200: #EDE5D0;
    --cream-300: #E0D7BD;
    --yellow:     #FFD93D;
    --yellow-soft:#FFE873;
    --yellow-pale:#FFF6D6;
    --yellow-deep:#F5C518;
    --charcoal:    #1A1A1A;
    --charcoal-2:  #2D2D2D;
    --charcoal-3:  #3F3F3F;
    --text-primary:   #1A1A1A;
    --text-secondary: #6B6B6B;
    --text-muted:     #8E8E8E;
    --border-soft: #E8E2D1;
    --border-line: #DCD5BE;
}

/* ---------- Body & base ---------- */
html, body {
    background: var(--cream-100) !important;
    color: var(--text-primary);
    margin: 0 !important;
    padding: 0 !important;
}
body { font-feature-settings: "ss01"; }

/* ---------- TOP-GAP RESET (debug aggressive) ----------
   Reset the outer chain so the sticky topbar sits flush at top.
   Do NOT touch the topbar's inner padding (.px-* .py-*). */
html, body { margin: 0 !important; padding: 0 !important; min-height: 100%; }
main { margin-top: 0 !important; padding-top: 0 !important; }
main > div.min-h-screen,
main > div.flex.flex-col { margin-top: 0 !important; padding-top: 0 !important; }

/* Pin the topbar to the very top of <main>. If "sticky top-0" leaves a gap
   because some ancestor has offset, force the topbar to be position:relative
   with top:0 + a negative-margin trick to bleed any leftover padding. */
main > div.min-h-screen > div.sticky,
main > div.flex.flex-col > div.sticky {
    position: sticky !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* ---------- Surface remap (gray → cream) ---------- */
.bg-white            { background-color: #FFFFFF !important; }
.bg-gray-50          { background-color: var(--cream-50)  !important; }
.bg-gray-100         { background-color: var(--cream-100) !important; }
.bg-gray-200         { background-color: var(--cream-200) !important; }
.bg-gray-800,
.bg-gray-900         { background-color: var(--charcoal) !important; }

.text-white          { color: #FFFFFF !important; }
.text-gray-400       { color: var(--text-muted)     !important; }
.text-gray-500       { color: var(--text-secondary) !important; }
.text-gray-600       { color: var(--text-secondary) !important; }
.text-gray-700       { color: #4A4A4A !important; }
.text-gray-800,
.text-gray-900       { color: var(--text-primary) !important; }

.border-gray-100,
.border-gray-200,
.border-gray-300     { border-color: var(--border-soft) !important; }

/* ---------- Indigo → Charcoal (primary CTAs) ---------- */
.bg-indigo-50        { background-color: var(--yellow-pale) !important; }
.bg-indigo-100       { background-color: var(--yellow-soft) !important; }
.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-700,
.bg-indigo-800,
.bg-indigo-900       { background-color: var(--charcoal) !important; color: #fff !important; }

.hover\:bg-indigo-50:hover   { background-color: var(--yellow-pale) !important; }
.hover\:bg-indigo-100:hover  { background-color: var(--yellow-soft) !important; }
.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-800:hover  { background-color: #000 !important; }

.text-indigo-100,
.text-purple-100,
.text-pink-100       { color: #FFFFFF !important; }
.text-indigo-200,
.text-purple-200,
.text-pink-200       { color: rgba(255, 255, 255, 0.85) !important; }
.text-indigo-300,
.text-purple-300,
.text-pink-300       { color: rgba(255, 255, 255, 0.7) !important; }
.text-indigo-400,
.text-purple-400,
.text-pink-400       { color: var(--yellow) !important; }
.text-indigo-500,
.text-indigo-600,
.text-indigo-700     { color: var(--charcoal) !important; }
.hover\:text-indigo-600:hover,
.hover\:text-indigo-700:hover { color: #000 !important; }

.border-indigo-200,
.border-indigo-300,
.border-indigo-500,
.border-indigo-600   { border-color: var(--charcoal) !important; }

.ring-indigo-500,
.focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--yellow-deep) !important;
}
.focus\:border-indigo-500:focus { border-color: var(--charcoal) !important; }

/* ---------- Purple → Charcoal/yellow ---------- */
.bg-purple-50        { background-color: var(--yellow-pale) !important; }
.bg-purple-100       { background-color: var(--yellow-soft) !important; }
.bg-purple-500,
.bg-purple-600,
.bg-purple-700,
.bg-purple-800,
.bg-purple-900       { background-color: var(--charcoal) !important; color: #fff !important; }
.text-purple-500,
.text-purple-600,
.text-purple-700     { color: var(--charcoal) !important; }
.hover\:bg-purple-100:hover  { background-color: var(--yellow-soft) !important; }
.hover\:bg-purple-700:hover  { background-color: #000 !important; }

/* ---------- Pink → Yellow accent ---------- */
.bg-pink-50          { background-color: var(--yellow-pale) !important; }
.bg-pink-100         { background-color: var(--yellow-soft) !important; }
.bg-pink-500,
.bg-pink-600         { background-color: var(--yellow-deep) !important; color: var(--charcoal) !important; }
.text-pink-500,
.text-pink-600       { color: var(--yellow-deep) !important; }

/* ---------- Blue → Yellow accent (secondary) ---------- */
.bg-blue-50          { background-color: var(--yellow-pale) !important; }
.bg-blue-100         { background-color: var(--yellow-soft) !important; }
.bg-blue-500,
.bg-blue-600         { background-color: var(--yellow) !important; color: var(--charcoal) !important; }
.text-blue-500,
.text-blue-600,
.text-blue-700       { color: var(--charcoal) !important; }
.hover\:bg-blue-700:hover { background-color: var(--yellow-deep) !important; color: var(--charcoal) !important; }

/* ---------- Gradient remap: ALL indigo/purple/pink shades ----------
   Pale shades (50/100) → cream/yellow-pale (soft hero backgrounds)
   Mid+dark shades (500-900) → charcoal/charcoal-2 (CTAs & feature cards)
   ------------------------------------------------------------------ */

/* FROM- (gradient start) */
.from-indigo-50, .from-purple-50, .from-pink-50,
.from-violet-50, .from-fuchsia-50 { --tw-gradient-from: var(--cream-50) !important; }

.from-indigo-100, .from-purple-100, .from-pink-100,
.from-violet-100, .from-fuchsia-100 { --tw-gradient-from: var(--yellow-pale) !important; }

.from-indigo-200, .from-purple-200, .from-pink-200,
.from-violet-200, .from-fuchsia-200 { --tw-gradient-from: var(--yellow-soft) !important; }

.from-indigo-300, .from-indigo-400, .from-indigo-500, .from-indigo-600,
.from-indigo-700, .from-indigo-800, .from-indigo-900,
.from-purple-300, .from-purple-400, .from-purple-500, .from-purple-600,
.from-purple-700, .from-purple-800, .from-purple-900,
.from-pink-300, .from-pink-400, .from-pink-500, .from-pink-600,
.from-pink-700, .from-pink-800, .from-pink-900,
.from-violet-500, .from-violet-600, .from-violet-700, .from-violet-800, .from-violet-900,
.from-fuchsia-500, .from-fuchsia-600, .from-fuchsia-700, .from-fuchsia-800, .from-fuchsia-900
{ --tw-gradient-from: var(--charcoal) !important; }

/* VIA- (gradient middle) */
.via-indigo-50, .via-purple-50, .via-pink-50,
.via-violet-50, .via-fuchsia-50, .via-white { --tw-gradient-via: var(--cream-50) !important; }

.via-indigo-100, .via-purple-100, .via-pink-100,
.via-violet-100, .via-fuchsia-100 { --tw-gradient-via: var(--yellow-pale) !important; }

.via-indigo-300, .via-indigo-400, .via-indigo-500, .via-indigo-600,
.via-indigo-700, .via-indigo-800, .via-indigo-900,
.via-purple-300, .via-purple-400, .via-purple-500, .via-purple-600,
.via-purple-700, .via-purple-800, .via-purple-900,
.via-pink-300, .via-pink-400, .via-pink-500, .via-pink-600,
.via-pink-700, .via-pink-800, .via-pink-900,
.via-violet-500, .via-violet-600, .via-violet-700, .via-violet-800,
.via-fuchsia-500, .via-fuchsia-600, .via-fuchsia-700, .via-fuchsia-800
{ --tw-gradient-via: var(--charcoal-2) !important; }

/* TO- (gradient end) */
.to-indigo-50, .to-purple-50, .to-pink-50,
.to-violet-50, .to-fuchsia-50 { --tw-gradient-to: var(--cream-50) !important; }

.to-indigo-100, .to-purple-100, .to-pink-100,
.to-violet-100, .to-fuchsia-100 { --tw-gradient-to: var(--yellow-pale) !important; }

.to-indigo-200, .to-purple-200, .to-pink-200,
.to-violet-200, .to-fuchsia-200 { --tw-gradient-to: var(--yellow-soft) !important; }

.to-indigo-300, .to-indigo-400, .to-indigo-500, .to-indigo-600,
.to-indigo-700, .to-indigo-800, .to-indigo-900,
.to-purple-300, .to-purple-400, .to-purple-500, .to-purple-600,
.to-purple-700, .to-purple-800, .to-purple-900,
.to-pink-300, .to-pink-400, .to-pink-500, .to-pink-600,
.to-pink-700, .to-pink-800, .to-pink-900,
.to-violet-500, .to-violet-600, .to-violet-700, .to-violet-800, .to-violet-900,
.to-fuchsia-500, .to-fuchsia-600, .to-fuchsia-700, .to-fuchsia-800, .to-fuchsia-900
{ --tw-gradient-to: var(--charcoal-2) !important; }

/* Yellow accent: when both from + to are dark, end on yellow for CTA pop */
.bg-gradient-to-r.from-indigo-600.to-purple-600,
.bg-gradient-to-r.from-purple-600.to-indigo-600,
.bg-gradient-to-r.from-indigo-500.to-purple-500,
.bg-gradient-to-br.from-indigo-600.to-purple-600 {
    background-image: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-2) 100%) !important;
}

/* Gradient text logo: charcoal → yellow */
.bg-clip-text.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--charcoal), var(--yellow-deep)) !important;
}

/* Extra shade overrides (single bg- not in gradient) */
.bg-indigo-200, .bg-purple-200, .bg-pink-200 { background-color: var(--yellow-soft) !important; }
.bg-indigo-300, .bg-purple-300, .bg-pink-300 { background-color: var(--yellow) !important; color: var(--charcoal) !important; }
.bg-indigo-400, .bg-purple-400, .bg-pink-400 { background-color: var(--yellow-deep) !important; color: var(--charcoal) !important; }

/* Avatar circles with purple/indigo bg — keep contrast */
.bg-purple-600 *, .bg-indigo-600 *, .bg-pink-600 * { color: #FFFFFF; }

/* ---------- Universal contrast guarantee on dark gradient surfaces ----------
   Any container that combines bg-gradient + a from-{indigo|purple|pink|violet|fuchsia}-{300..900}
   becomes solid charcoal with WHITE text.
   IMPORTANT: use [class~="..."] (whole-token match) instead of [class*="..."] (substring)
   so we do NOT accidentally match shade-50 (from-indigo-50, from-purple-50) which are
   the LIGHT cream hero backgrounds used on login/auth pages. */
[class~="from-indigo-300"], [class~="from-indigo-400"], [class~="from-indigo-500"],
[class~="from-indigo-600"], [class~="from-indigo-700"], [class~="from-indigo-800"],
[class~="from-indigo-900"],
[class~="from-purple-300"], [class~="from-purple-400"], [class~="from-purple-500"],
[class~="from-purple-600"], [class~="from-purple-700"], [class~="from-purple-800"],
[class~="from-purple-900"],
[class~="from-pink-300"], [class~="from-pink-400"], [class~="from-pink-500"],
[class~="from-pink-600"], [class~="from-pink-700"], [class~="from-pink-800"],
[class~="from-pink-900"],
[class~="from-violet-500"], [class~="from-violet-600"], [class~="from-violet-700"],
[class~="from-violet-800"], [class~="from-violet-900"],
[class~="from-fuchsia-500"], [class~="from-fuchsia-600"], [class~="from-fuchsia-700"],
[class~="from-fuchsia-800"], [class~="from-fuchsia-900"] {
    background-image: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-2) 100%) !important;
    color: #FFFFFF !important;
}

/* Force white text inside dark gradient cards.
   Wrapped in :where() so specificity = 0, letting nested .bg-white pills win. */
:where([class~="from-indigo-300"], [class~="from-indigo-400"], [class~="from-indigo-500"],
       [class~="from-indigo-600"], [class~="from-indigo-700"], [class~="from-indigo-800"],
       [class~="from-indigo-900"],
       [class~="from-purple-300"], [class~="from-purple-400"], [class~="from-purple-500"],
       [class~="from-purple-600"], [class~="from-purple-700"], [class~="from-purple-800"],
       [class~="from-purple-900"],
       [class~="from-pink-500"], [class~="from-pink-600"], [class~="from-pink-700"],
       [class~="from-pink-800"], [class~="from-pink-900"]) * {
    color: #FFFFFF !important;
}

/* Yellow accent links inside dark cards — keep yellow visible */
[class*="bg-gradient-"][class*="from-purple-"] .text-yellow-400,
[class*="bg-gradient-"][class*="from-indigo-"] .text-yellow-400,
[class*="bg-gradient-"][class*="from-pink-"]   .text-yellow-400 { color: var(--yellow) !important; }

/* ---------- Nested white/light pill buttons inside dark cards ----------
   When a child has its own light bg (bg-white / bg-yellow-* / bg-cream),
   preserve its own dark text. Higher specificity than the universal-white rule. */
[class*="bg-gradient-"][class*="from-indigo-"] .bg-white,
[class*="bg-gradient-"][class*="from-purple-"] .bg-white,
[class*="bg-gradient-"][class*="from-pink-"]   .bg-white,
[class*="bg-gradient-"][class*="from-violet-"] .bg-white,
[class*="bg-gradient-"][class*="from-fuchsia-"] .bg-white {
    background-color: #FFFFFF !important;
    color: var(--charcoal) !important;
}
[class*="bg-gradient-"][class*="from-indigo-"] .bg-white *,
[class*="bg-gradient-"][class*="from-purple-"] .bg-white *,
[class*="bg-gradient-"][class*="from-pink-"]   .bg-white *,
[class*="bg-gradient-"][class*="from-violet-"] .bg-white *,
[class*="bg-gradient-"][class*="from-fuchsia-"] .bg-white * {
    color: var(--charcoal) !important;
}

/* Yellow/cream pill bg inside dark cards */
[class*="bg-gradient-"][class*="from-indigo-"] [class*="bg-yellow"],
[class*="bg-gradient-"][class*="from-purple-"] [class*="bg-yellow"],
[class*="bg-gradient-"][class*="from-indigo-"] [class*="bg-cream"],
[class*="bg-gradient-"][class*="from-purple-"] [class*="bg-cream"] {
    color: var(--charcoal) !important;
}
[class*="bg-gradient-"][class*="from-indigo-"] [class*="bg-yellow"] *,
[class*="bg-gradient-"][class*="from-purple-"] [class*="bg-yellow"] * { color: var(--charcoal) !important; }

/* Hover state for white pill in dark card */
[class*="bg-gradient-"][class*="from-indigo-"] .bg-white:hover,
[class*="bg-gradient-"][class*="from-purple-"] .bg-white:hover {
    background-color: var(--yellow-pale) !important;
}

/* Backdrop-blur icon boxes (bg-white/10) inside dark cards — keep glassy */
[class*="bg-white\\/10"], [class*="bg-white\\/20"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Green check marks inside dark cards stay green */
[class*="bg-gradient-"][class*="from-indigo-"] [class*="text-emerald"],
[class*="bg-gradient-"][class*="from-indigo-"] [class*="text-green"],
[class*="bg-gradient-"][class*="from-purple-"] [class*="text-emerald"],
[class*="bg-gradient-"][class*="from-purple-"] [class*="text-green"] { color: #6EE7B7 !important; }

/* Common solid avatar bg → charcoal with white inside */
.bg-purple-500, .bg-purple-600,
.bg-indigo-500, .bg-indigo-600 {
    background-color: var(--charcoal) !important;
    color: #FFFFFF !important;
}

/* ---------- Primary submit buttons (Sign in / Create account / etc.) ----------
   Tailwind CDN sometimes injects text-white AFTER our overrides. Force WHITE
   text + transparent text-shadow on every gradient-CTA button.
   Specificity: button + class~  = (0,2,1) — beats every per-class rule above. */
button[type="submit"],
button.btn-primary,
a.btn-primary {
    color: #FFFFFF !important;
}
button[type="submit"][class~="from-indigo-600"],
button[type="submit"][class~="from-purple-600"],
button[type="submit"][class~="from-indigo-500"],
button[type="submit"][class~="from-purple-500"],
button[type="submit"].bg-indigo-600,
button[type="submit"].bg-purple-600 {
    background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
button[type="submit"] *,
button.btn-primary *,
a.btn-primary * { color: inherit !important; }

/* Any element explicitly tagged text-white inside any dark gradient stays white */
[class~="text-white"], [class~="text-white"] * { color: #FFFFFF !important; }

/* ---------- Green / Red / Amber accents ---------- */
.bg-green-50         { background-color: #ECF6E4 !important; }
.bg-green-100        { background-color: #D8EDC4 !important; }
.bg-green-500,
.bg-green-600        { background-color: #6BAE3F !important; }
.text-green-500,
.text-green-600,
.text-green-700      { color: #4F8A2A !important; }

.bg-red-50           { background-color: #FCEAE5 !important; }
.bg-red-100          { background-color: #F8D2C8 !important; }
.bg-red-500,
.bg-red-600          { background-color: #E55B3C !important; }
.text-red-500,
.text-red-600        { color: #C9482D !important; }

.bg-yellow-100,
.bg-amber-100        { background-color: var(--yellow-pale) !important; }
.bg-yellow-500,
.bg-amber-500        { background-color: var(--yellow) !important; color: var(--charcoal) !important; }
.text-yellow-500,
.text-amber-500      { color: var(--yellow-deep) !important; }

/* ---------- Borders & rings ---------- */
.border              { border-color: var(--border-soft); }
.border-white        { border-color: #FFFFFF !important; }

/* ---------- Rounded corners (Crextio uses bigger radii) ---------- */
.rounded-md          { border-radius: 12px !important; }
.rounded-lg          { border-radius: 14px !important; }
.rounded-xl          { border-radius: 18px !important; }
.rounded-2xl         { border-radius: 24px !important; }
.rounded-3xl         { border-radius: 28px !important; }

/* ---------- Buttons: pill style for primary actions ---------- */
button, .btn {
    transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
button:active, .btn:active { transform: scale(.98); }

/* ---------- Inputs ---------- */
input, textarea, select {
    background-color: #FFFFFF;
    border-color: var(--border-soft);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--charcoal) !important;
    box-shadow: 0 0 0 3px rgba(255, 217, 61, 0.35) !important;
    outline: none !important;
}

/* ---------- Shadows: softer warmth ---------- */
.shadow-sm    { box-shadow: 0 1px 2px rgba(60, 50, 20, 0.04) !important; }
.shadow       { box-shadow: 0 2px 8px rgba(60, 50, 20, 0.06) !important; }
.shadow-md    { box-shadow: 0 4px 12px rgba(60, 50, 20, 0.07) !important; }
.shadow-lg    { box-shadow: 0 8px 24px rgba(60, 50, 20, 0.08) !important; }
.shadow-xl    { box-shadow: 0 12px 32px rgba(60, 50, 20, 0.10) !important; }

/* ---------- Sidebar (specific tweaks) ---------- */
aside { background-color: var(--cream-50) !important; border-right-color: var(--border-soft) !important; }
aside .bg-white { background-color: var(--cream-50) !important; }

/* Active sidebar item — black pill */
nav a[aria-current="page"],
nav a.active,
.sidebar-nav .active {
    background-color: var(--charcoal) !important;
    color: #FFFFFF !important;
    border-radius: 9999px !important;
}

/* ---------- Cards ---------- */
.card, .bg-white.rounded-2xl, .bg-white.rounded-xl {
    background-color: #FFFFFF;
    border: 1px solid var(--border-soft);
}

/* ---------- Mobile tab bar overrides ---------- */
.mobile-tab-bar { background: var(--cream-50) !important; border-top-color: var(--border-soft) !important; }
.mobile-tab-bar .active { color: var(--charcoal) !important; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cream-100); }
::-webkit-scrollbar-thumb { background: var(--cream-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---------- Focus rings (yellow soft glow) ---------- */
.focus\:ring-2:focus,
.focus\:ring:focus {
    --tw-ring-color: rgba(255, 217, 61, 0.5) !important;
}

/* ---------- Selection ---------- */
::selection { background: var(--yellow-soft); color: var(--charcoal); }