/* ==========================================================================
   REF Foundry — Global Typography, Readability & Light/Dark Theme Engine
   ========================================================================== */

/* High-Legibility Inter (Primary Body & Reading) + Plus Jakarta Sans (Headings) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800;900&display=swap');

:root {
    --ref-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ref-font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

/* Base Typography, Spacing & Readability */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--ref-font-body);
    font-size: 0.95rem; /* ~15.2px for comfortable reading */
    line-height: 1.72;
    letter-spacing: 0.012em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Headings: Striking, Well-Spaced, Proportional */
h1, h2, h3, h4, h5, h6, .font-heading,
.text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl {
    font-family: var(--ref-font-heading);
    letter-spacing: -0.01em !important;
    line-height: 1.34 !important;
}
h1, .text-5xl, .text-6xl, .text-7xl {
    line-height: 1.28 !important;
    letter-spacing: -0.012em !important;
}
h2, .text-3xl, .text-4xl {
    line-height: 1.36 !important;
}

/* Tracking Tight - Prevent letters from being squeezed */
.tracking-tight {
    letter-spacing: -0.01em !important;
}

/* Paragraphs & Reading Breathing Room */
p {
    line-height: 1.76;
    letter-spacing: 0.012em;
    margin-bottom: 0.85rem;
}
p:last-child {
    margin-bottom: 0;
}

/* Relaxed sizing and line-heights to eliminate crowded/dense feeling */
.text-xs {
    font-size: 0.8125rem !important; /* 13px (was 12px) for crisp legibility */
    line-height: 1.68 !important;
    letter-spacing: 0.012em !important;
}

.text-sm {
    font-size: 0.9375rem !important; /* 15px (was 14px) */
    line-height: 1.72 !important;
    letter-spacing: 0.01em !important;
}

.text-base {
    font-size: 1.05rem !important;
    line-height: 1.78 !important;
}

.leading-relaxed {
    line-height: 1.78 !important;
}

.leading-normal {
    line-height: 1.68 !important;
}

.leading-tight {
    line-height: 1.45 !important;
}

/* Lists & Checklists spacing */
ul, ol {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}
li {
    margin-bottom: 0.45rem;
    line-height: 1.68;
}

/* Card descriptions & checklists breathing room */
#highlights-container > div,
#nobrainer-container p,
#whats-new-content p,
.foundry-card p {
    line-height: 1.74 !important;
    letter-spacing: 0.012em !important;
}

/* ==========================================================================
   DARK MODE (Foundry Signature Aesthetic)
   ========================================================================== */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #070b09;
    color: #e7e5e4; /* text-stone-200 */
}

