/* ============================================================
   WHENEVR-STYLE LIGHT THEME OVERRIDE
   Loaded AFTER css/style.css (DELEGO dark theme).

   Changes ONLY:
     • Typeface system  → Inter (headings/body) + Source Serif 4
                          (italic accent words) + Fragment Mono
                          (eyebrow / mono labels)
     • Colors            → Whenevr light palette (#F0F0F0 bg,
                          white cards, ink text, green accent)
     • Card shades       → white cards, translucent black borders,
                          soft neutral shadows
   Layout, sizes, spacing and all animations are UNCHANGED.
   ============================================================ */

/* ---------- 1. Whenevr design tokens ---------- */
:root {
  --whenevr-bg: #F0F0F0;
  --whenevr-card: #FFFFFF;
  --whenevr-surface: #F8F8F8;
  --whenevr-ink: #1C1C1C;
  --whenevr-muted: #989898;
  --whenevr-faint: #7C7C7C;
  --whenevr-line: rgba(0, 0, 0, 0.05);
  --whenevr-line-strong: rgba(0, 0, 0, 0.10);
  --whenevr-accent: #1DCC5D;
  --whenevr-dark: #0D0D0D;
}

/* ---------- 2. Remap the DELEGO dark palette → Whenevr light ---------- */
:root {
  --delego-deep-navy: #F0F0F0;
  --delego-navy: #F0F0F0;
  --delego-surface: #F8F8F8;
  --delego-muted-blue: #E8E8E8;
  --delego-slate: #E8E8E8;
  --delego-coral: #1DCC5D;
  --delego-peach: #1DCC5D;
  --delego-red: #262626;
  --delego-burgundy: #0D0D0D;

  --delego-white: #FFFFFF;
  --delego-text-light: #1C1C1C;
  --delego-text-muted: #989898;
  --delego-border-dark: rgba(0, 0, 0, 0.05);

  --delego-text-dark: #1C1C1C;
  --delego-text-dark-muted: #7C7C7C;
  --delego-border-light: rgba(0, 0, 0, 0.08);

  --delego-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.05);
  --delego-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.06);
  --delego-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.04), 0 14px 32px rgba(0, 0, 0, 0.10);
  --delego-shadow-xl: 0 4px 10px rgba(0, 0, 0, 0.05), 0 20px 44px rgba(0, 0, 0, 0.12);
}

[data-theme="delego"] {
  --color-delego-deep-navy: #F0F0F0;
  --color-delego-navy: #F0F0F0;
  --color-delego-surface: #F8F8F8;
  --color-delego-muted-blue: #E8E8E8;
  --color-delego-slate: #E8E8E8;
  --color-delego-coral: #1DCC5D;
  --color-delego-peach: #1DCC5D;
  --color-delego-red: #262626;
  --color-delego-burgundy: #0D0D0D;
  --color-delego-white: #FFFFFF;
  --color-delego-text-light: #1C1C1C;
  --color-delego-text-muted: #989898;
  --color-delego-border-dark: rgba(0, 0, 0, 0.05);
  --color-delego-border-light: rgba(0, 0, 0, 0.08);
  --color-delego-text-dark: #1C1C1C;
  --color-delego-text-dark-muted: #7C7C7C;

  /* daisyUI theme surface flip */
  --color-base-100: #FFFFFF;
  --color-base-200: #E8E8E8;
  --color-base-300: #DCDCDC;
  --color-base-content: #1C1C1C;
  --color-primary: #1DCC5D;
  --color-primary-content: #FFFFFF;
  --color-secondary: #0D0D0D;
  --color-secondary-content: #FFFFFF;
  --color-accent: #1DCC5D;
  --color-accent-content: #0D0D0D;
  --color-neutral: #F0F0F0;
  --color-neutral-content: #1C1C1C;
  --color-info: #EDEDED;
  --color-info-content: #1C1C1C;
  --color-success: #1DCC5D;
  --color-success-content: #FFFFFF;
  --color-warning: #F49400;
  --color-warning-content: #1C1C1C;
  --color-error: #D04444;
  --color-error-content: #FFFFFF;
}

/* ---------- 3. Fonts ---------- */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  background-color: #F0F0F0;
  color: #1C1C1C;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
}

