/* ============================================================
   GENEDANCE DESIGN TOKENS
   Single source of truth for all design variables
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  --color-bg:           #0a0714;
  --color-header-bg:    #2b2250;
  --color-footer-bg:    #2b2250;
  --color-gradient-start: #503980;
  --color-gradient-end:   #1a1640;
  --color-accent:       #69C3C4;
  --color-accent-hover: #4fa8a9;
  --color-heading:      #f3edfa;
  --color-body:         #ffffff;
  --color-muted:        rgba(255, 255, 255, 0.65);
  --color-border:       rgba(255, 255, 255, 0.12);
  --color-card-bg:      rgba(255, 255, 255, 0.015);
  --color-card-bg-hover:rgba(255, 255, 255, 0.04);
  --color-overlay:      rgba(0, 0, 0, 0.45);

  /* --- Background layers --- */
  --bg-void:            #05040a;
  --bg-panel:           #0a0714;
  --bg-deep:            #07060f;

  /* --- Named palette --- */
  --mint-pale:          #A8D8D7;
  --mint-deep:          #69C3C4;
  --mint-hover:         #4FA8A9;
  --lila-pale:          #D5A5CC;
  --lila-deep:          #C790BC;
  --blackberry-pale:    #503980;
  --blackberry-deep:    #2B2250;
  --blackberry-ink:     #1A1640;

  /* --- Surface tokens --- */
  --surface-card:       rgba(255, 255, 255, 0.015);
  --surface-raised:     rgba(255, 255, 255, 0.04);

  /* --- Border tokens --- */
  --border-soft:        rgba(255, 255, 255, 0.08);
  --border-mint:        rgba(105, 195, 196, 0.3);

  /* --- Foreground aliases --- */
  --color-fg-muted:     rgba(255, 255, 255, 0.65);
  --color-fg-subtle:    rgba(255, 255, 255, 0.45);
  --color-fg-faint:     rgba(255, 255, 255, 0.2);

  /* ---------- Typography ---------- */
  --font-body:     'Nunito', sans-serif;
  --font-heading:  'Nunito Sans', sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, Menlo, monospace;

  --size-xs:   0.75rem;   /* 12px */
  --size-sm:   0.875rem;  /* 14px */
  --size-base: 1rem;      /* 16px */
  --size-md:   1.125rem;  /* 18px */
  --size-lg:   1.25rem;   /* 20px */
  --size-xl:   1.5rem;    /* 24px */
  --size-2xl:  1.875rem;  /* 30px */
  --size-3xl:  2.25rem;   /* 36px */
  --size-4xl:  3rem;      /* 48px */
  --size-5xl:  3.75rem;   /* 60px */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ---------- Layout ---------- */
  --container-max:  1200px;
  --container-wide: 1400px;
  --nav-height:     72px;

  /* ---------- Borders ---------- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 20px rgba(105, 195, 196, 0.25);

  /* ---------- Transitions ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --ease-standard:      cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Breakpoints (reference only — use in media queries) ----------
     --bp-tablet: 980px
     --bp-mobile: 767px
     --bp-small:  479px
  ---------------------------------------------------------------- */
}

/* ============================================================
   LIGHT THEME
   Applied via  html[data-theme="light"]  set by JS.
   ============================================================ */
html[data-theme="light"] {
  /* Backgrounds — clean white with mint tint */
  --color-bg:            #f4f9f9;
  --bg-void:             #e8f3f3;
  --bg-panel:            #f4f9f9;
  --bg-deep:             #daecea;

  /* Text — dark purple family for strong contrast */
  --color-heading:       #0d0a1f;
  --color-body:          #1c1836;
  --color-muted:         rgba(13, 10, 31, 0.62);

  /* Cards & surfaces */
  --color-card-bg:       rgba(255, 255, 255, 0.82);
  --color-card-bg-hover: #ffffff;
  --surface-card:        rgba(255, 255, 255, 0.82);
  --surface-raised:      #ffffff;

  /* Borders */
  --color-border:        rgba(13, 10, 31, 0.1);
  --border-soft:         rgba(13, 10, 31, 0.06);
  --border-mint:         rgba(105, 195, 196, 0.45);

  /* Foreground aliases */
  --color-fg-muted:      rgba(13, 10, 31, 0.62);
  --color-fg-subtle:     rgba(13, 10, 31, 0.42);
  --color-fg-faint:      rgba(13, 10, 31, 0.16);

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.12);

  color-scheme: light;
}