html.dark .emerald-gradient-text {
    background: linear-gradient(135deg, #00FFA8 0%, #00D27F 45%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.dark .foundry-card {
    background: rgba(15, 23, 19, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 255, 168, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
html.dark .foundry-card:hover {
    border-color: rgba(0, 255, 168, 0.5);
    box-shadow: 0 0 35px rgba(0, 255, 168, 0.15);
}

/* ==========================================================================
   LIGHT MODE (Clean, Crisp, High-Contrast White / Black)
   ========================================================================== */
html:not(.dark) {
    color-scheme: light;
}

html:not(.dark) body {
    background-color: #f7faf8 !important;
    color: #1a2522 !important; /* Deep dark charcoal for reading */
}

/* Navigation Bar in Light Mode */
html:not(.dark) nav {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    box-shadow: 0 2px 12px -2px rgba(15, 23, 21, 0.05);
}
html:not(.dark) nav a {
    color: #2b3935 !important;
}
html:not(.dark) nav a:hover {
    color: #047857 !important;
}

/* Inversion of Deep Dark Backgrounds to Crisp Light */
html:not(.dark) .bg-\[\#070b09\],
html:not(.dark) .bg-\[\#080d0a\],
html:not(.dark) .bg-\[\#060a08\],
html:not(.dark) .bg-\[\#080e0a\],
html:not(.dark) .bg-\[\#0a110d\],
html:not(.dark) .bg-\[\#050806\],
html:not(.dark) .bg-\[\#0a1410\],
html:not(.dark) .bg-\[\#070b09\]\/90,
html:not(.dark) header.bg-gradient-to-b,
html:not(.dark) section.bg-gradient-to-b,
html:not(.dark) div.bg-gradient-to-b,
html:not(.dark) section#apps,
html:not(.dark) section#philosophy,
html:not(.dark) section#license-terms,
html:not(.dark) section#company-entity,
html:not(.dark) section#support,
html:not(.dark) footer {
    background-color: #f7faf8 !important;
    background-image: none !important;
}

/* Alternating Section Backgrounds in Light Mode for Premium Feel */
html:not(.dark) section#philosophy,
html:not(.dark) section#company-entity {
    background-color: #f0fdf4 !important; /* Fresh soft light emerald tint */
    border-color: rgba(16, 185, 129, 0.2) !important;
}

html:not(.dark) section#support,
html:not(.dark) section#license-terms {
    background-color: #f7faf8 !important;
    border-color: rgba(16, 185, 129, 0.18) !important;
}

/* Footer in Light Mode */
html:not(.dark) footer {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(16, 185, 129, 0.22) !important;
    color: #475a54 !important;
}
html:not(.dark) footer #footer-rights {
    color: #475a54 !important;
}
html:not(.dark) footer button {
    color: #374742 !important;
}
html:not(.dark) footer button:hover {
    color: #047857 !important;
}

/* Anti-SaaS Manifesto 4 Pillars inside #philosophy in Light Mode */
html:not(.dark) #philosophy .bg-stone-900\/60 {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 21, 0.04) !important;
}
html:not(.dark) #philosophy #founder-pledge {
    color: #064e3b !important;
}
html:not(.dark) #philosophy .bg-emerald-950\/40 {
    background-color: #f0fdf4 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

/* Company Entity Boxes inside #company-entity in Light Mode */
html:not(.dark) #company-entity .bg-stone-950\/90 {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 21, 0.06) !important;
}
html:not(.dark) #company-entity .bg-stone-900\/60 {
    background-color: #f7faf8 !important;
    border-color: rgba(16, 185, 129, 0.22) !important;
}
html:not(.dark) #company-entity .text-white {
    color: #0f1715 !important;
}

/* Support Section Cards in Light Mode */
html:not(.dark) #support .bg-stone-950\/80 {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 21, 0.06) !important;
}

/* License Terms Cards in Light Mode */
html:not(.dark) #license-terms .bg-stone-900\/60 {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 21, 0.04) !important;
}

/* Inversion of White Text to Crisp Black */
html:not(.dark) .text-white {
    color: #0f1715 !important; /* Crisp 95% Black */
}
html:not(.dark) .text-stone-100 {
    color: #17221f !important;
}
html:not(.dark) .text-stone-200 {
    color: #212e2a !important; /* High contrast body copy */
}
html:not(.dark) .text-stone-300 {
    color: #374742 !important;
}
html:not(.dark) .text-stone-400 {
    color: #556761 !important; /* High contrast secondary copy */
}
html:not(.dark) .text-stone-500 {
    color: #6d807a !important;
}

/* Cards & Elevated Containers */
html:not(.dark) .bg-stone-900,
html:not(.dark) .bg-stone-900\/40,
html:not(.dark) .bg-stone-900\/50,
html:not(.dark) .bg-stone-900\/60,
html:not(.dark) .bg-stone-900\/70,
html:not(.dark) .bg-stone-900\/80,
html:not(.dark) .bg-stone-900\/90,
html:not(.dark) .bg-stone-950,
html:not(.dark) .bg-stone-950\/40,
html:not(.dark) .bg-stone-950\/70,
html:not(.dark) .bg-stone-950\/75,
html:not(.dark) .bg-stone-950\/80,
html:not(.dark) .bg-stone-950\/85,
html:not(.dark) .bg-stone-950\/90,
html:not(.dark) .foundry-card {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.22) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 21, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .foundry-card:hover,
html:not(.dark) .group:hover .foundry-card,
html:not(.dark) .hover\:border-emerald-400\/40:hover,
html:not(.dark) .hover\:border-emerald-400\/50:hover,
html:not(.dark) .hover\:border-emerald-400:hover {
    border-color: rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 12px 32px -4px rgba(16, 185, 129, 0.15) !important;
}

/* Borders */
html:not(.dark) .border-emerald-950\/80,
html:not(.dark) .border-stone-800,
html:not(.dark) .border-stone-800\/60,
html:not(.dark) .border-stone-800\/80 {
    border-color: rgba(16, 185, 129, 0.18) !important;
}

/* Emerald Brand Text (Rich Forest Emerald in Light Mode for high contrast) */
html:not(.dark) .emerald-gradient-text {
    background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
html:not(.dark) .text-emerald-400 {
    color: #047857 !important; /* Forest emerald - WCAG AAA contrast on light */
}
html:not(.dark) .text-emerald-300 {
    color: #065f46 !important;
}
html:not(.dark) .text-emerald-200 {
    color: #064e3b !important;
}

/* Badges & Pills in Light Mode */
html:not(.dark) .bg-emerald-500\/10,
html:not(.dark) .bg-emerald-500\/15,
html:not(.dark) .bg-emerald-950\/40,
html:not(.dark) .bg-emerald-950\/80,
html:not(.dark) .bg-emerald-950\/85 {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #065f46 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}
html:not(.dark) .bg-amber-500\/10,
html:not(.dark) .bg-amber-500\/20 {
    background-color: rgba(245, 158, 11, 0.14) !important;
    color: #92400e !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

/* Form Inputs, Selects & Buttons */
html:not(.dark) select,
html:not(.dark) input,
html:not(.dark) textarea {
    background-color: #ffffff !important;
    color: #0f1715 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
html:not(.dark) option {
    background-color: #ffffff !important;
    color: #0f1715 !important;
}

/* Secondary Action Buttons in Light Mode */
html:not(.dark) #cta-download-btn,
html:not(.dark) .border-emerald-400\/80 {
    background-color: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #047857 !important;
}
html:not(.dark) #cta-download-btn:hover {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #064e3b !important;
}

/* Promo coupon box in Light Mode */
html:not(.dark) #price-promo-container .bg-stone-950\/90 {
    background-color: #f0f7f3 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}
html:not(.dark) #price-promo-container .text-white {
    color: #065f46 !important;
}

/* Screenshots Showcase Frame in Light Mode */
html:not(.dark) #hero-screenshot-showcase .bg-stone-950\/70 {
    background-color: #edf4f0 !important;
    border-color: rgba(16, 185, 129, 0.22) !important;
}
html:not(.dark) #hero-window-title {
    color: #212e2a !important;
}
html:not(.dark) #hero-screenshot-showcase > div {
    background: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}