.nav-link,
.btn,
.faq-trigger,
.card-arrow,
.badge,
.navbar-brand,
.brand-text,
.form-input-custom,
.dash-topbar-title,
.dash-live,
.dash-stat-label,
.dash-stat-trend,
.dash-panel-title,
.dash-panel-badge,
.dash-flow-node,
.dash-title,
.dash-stat-value,
.hero-card-inner .card-label,
.hero-card-inner .card-title,
.hero-card-inner .card-value {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Serif italic accent words — Whenevr's signature */
.gradient-text {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #1C1C1C;
}

/* Mono eyebrow labels */
.eyebrow-badge {
  font-family: "Fragment Mono", ui-monospace, SFMono-Regular, monospace !important;
  letter-spacing: 0.08em !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  color: #1C1C1C !important;
}

/* ---------- 4. Global surfaces ---------- */
/* Banner / hero matches https://whenevr.framer.website/ — flat #F0F0F0 */
.hero-section {
  background: #F0F0F0 !important;
  background-image: none !important;
}

/* Hide grid + glow decorations inside ALL banners so they stay flat like Whenevr */
.hero-section .hero-bg-grid,
.hero-section .hero-glow,
.hero-section .hero-glow-1,
.hero-section .hero-glow-2,
.hero-section .hero-visual-bg,
.page-hero .hero-bg-grid,
.page-hero .hero-glow,
.page-hero .hero-glow-1,
.page-hero .hero-glow-2,
.page-hero .hero-visual-bg {
  display: none !important;
  background: none !important;
}

/* Inner page banners — same flat color */
.page-hero {
  background: #F0F0F0 !important;
  background-image: none !important;
}

.hero-section h1 {
  color: #1C1C1C !important;
}

/* Page hero banners (inner pages) — flat like Whenevr */
.page-hero::before {
  display: none !important;
  background: none !important;
}

/* Hero background decorations */
.hero-glow-1 {
  background: radial-gradient(circle, rgba(29, 204, 93, 0.14), transparent 70%);
}

.hero-glow-2 {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.06), transparent 70%);
  opacity: 0.5;
}

.hero-visual-bg {
  background:
    radial-gradient(circle at 72% 38%, rgba(29, 204, 93, 0.08), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(0, 0, 0, 0.05), transparent 32%);
}

.mobile-menu-overlay {
  background: rgba(0, 0, 0, 0.4);
}

.mobile-menu-drawer {
  background: #FFFFFF;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.12);
}

/* Logo variants: light theme now shows the dark-text logo */
.logo-light { display: block; }
.logo-dark  { display: none; }

