@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-heading: 'Space Grotesk', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --color-ink: #1F2330;
    --color-terracotta: #C2552E;
    --color-terracotta-hover: #8F3B1F;
    --color-terracotta-light: #E27A52;
    --color-sand: #F5F0E8;
    --color-stone: #D9D4CA;
    --color-warm-grey: #6B6760;
    --color-slate: #4A5064;
    --color-ochre: #D97706;
    --color-sage: #2D6A4F;
}

:root {
    --color-ink: #1F2330;
    --color-terracotta: #C2552E;
    --color-terracotta-light: #E27A52;
    --color-sand: #F5F0E8;
    --color-stone: #D9D4CA;
}

body {
    font-family: var(--font-sans);
    background-color: #0A0D14;
    color: #F8FAFC;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading);
    letter-spacing: -0.03em;
}

.font-mono-tag {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0A0D14;
}
::-webkit-scrollbar-thumb {
    background: #1E2433;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #C2552E;
}

/* ----------------------------------------------------
   Clean, Solid Architectural Tech Surfaces (No Glowing AI Gradients)
   ---------------------------------------------------- */

.tech-surface {
    background-color: #0F131D;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tech-card {
    background-color: #0F131D;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.tech-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

.tech-button-solid,
.tech-button-primary {
    background-color: #C2552E;
    color: #FFFFFF !important;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.tech-button-solid:hover,
.tech-button-primary:hover {
    background-color: #8F3B1F;
    transform: translateY(-1px);
}

/* Marquee Animation */
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marqueeScroll 32s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}

/* ====================================================
   LIGHT THEME: WARM SAND / EDITORIAL LINEN (#F4EFEA)
   Matches brand identity art direction (Not clinical white)
   ==================================================== */

html.light,
html[data-theme="light"] {
    color-scheme: light;
}

html.light body,
html[data-theme="light"] body {
    background-color: #F4EFEA !important;
    color: #1F2330 !important;
}

/* Global backdrop elements */
html.light .bg-\[\#0A0D14\],
html[data-theme="light"] .bg-\[\#0A0D14\],
html.light .bg-\[\#080B12\],
html[data-theme="light"] .bg-\[\#080B12\],
html.light .theme-backdrop-bg,
html[data-theme="light"] .theme-backdrop-bg {
    background-color: #F4EFEA !important;
}

/* Elevated architectural cards & surface frames */
html.light .bg-\[\#0F131D\],
html[data-theme="light"] .bg-\[\#0F131D\],
html.light .tech-surface,
html[data-theme="light"] .tech-surface,
html.light .tech-card,
html[data-theme="light"] .tech-card,
html.light .mobile-drawer-bg,
html[data-theme="light"] .mobile-drawer-bg {
    background-color: #EDE8DF !important;
    border-color: rgba(31, 35, 48, 0.1) !important;
}

/* Card hover states */
html.light .tech-card:hover,
html[data-theme="light"] .tech-card:hover {
    border-color: rgba(194, 85, 46, 0.4) !important;
    background-color: #FAF7F2 !important;
}

/* Inner nested interactive boxes, badges & option cards */
html.light .bg-white\/\[0\.02\]:not(:has(input:checked)),
html[data-theme="light"] .bg-white\/\[0\.02\]:not(:has(input:checked)),
html.light .bg-white\/\[0\.03\]:not(:has(input:checked)),
html[data-theme="light"] .bg-white\/\[0\.03\]:not(:has(input:checked)),
html.light .bg-white\/\[0\.04\]:not(:has(input:checked)),
html[data-theme="light"] .bg-white\/\[0\.04\]:not(:has(input:checked)) {
    background-color: rgba(31, 35, 48, 0.04) !important;
}

html.light .bg-white\/\[0\.05\],
html[data-theme="light"] .bg-white\/\[0\.05\],
html.light .bg-white\/\[0\.06\],
html[data-theme="light"] .bg-white\/\[0\.06\],
html.light .bg-white\/\[0\.08\],
html[data-theme="light"] .bg-white\/\[0\.08\] {
    background-color: rgba(31, 35, 48, 0.07) !important;
}

/* Subtle Borders in Light Mode */
html.light .border-white\/\[0\.08\],
html[data-theme="light"] .border-white\/\[0\.08\],
html.light .border-white\/\[0\.1\],
html[data-theme="light"] .border-white\/\[0\.1\],
html.light .border-white\/\[0\.12\],
html[data-theme="light"] .border-white\/\[0\.12\],
html.light .border-white\/\[0\.2\],
html[data-theme="light"] .border-white\/\[0\.2\],
html.light .border-white\/20,
html[data-theme="light"] .border-white\/20,
html.light .border-white\/10,
html[data-theme="light"] .border-white\/10 {
    border-color: rgba(31, 35, 48, 0.1) !important;
}



/* Typography in Light Mode */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6,
html.light .font-heading,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .font-heading {
    color: #1F2330 !important;
}

/* Preserve Terracotta brand accents */
html.light .text-\[\#C2552E\],
html[data-theme="light"] .text-\[\#C2552E\],
html.light .text-\[\#E27A52\],
html[data-theme="light"] .text-\[\#E27A52\] {
    color: #C2552E !important;
}

/* Text hierarchy */
html.light .text-white:not(.keep-white):not(.dark-panel *),
html[data-theme="light"] .text-white:not(.keep-white):not(.dark-panel *) {
    color: #1F2330 !important;
}

html.light p:not(.keep-white):not(.dark-panel *),
html[data-theme="light"] p:not(.keep-white):not(.dark-panel *) {
    color: #4A5064;
}

html.light .text-slate-100:not(.keep-white):not(.dark-panel *),
html[data-theme="light"] .text-slate-100:not(.keep-white):not(.dark-panel *),
html.light .text-slate-200:not(.keep-white):not(.dark-panel *),
html[data-theme="light"] .text-slate-200:not(.keep-white):not(.dark-panel *) {
    color: #1F2330 !important;
}

html.light .text-slate-300:not(.keep-white):not(.dark-panel *),
html[data-theme="light"] .text-slate-300:not(.keep-white):not(.dark-panel *) {
    color: #374151 !important;
}

html.light .text-slate-400:not(.keep-white):not(.dark-panel *),
html[data-theme="light"] .text-slate-400:not(.keep-white):not(.dark-panel *) {
    color: #4B5563 !important;
}

html.light .text-slate-500:not(.keep-white):not(.dark-panel *),
html[data-theme="light"] .text-slate-500:not(.keep-white):not(.dark-panel *) {
    color: #6B7280 !important;
}

html.light .text-white\/20:not(.keep-white):not(.dark-panel *),
html[data-theme="light"] .text-white\/20:not(.keep-white):not(.dark-panel *),
html.light .text-white\/30:not(.keep-white):not(.dark-panel *),
html[data-theme="light"] .text-white\/30:not(.keep-white):not(.dark-panel *) {
    color: rgba(31, 35, 48, 0.25) !important;
}

/* Explicit rule for dark panels & keep-white elements */
html.light .dark-panel,
html[data-theme="light"] .dark-panel,
html.light .keep-white,
html[data-theme="light"] .keep-white {
    color: #FFFFFF !important;
}
html.light .dark-panel .text-slate-300,
html[data-theme="light"] .dark-panel .text-slate-300,
html.light .dark-panel .text-slate-400,
html[data-theme="light"] .dark-panel .text-slate-400 {
    color: #94A3B8 !important;
}
html.light .dark-panel .text-emerald-400,
html[data-theme="light"] .dark-panel .text-emerald-400 {
    color: #34D399 !important;
}
html.light .dark-panel .text-blue-400,
html[data-theme="light"] .dark-panel .text-blue-400 {
    color: #60A5FA !important;
}

/* Scope & Deliverables Pills in Light Mode */
html.light .scope-pill,
html[data-theme="light"] .scope-pill {
    background-color: rgba(31, 35, 48, 0.05) !important;
    border-color: rgba(31, 35, 48, 0.14) !important;
    color: #1F2330 !important;
    font-weight: 600 !important;
}

/* Ensure solid coloured elements always retain white text */
html.light .tech-button-solid,
html[data-theme="light"] .tech-button-solid,
html.light .tech-button-solid *,
html[data-theme="light"] .tech-button-solid *,
html.light .bg-\[\#C2552E\],
html[data-theme="light"] .bg-\[\#C2552E\],
html.light .bg-\[\#C2552E\] *,
html[data-theme="light"] .bg-\[\#C2552E\] *,
html.light .bg-emerald-600,
html[data-theme="light"] .bg-emerald-600,
html.light .bg-emerald-600 *,
html[data-theme="light"] .bg-emerald-600 * {
    color: #FFFFFF !important;
}

/* Radio Tiles (Budget & Timeline) - Universal guarantee */
.radio-tile,
label:has(input[name="budget"]),
label:has(input[name="timeline"]) {
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Checked state - Solid Terracotta background with crisp pure white typography */
.radio-tile:has(input:checked),
label:has(input[name="budget"]:checked),
label:has(input[name="timeline"]:checked),
#brief-form label:has(input[type="radio"]:checked) {
    background-color: #C2552E !important;
    border-color: #C2552E !important;
    box-shadow: 0 4px 14px -2px rgba(194, 85, 46, 0.4) !important;
}

.radio-tile:has(input:checked) *,
label:has(input[name="budget"]:checked) *,
label:has(input[name="timeline"]:checked) *,
#brief-form label:has(input[type="radio"]:checked) *,
.radio-tile:has(input:checked) .radio-tile-title,
label:has(input[name="budget"]:checked) span,
label:has(input[name="timeline"]:checked) span {
    color: #FFFFFF !important;
}

.radio-tile:has(input:checked) .radio-tile-sub,
label:has(input[name="budget"]:checked) span:last-of-type,
label:has(input[name="timeline"]:checked) span:last-of-type,
#brief-form label:has(input[type="radio"]:checked) span:last-of-type {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 0.95 !important;
}

/* Light mode unselected state - PROPER DEEP BLACK INK */
html.light .radio-tile:not(:has(input:checked)),
html[data-theme="light"] .radio-tile:not(:has(input:checked)),
html.light label:has(input[name="budget"]:not(:checked)),
html[data-theme="light"] label:has(input[name="budget"]:not(:checked)),
html.light label:has(input[name="timeline"]:not(:checked)),
html[data-theme="light"] label:has(input[name="timeline"]:not(:checked)),
html.light #brief-form label:has(input[type="radio"]:not(:checked)),
html[data-theme="light"] #brief-form label:has(input[type="radio"]:not(:checked)) {
    background-color: rgba(31, 35, 48, 0.03) !important;
    border-color: rgba(31, 35, 48, 0.12) !important;
}

html.light .radio-tile:not(:has(input:checked)):hover,
html[data-theme="light"] .radio-tile:not(:has(input:checked)):hover,
html.light label:has(input[name="budget"]:not(:checked)):hover,
html[data-theme="light"] label:has(input[name="budget"]:not(:checked)):hover,
html.light label:has(input[name="timeline"]:not(:checked)):hover,
html[data-theme="light"] label:has(input[name="timeline"]:not(:checked)):hover {
    border-color: #C2552E !important;
    background-color: rgba(194, 85, 46, 0.05) !important;
}

html.light .radio-tile:not(:has(input:checked)) .radio-tile-title,
html[data-theme="light"] .radio-tile:not(:has(input:checked)) .radio-tile-title,
html.light label:has(input[name="budget"]:not(:checked)) span:first-of-type,
html[data-theme="light"] label:has(input[name="budget"]:not(:checked)) span:first-of-type,
html.light label:has(input[name="timeline"]:not(:checked)) span:first-of-type,
html[data-theme="light"] label:has(input[name="timeline"]:not(:checked)) span:first-of-type {
    color: #1F2330 !important;
    font-weight: 700 !important;
}

html.light .radio-tile:not(:has(input:checked)) .radio-tile-sub,
html[data-theme="light"] .radio-tile:not(:has(input:checked)) .radio-tile-sub,
html.light label:has(input[name="budget"]:not(:checked)) span:last-of-type,
html[data-theme="light"] label:has(input[name="budget"]:not(:checked)) span:last-of-type,
html.light label:has(input[name="timeline"]:not(:checked)) span:last-of-type,
html[data-theme="light"] label:has(input[name="timeline"]:not(:checked)) span:last-of-type {
    color: #4B5563 !important;
}

/* Dark mode unselected state */
html.dark .radio-tile:not(:has(input:checked)),
html[data-theme="dark"] .radio-tile:not(:has(input:checked)),
html.dark label:has(input[name="budget"]:not(:checked)),
html[data-theme="dark"] label:has(input[name="budget"]:not(:checked)),
html.dark label:has(input[name="timeline"]:not(:checked)),
html[data-theme="dark"] label:has(input[name="timeline"]:not(:checked)) {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .radio-tile:not(:has(input:checked)) .radio-tile-title,
html[data-theme="dark"] .radio-tile:not(:has(input:checked)) .radio-tile-title,
html.dark label:has(input[name="budget"]:not(:checked)) span:first-of-type,
html[data-theme="dark"] label:has(input[name="budget"]:not(:checked)) span:first-of-type,
html.dark label:has(input[name="timeline"]:not(:checked)) span:first-of-type,
html[data-theme="dark"] label:has(input[name="timeline"]:not(:checked)) span:first-of-type {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

html.dark .radio-tile:not(:has(input:checked)) .radio-tile-sub,
html[data-theme="dark"] .radio-tile:not(:has(input:checked)) .radio-tile-sub,
html.dark label:has(input[name="budget"]:not(:checked)) span:last-of-type,
html[data-theme="dark"] label:has(input[name="budget"]:not(:checked)) span:last-of-type,
html.dark label:has(input[name="timeline"]:not(:checked)) span:last-of-type,
html[data-theme="dark"] label:has(input[name="timeline"]:not(:checked)) span:last-of-type {
    color: #94A3B8 !important;
}

/* Adaptive Logo Colors */
html.light .brand-symbol-ink,
html[data-theme="light"] .brand-symbol-ink {
    fill: #1F2330 !important;
}
html.light .brand-wordmark,
html[data-theme="light"] .brand-wordmark {
    color: #1F2330 !important;
}
html.dark .brand-symbol-ink,
html[data-theme="dark"] .brand-symbol-ink {
    fill: #FFFFFF !important;
}
html.dark .brand-wordmark,
html[data-theme="dark"] .brand-wordmark {
    color: #FFFFFF !important;
}

/* Typography in Dark Mode */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .font-heading,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .font-heading {
    color: #FFFFFF !important;
}

html.dark body,
html[data-theme="dark"] body {
    background-color: #0A0D14 !important;
    color: #F8FAFC !important;
}

/* Sticky Header in Light Mode */
html.light header.sticky,
html[data-theme="light"] header.sticky {
    border-color: rgba(31, 35, 48, 0.08) !important;
}
html.light header.sticky.shadow-lg,
html[data-theme="light"] header.sticky.shadow-lg {
    background-color: rgba(244, 239, 234, 0.95) !important;
}

/* Footer in Light Mode */
html.light footer,
html[data-theme="light"] footer {
    background-color: #EDE8DF !important;
    border-color: rgba(31, 35, 48, 0.1) !important;
    color: #4B5565 !important;
}

html.light footer .footer-sub-border,
html[data-theme="light"] footer .footer-sub-border {
    border-color: rgba(31, 35, 48, 0.12) !important;
}

html.light footer p,
html[data-theme="light"] footer p {
    color: #555E6D !important;
}

html.light footer a:not(.tech-button-solid):not([class*="text-[#E27A52]"]):not([class*="text-[#C2552E]"]),
html[data-theme="light"] footer a:not(.tech-button-solid):not([class*="text-[#E27A52]"]):not([class*="text-[#C2552E]"]) {
    color: #4B5565 !important;
}

html.light footer a:hover,
html[data-theme="light"] footer a:hover {
    color: #1F2330 !important;
}

/* Inputs & Form Fields in Light Mode */
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="tel"],
html.light textarea,
html.light select,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: #FAF7F2 !important;
    border-color: rgba(31, 35, 48, 0.15) !important;
    color: #1F2330 !important;
}

html.light input:focus,
html.light textarea:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus {
    border-color: #C2552E !important;
}

/* Theme Switcher Pill in Light Mode */
html.light .theme-pill-container,
html[data-theme="light"] .theme-pill-container {
    background-color: rgba(31, 35, 48, 0.06) !important;
    border-color: rgba(31, 35, 48, 0.12) !important;
}
html.light .theme-pill-container button:not(.bg-\[\#C2552E\]),
html[data-theme="light"] .theme-pill-container button:not(.bg-\[\#C2552E\]) {
    color: #666D80 !important;
}
html.light .theme-pill-container button:not(.bg-\[\#C2552E\]):hover,
html[data-theme="light"] .theme-pill-container button:not(.bg-\[\#C2552E\]):hover {
    color: #1F2330 !important;
}

/* Scrollbar in Light Mode */
html.light ::-webkit-scrollbar-track,
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #F4EFEA;
}
html.light ::-webkit-scrollbar-thumb,
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #D9D4CA;
}
html.light ::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #C2552E;
}

/* WhatsApp Widget Floating Label (Clean Floating Text without Container) */
.whatsapp-float-label {
    color: #1F2330 !important;
    text-shadow: 0 1px 3px rgba(244, 239, 234, 0.95), 0 0 10px rgba(244, 239, 234, 0.85);
}

html.dark .whatsapp-float-label,
html[data-theme="dark"] .whatsapp-float-label {
    color: #FFFFFF !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.85);
}