/* Video Section in Light Mode */
html:not(.dark) #video-section {
    background-color: #f1f6f3 !important;
}

/* What's New Section in Light Mode */
html:not(.dark) #whats-new-section {
    background-color: #f3f7f5 !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

/* Comparison Section Cards in Light Mode */
html:not(.dark) #comparison-cards > div {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 21, 0.06) !important;
}
html:not(.dark) #comparison-cards .border-red-500\/30 {
    border-color: rgba(239, 68, 68, 0.35) !important;
}
html:not(.dark) #comparison-cards .border-amber-500\/30 {
    border-color: rgba(245, 158, 11, 0.4) !important;
}

/* Recommended Winner Card in Light Mode (Crisp fresh emerald card with high-contrast text) */
html:not(.dark) #comparison-cards .bg-emerald-950\/30,
html:not(.dark) .bg-emerald-950\/30 {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 12px 32px -4px rgba(16, 185, 129, 0.2), 0 4px 12px rgba(16, 185, 129, 0.1) !important;
}
html:not(.dark) #comparison-cards .bg-emerald-950\/30 h3 {
    color: #064e3b !important;
}
html:not(.dark) #comparison-cards .bg-emerald-950\/30 li {
    color: #064e3b !important;
    font-weight: 600 !important;
}
html:not(.dark) #comparison-cards .bg-emerald-950\/30 .text-emerald-300 {
    color: #047857 !important;
}
html:not(.dark) #comparison-cards .bg-emerald-950\/30 .bg-emerald-500\/20 {
    background-color: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #065f46 !important;
}
html:not(.dark) #comparison-cards .bg-emerald-400 {
    background-color: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
}

/* Technical System Specifications Table in Light Mode (No dark zebra blocks) */
html:not(.dark) #specs-table {
    background-color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 6px 24px -2px rgba(15, 23, 21, 0.06) !important;
}
html:not(.dark) #specs-table .border-stone-800\/80 {
    border-color: rgba(16, 185, 129, 0.18) !important;
}
html:not(.dark) #specs-table .bg-stone-950\/40 {
    background-color: #f7faf8 !important; /* Elegant subtle light mint/stone zebra stripe */
}
html:not(.dark) #specs-table .bg-stone-900\/40 {
    background-color: #ffffff !important; /* Pure crisp white zebra stripe */
}
html:not(.dark) #specs-table .text-stone-400 {
    color: #2b3b35 !important; /* Deep dark slate for maximum readability */
    font-weight: 700 !important;
}
html:not(.dark) #specs-table .text-white {
    color: #0c1512 !important; /* 100% crisp jet black mono spec value */
    font-weight: 800 !important;
}