.navbar-glass.scrolled {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.nav-link.active {
  color: #1C1C1C;
  background: rgba(29, 204, 93, 0.10);
}

/* Peach fills → accent green with dark glyphs */
.bg-peach,
.bg-delego-peach {
  color: #FFFDED !important;
}

/* ---------- 5. Buttons (Whenevr: black pills, white text) ---------- */
.btn-primary {
  background: #0D0D0D;
  color: #FFFFFF;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.12);
}

.btn-primary:hover {
  background: #2A2A2A;
  color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 26px rgba(0, 0, 0, 0.16);
}

.btn-outline {
  border-color: rgba(0, 0, 0, 0.15);
  color: #1C1C1C;
  border-radius: 9999px;
}

.btn-outline:hover {
  background: #F0F0F0;
  color: #1C1C1C;
}

.btn-secondary {
  background: #FFFFFF;
  color: #1C1C1C;
  border-color: rgba(0, 0, 0, 0.10);
}

/* In the dark CTA section, invert the pills (white / black) */
.section-accent .btn-primary {
  background: #FFFFFF;
  color: #1C1C1C;
  border-radius: 9999px;
}

.section-accent .btn-primary:hover {
  background: #F0F0F0;
  color: #1C1C1C;
}

/* ---------- 6. Cards — EXACT Whenevr token spec ----------
   ------- #FFFFFF fill · #F8F8F8 6px border · 16px radius · stacked
   ------- soft gray shadow: 0 2px 4px rgba(108,113,128,.08),
   ------- 0 7px 7px rgba(108,113,128,.07), 0 17px 10px rgba(108,113,128,.04),
   ------- 0 29px 12px rgba(108,113,128,.01), 0 46px 13px rgba(108,113,128,0)
   --------------------------------------------------------------- */
.service-card,
.feature-card,
.industry-card,
.hero-card,
.dashboard-mockup,
.faq-item {
  background: #FFFFFF !important;
  border: 6px solid #F8F8F8 !important;
  border-radius: 16px;
  box-shadow:
    0 2px 4px rgba(108, 113, 128, 0.08),
    0 7px 7px rgba(108, 113, 128, 0.07),
    0 17px 10px rgba(108, 113, 128, 0.04),
    0 29px 12px rgba(108, 113, 128, 0.01),
    0 46px 13px rgba(108, 113, 128, 0) !important;
}

.service-card:hover,
.feature-card:hover,
.industry-card:hover,
.hero-card:hover {
  border-color: #F8F8F8 !important;
  box-shadow:
    0 4px 8px rgba(108, 113, 128, 0.10),
    0 12px 12px rgba(108, 113, 128, 0.08),
    0 24px 16px rgba(108, 113, 128, 0.05),
    0 40px 18px rgba(108, 113, 128, 0.02) !important;
}

/* Small "card" components — same shade, hairline border */
.workflow-node,
.timeline-step-number {
  background: #FFFFFF !important;
  border: 1px solid #EFEFEF !important;
  box-shadow:
    0 2px 4px rgba(108, 113, 128, 0.06),
    0 7px 7px rgba(108, 113, 128, 0.05) !important;
}

.service-card::after,
.industry-card::after {
  background: linear-gradient(90deg, transparent, rgba(29, 204, 93, 0.45), transparent);
}

/* Icon chips → white container, black glyph (reference style) */
.service-card .icon-wrap,
.industry-card .industry-icon {
  background: #FFFFFF;
  color: #0D0D0D;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Workflow / mockup inner rows on white cards */
.service-card [class*="bg-base-200"] {
  background-color: #F7F7F7 !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.service-card [class*="bg-base-200"] .text-xs,
.service-card [class*="bg-base-200"] .opacity-50,
.service-card [class*="bg-base-200"] .text-sm.level-2 {
  color: #7C7C7C;
}

.service-card [class*="rounded-full"],
.service-card [class*="rounded-lg"] > i[data-lucide] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.service-card .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
}

.service-card .bg-emerald-50 .text-emerald-700 {
  color: #0E7A35 !important;
}

.service-card .bg-emerald-50 .text-emerald-600\/70 {
  color: rgba(14, 122, 53, 0.75) !important;
}

.service-card .flex.justify-center > [data-lucide] {
  color: #1DCC5D;
  opacity: 0.6;
}

/* Workflow nodes + timeline */
.workflow-node {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #1C1C1C;
}

.workflow-connector::before {
  background: repeating-linear-gradient(
    to bottom,
    #1DCC5D 0px,
    #1DCC5D 6px,
    transparent 6px,
    transparent 12px
  );
}

.timeline-step-number {
  background: #FFFFFF;
  color: #1C1C1C;
  border: 2px solid #E2E2E2;
}

.timeline-horizontal::before {
  background: linear-gradient(90deg, #1DCC5D, #0D0D0D);
}

/* Notification rows → neutral gray rows */
.notif-row {
  background: #F7F7F7;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.notif-row .text {
  color: #1C1C1C;
}

/* ---------- 7. Badges ---------- */
.badge-primary,
.badge-accent {
  background: #1DCC5D;
  color: #FFFFFF;
}

.badge-success {
  background: rgba(29, 204, 93, 0.12);
  color: #0E7A35;
}

.badge-info,
.badge-secondary,
.badge-warning {
  background: rgba(0, 0, 0, 0.05);
  color: #5A5A5A;
}

/* ---------- 8. Forms ---------- */
.form-input-custom input,
.form-input-custom select,
.form-input-custom textarea {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1C1C1C;
}

.form-input-custom input:focus,
.form-input-custom select:focus,
.form-input-custom textarea:focus {
  border-color: #1DCC5D;
  box-shadow: 0 0 0 3px rgba(29, 204, 93, 0.12);
}

.form-input-custom.input-error:focus {
  box-shadow: 0 0 0 3px rgba(208, 68, 68, 0.12) !important;
}

/* ---------- 9. Dashboard mockup (inline section) ---------- */
.dashboard-mockup {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 20px 44px rgba(0, 0, 0, 0.12);
}

.dashboard-topbar {
  background: #F7F7F7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dashboard-mockup [class*="bg-base-200"] {
  background-color: #F7F7F7;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ---------- 10. Hero 3D dashboard → light ---------- */
.dashboard-card {
  background: linear-gradient(160deg, #FFFFFF, #F4F4F4 55%);
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dashboard-card::after {
  background: linear-gradient(90deg, transparent, rgba(29, 204, 93, 0.45), transparent);
}

.dashboard-main:hover .dashboard-card {
  border-color: rgba(29, 204, 93, 0.35);
  box-shadow:
    0 36px 76px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(29, 204, 93, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dash-topbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dash-topbar-title {
  color: #1C1C1C;
}

.dash-icon {
  background: #F0F0F0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #7C7C7C;
}

.dash-avatar {
  color: #FFFFFF;
  background: linear-gradient(135deg, #1C1C1C, #0D0D0D);
}

.dash-greeting {
  color: #989898;
}

.dash-title {
  color: #1C1C1C;
}

.dash-stat {
  background: #FFFFFF;
  border: 6px solid #F8F8F8;
  border-radius: 16px;
  box-shadow:
    0 2px 4px rgba(108, 113, 128, 0.08),
    0 7px 7px rgba(108, 113, 128, 0.07),
    0 17px 10px rgba(108, 113, 128, 0.04),
    0 29px 12px rgba(108, 113, 128, 0.01),
    0 46px 13px rgba(108, 113, 128, 0);
}

.dash-stat::after {
  background: radial-gradient(ellipse, rgba(29, 204, 93, 0.18), transparent 70%);
  opacity: 0.5;
}

.dash-stat-label {
  color: #7C7C7C;
}

.dash-stat-value {
  color: #1C1C1C;
}

.dash-stat-trend {
  color: #989898;
}

.dash-stat-trend.up {
  color: #1DCC5D;
}

.dash-chart-panel,
.dash-panel {
  background: #FFFFFF;
  border: 6px solid #F8F8F8;
  border-radius: 16px;
  box-shadow:
    0 2px 4px rgba(108, 113, 128, 0.08),
    0 7px 7px rgba(108, 113, 128, 0.07),
    0 17px 10px rgba(108, 113, 128, 0.04),
    0 29px 12px rgba(108, 113, 128, 0.01),
    0 46px 13px rgba(108, 113, 128, 0);
}

.dash-panel-title {
  color: #7C7C7C;
}

.dash-panel-badge {
  color: #0E7A35;
  background: rgba(29, 204, 93, 0.12);
  border: 1px solid rgba(29, 204, 93, 0.25);
}

.dash-chart-grid {
  stroke: rgba(0, 0, 0, 0.06);
}

.dash-chart-line {
  stroke: #2563EB !important;
}

.dash-chart-line-secondary {
  stroke: #60A5FA !important;
}

.dash-chart-dot {
  fill: rgba(37, 99, 235, 0.22) !important;
}

.dash-chart-dot-core {
  fill: #2563EB !important;
}

.dash-chart stop {
  stop-color: #2563EB;
}

.dash-flow-node {
  color: #1C1C1C;
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  box-shadow:
    0 2px 4px rgba(108, 113, 128, 0.06),
    0 7px 7px rgba(108, 113, 128, 0.05);
}

.dash-flow-arrow {
  color: #1DCC5D;
}

.dash-activity li {
  color: #1C1C1C;
}

.dash-activity-dot.peach {
  background: #1DCC5D;
  box-shadow: 0 0 6px rgba(29, 204, 93, 0.6);
}

/* ---------- 11. CTA / accent section (dark ink panel) ---------- */
.cta-section::before {
  background: linear-gradient(135deg, #0D0D0D, #1A1A1A 60%, #262626) !important;
}

.cta-section .cta-glow {
  background: rgba(29, 204, 93, 0.14);
}

.section-accent {
  background:
    radial-gradient(circle at 85% 15%, rgba(29, 204, 93, 0.16), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(13, 13, 13, 0.9), transparent 55%),
    #0D0D0D !important;
}

.section-accent .eyebrow-badge {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ---------- 12. Misc UI ---------- */
.back-to-top {
  background: #1C1C1C;
  color: #FFFFFF;
}

.toast-notification {
  background: #1C1C1C;
  color: #FFFFFF;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ---------- 13. Hero chat (light, Whenevr match) ---------- */
.hero-chat-card {
  background: #FFFFFF !important;
  border: 6px solid #F8F8F8 !important;
  border-radius: 16px;
  box-shadow:
    0 2px 4px rgba(108, 113, 128, 0.08),
    0 7px 7px rgba(108, 113, 128, 0.07),
    0 17px 10px rgba(108, 113, 128, 0.04),
    0 29px 12px rgba(108, 113, 128, 0.01),
    0 46px 13px rgba(108, 113, 128, 0) !important;
}

.hero-chat-header {
  background: #F7F7F7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.hero-chat-avatar,
.hero-msg-avatar {
  border-color: #FFFFFF;
}

.hero-chat-title {
  color: #1C1C1C;
}

.hero-bubble {
  background: #F4F4F4;
  border-color: rgba(0, 0, 0, 0.06);
  color: #1C1C1C;
}

.hero-input-pill {
  background: #F4F4F4;
  border-color: rgba(0, 0, 0, 0.06);
  color: #7C7C7C;
}

.faq-trigger:hover {
  background: rgba(0, 0, 0, 0.02);
}