/* --- Header ------------------------------------------------- */
html[data-theme="light"] .site-header {
  background-color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .nav-links a {
  color: rgba(13, 10, 31, 0.72);
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active {
  color: var(--color-accent);
}
html[data-theme="light"] .mobile-menu {
  background-color: rgba(255, 255, 255, 0.98);
}
html[data-theme="light"] .mobile-nav-links a {
  color: rgba(13, 10, 31, 0.75);
  border-bottom-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .mobile-nav-links a:hover,
html[data-theme="light"] .mobile-nav-links a.active {
  color: var(--color-accent);
}
html[data-theme="light"] .hamburger__bar {
  background-color: rgba(13, 10, 31, 0.8);
}

/* --- Homepage hero ------------------------------------------ */
html[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse 70% 60% at 80% 15%, rgba(105, 195, 196, 0.22), transparent 65%),
    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(168, 216, 215, 0.18), transparent 65%),
    linear-gradient(180deg, #dff2f2 0%, #eaf5f5 50%, #f4f9f9 100%);
}
html[data-theme="light"] .hero::before {
  background-image:
    linear-gradient(rgba(13, 10, 31, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 10, 31, 0.04) 1px, transparent 1px);
}

/* --- Home sections ------------------------------------------ */
html[data-theme="light"] .value-prop { background: #eef7f7; }
html[data-theme="light"] .segments   { background: #e6f2f2; }
html[data-theme="light"] .pipeline-stage {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .benefit-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(13, 10, 31, 0.08);
}

/* --- Page heroes (editorial) -------------------------------- */
html[data-theme="light"] .page-hero {
  background:
    radial-gradient(ellipse 70% 60% at 80% 15%, rgba(105, 195, 196, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(168, 216, 215, 0.14), transparent 60%),
    linear-gradient(160deg, #dff2f2 0%, #eef7f7 100%);
}
html[data-theme="light"] .page-hero::before {
  background-image:
    linear-gradient(rgba(13, 10, 31, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 10, 31, 0.04) 1px, transparent 1px);
}

/* --- Platform hero ------------------------------------------ */
html[data-theme="light"] .platform-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 10%, rgba(105, 195, 196, 0.2), transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 90%, rgba(168, 216, 215, 0.14), transparent 70%),
    linear-gradient(180deg, #dff2f2 0%, #eef7f7 100%);
}
html[data-theme="light"] .platform-hero::before { opacity: 0.3; }

/* --- Solutions page ----------------------------------------- */
html[data-theme="light"] .sol-tabs {
  background: rgba(244, 249, 249, 0.95);
  border-bottom-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .sol-tab {
  color: rgba(13, 10, 31, 0.6);
  border-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .sol-tab:hover { color: rgba(13, 10, 31, 0.9); }
html[data-theme="light"] .sol-segment--teal {
  background:
    radial-gradient(ellipse 55% 65% at 85% 15%, rgba(105, 195, 196, 0.18), transparent 70%),
    #f0f9f9;
}
html[data-theme="light"] .sol-segment--purple {
  background:
    radial-gradient(ellipse 55% 65% at 15% 15%, rgba(199, 144, 188, 0.14), transparent 70%),
    #f5f0f8;
}
html[data-theme="light"] .sol-segment--lilac {
  background:
    radial-gradient(ellipse 55% 65% at 85% 85%, rgba(213, 165, 204, 0.14), transparent 70%),
    #f7f2f7;
}
html[data-theme="light"] .sol-segment + .sol-segment {
  border-top-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .seg-moment {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .seg-quote {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(13, 10, 31, 0.1);
}
html[data-theme="light"] .seg-action {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(13, 10, 31, 0.1);
}
html[data-theme="light"] .seg-contrast__col--before {
  background: rgba(239, 98, 98, 0.04);
  border-color: rgba(239, 98, 98, 0.18);
}
html[data-theme="light"] .seg-contrast__col--after {
  background: rgba(105, 195, 196, 0.07);
}

/* --- Pricing page ------------------------------------------- */
html[data-theme="light"] .seq-costs  { background: #e8f4f4; }
html[data-theme="light"] .all-plans  { background: #eef7f7; }
html[data-theme="light"] .pricing-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .pricing-card--featured {
  background: #ffffff;
  border-color: rgba(105, 195, 196, 0.5);
}
html[data-theme="light"] .seq-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .all-plans-item {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .billing-toggle {
  background: rgba(13, 10, 31, 0.04);
  border-color: rgba(13, 10, 31, 0.1);
}
html[data-theme="light"] .billing-toggle__btn { color: rgba(13, 10, 31, 0.6); }

/* --- CTA banner --------------------------------------------- */
html[data-theme="light"] .cta-banner { background: #d4ecec; }
html[data-theme="light"] .cta-banner p { color: rgba(13, 10, 31, 0.75); }
html[data-theme="light"] .cta-banner::before { opacity: 0.03; }

/* --- Footer ------------------------------------------------- */
html[data-theme="light"] .site-footer {
  background-color: #cde6e6;
  border-top-color: rgba(13, 10, 31, 0.07);
}

/* --- Helix — reduced opacity on light bg ------------------- */
html[data-theme="light"] #helixBgWrap { opacity: 0.1; }

/* --- Hardcoded white text — override for light bg ---------- */

/* Home: hero meta strip */
html[data-theme="light"] .hero__meta { color: rgba(13, 10, 31, 0.5); }
html[data-theme="light"] .hero__meta-sep { color: rgba(13, 10, 31, 0.25); }

/* Home: segment cards */
html[data-theme="light"] .segment-card {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(13, 10, 31, 0.08);
}
html[data-theme="light"] .segment-card .check-list li {
  color: rgba(13, 10, 31, 0.75);
}

/* CTA banner body text */
html[data-theme="light"] .cta-banner p { color: rgba(13, 10, 31, 0.72); }

/* Solutions: segment tab bar */
html[data-theme="light"] .sol-tab { color: rgba(13, 10, 31, 0.6); }
html[data-theme="light"] .sol-tab--teal:hover   { color: #1a8e8f; }
html[data-theme="light"] .sol-tab--purple:hover { color: #9b4a8f; }
html[data-theme="light"] .sol-tab--lilac:hover  { color: #a05898; }

/* Solutions: contrast block text */
html[data-theme="light"] .seg-contrast__head span { color: rgba(13, 10, 31, 0.5); }
html[data-theme="light"] .seg-contrast__col--before li { color: rgba(13, 10, 31, 0.7); }
html[data-theme="light"] .seg-contrast__col--after li { color: rgba(13, 10, 31, 0.85); }

/* Solutions: quote citation */
html[data-theme="light"] .seg-quote__cite { color: rgba(13, 10, 31, 0.5); }

/* Solutions: segment intro lead text */
html[data-theme="light"] .seg-intro__lead { color: rgba(13, 10, 31, 0.68); }

/* Solutions: moment index number */
html[data-theme="light"] .seg-moment__index {
  -webkit-text-stroke-color: rgba(13, 10, 31, 0.15);
}

/* Pricing: features list */
html[data-theme="light"] .features-list li { color: rgba(13, 10, 31, 0.78); }
html[data-theme="light"] .pricing-card__note { color: rgba(13, 10, 31, 0.45); }

/* Pricing: sequencing card price unit */
html[data-theme="light"] .seq-card__price-unit { color: rgba(13, 10, 31, 0.55); }
html[data-theme="light"] .seq-costs__note { color: rgba(13, 10, 31, 0.65); }

/* Pricing: all-plans items */
html[data-theme="light"] .all-plans-item { color: rgba(13, 10, 31, 0.82); }

/* Pricing: billing toggle */
html[data-theme="light"] .billing-toggle__btn { color: rgba(13, 10, 31, 0.6); }
html[data-theme="light"] .billing-toggle__btn[aria-selected="true"] {
  background: rgba(105, 195, 196, 0.2);
  color: rgba(13, 10, 31, 0.9);
}

/* Pricing: card text */
html[data-theme="light"] .pricing-card__amount { color: #0d0a1f; }
html[data-theme="light"] .pricing-card__desc { color: rgba(13, 10, 31, 0.65); }
html[data-theme="light"] .pricing-card__features h4 { color: rgba(13, 10, 31, 0.5); }

/* Glossary items */
html[data-theme="light"] .glossary-item dd { color: rgba(13, 10, 31, 0.65); }

/* Pipeline stage descriptions */
html[data-theme="light"] .pipeline-stage__desc { color: rgba(13, 10, 31, 0.65); }
html[data-theme="light"] .pipeline-stage {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(13, 10, 31, 0.08);
}

/* dot-list / check-list on editorial seg-cards */
html[data-theme="light"] .dot-list li { color: rgba(13, 10, 31, 0.72); }

/* Section connectors / dividers that use white */
html[data-theme="light"] .seg-contrast__head::before,
html[data-theme="light"] .seg-contrast__head::after {
  background: linear-gradient(90deg, transparent, rgba(13, 10, 31, 0.15), transparent);
}