/* Modals in Light Mode */
html:not(.dark) .fixed.inset-0.bg-black\/80,
html:not(.dark) .fixed.inset-0.bg-stone-950\/80 {
    background-color: rgba(15, 23, 21, 0.65) !important;
}
html:not(.dark) .fixed .bg-stone-900,
html:not(.dark) .fixed .bg-stone-950 {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #0f1715 !important;
}

/* Launch Promo Banner in Light Mode (Crisp High-Contrast Emerald) */
html:not(.dark) #launch-promo-banner {
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 55%, #e6f7ef 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html:not(.dark) #launch-promo-banner h3,
html:not(.dark) #launch-promo-banner #launch-promo-title {
    color: #064e3b !important;
}
html:not(.dark) #launch-promo-banner p,
html:not(.dark) #launch-promo-banner #launch-promo-text {
    color: #1a2e26 !important;
}
html:not(.dark) #launch-promo-banner #launch-promo-badge {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #047857 !important;
}
html:not(.dark) #launch-promo-banner .bg-stone-950\/90 {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}
html:not(.dark) #launch-promo-banner .font-mono {
    color: #064e3b !important;
}
html:not(.dark) #launch-promo-banner #launch-promo-code-label {
    color: #047857 !important;
}

/* Local-First Architecture Guarantee Banner in Light Mode */
html:not(.dark) .local-first-guarantee-banner {
    background: linear-gradient(90deg, #ecfdf5 0%, #ffffff 50%, #ecfdf5 100%) !important;
    border-top: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.3) !important;
}
html:not(.dark) .local-first-guarantee-banner #local-first-badge {
    color: #047857 !important;
}
html:not(.dark) .local-first-guarantee-banner #local-first-title {
    color: #064e3b !important;
}
html:not(.dark) .local-first-guarantee-banner #local-first-text {
    color: #1a2e26 !important;
}

/* Hero Guarantee Pills in Light Mode */
html:not(.dark) .hero-pill {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #0f1715 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 21, 0.04) !important;
}

/* Hero REF Definition Box in Light Mode */
html:not(.dark) #hero-ref-definition-box {
    background-color: #f0fdf4 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}
html:not(.dark) #hero-ref-definition-box span,
html:not(.dark) #hero-ref-definition {
    color: #13382c !important;
}

/* VAT / Tax Disclaimer in Light Mode */
html:not(.dark) #vat-disclaimer-box {
    background-color: #f3f7f5 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}
html:not(.dark) #vat-disclaimer {
    color: #3d524b !important;
}

/* App Card No-Brainer Callouts in Light Mode */
html:not(.dark) .card-nobrainer-active {
    background: linear-gradient(135deg, #f0fdf4 0%, #e6f7ef 100%) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}
html:not(.dark) .card-nobrainer-active p {
    color: #064e3b !important;
}
html:not(.dark) .card-nobrainer-active span {
    color: #047857 !important;
}
html:not(.dark) .card-nobrainer-upcoming {
    background-color: #f7faf8 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}
html:not(.dark) .card-nobrainer-upcoming p {
    color: #172b24 !important;
}

/* App Card Badges in Light Mode */
html:not(.dark) .card-os-badge {
    background-color: #f0fdf4 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #047857 !important;
}
html:not(.dark) .card-category-badge {
    background-color: #f3f7f5 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #475a54 !important;
}

/* Mobile Navigation Drawer in Light Mode */
html:not(.dark) #mobile-nav-drawer {
    background-color: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    box-shadow: 10px 0 35px rgba(15, 23, 21, 0.1) !important;
}
html:not(.dark) #mobile-nav-drawer nav a {
    color: #1f2e2a !important;
}
html:not(.dark) #mobile-nav-drawer nav a:hover {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #047857 !important;
}
html:not(.dark) #mobile-nav-drawer .border-stone-800 {
    border-color: rgba(16, 185, 129, 0.2) !important;
}

/* Always keep text dark on primary green buttons in BOTH themes */
.bg-emerald-400.text-stone-950,
.bg-emerald-500.text-stone-950,
.bg-gradient-to-r.from-emerald-500.text-stone-950,
button.text-stone-950,
a.text-stone-950,
#launch-promo-copy-btn {
    color: #0c1512 !important;
}