/*
 * Godrix Light Theme — FLAT
 *
 * Loads last, after light-theme.css and shimmer.css, and scopes every rule to
 * [data-theme="light"]. The dark theme is untouched by this file.
 *
 * The brief: white and navy, nothing else. No gradients, and no CSS or
 * GSAP motion. The two canvas pieces — the constellation field and the
 * globe — stay live in both themes; they are driven by their own render
 * loops, not by CSS, and are switched on in particles.js / aceternity-
 * effects.js rather than here.
 *
 * PALETTE — navy (#010070, the colour supplied by the client)
 *   #ffffff  page      every card and panel
 *   #f2f2fc  band      alternating sections only
 *   #e6e6fa  tint      badges, selected states, icon plates
 *   #010070  navy      headings, fills, links, logo   17.00 on white
 *   #2a2ac0  navy+     hover, highlighted words        9.59 on white
 *   #414a6b  body      paragraphs                      8.69 on white
 *   #626a8c  muted     secondary text                  5.30 on white
 *   #dcdcf2  border
 *
 * Pure blue sits low on the luminance curve, so every usable step in this
 * hue is dark: even the lightest accent here is 9.59:1. That is why hover
 * goes LIGHTER (#2a2ac0) rather than darker — at 17:1 the base has nowhere
 * darker to go that anyone could see.
 *
 * WHY THE BLANKET RULES
 * Gradients and motion are spread over ~145 light-scoped declarations plus
 * base rules that leak into light. Overriding them one by one would silently
 * miss the next one somebody adds, so sections 2 and 3 switch them off
 * wholesale and then restore the few things that genuinely need a value.
 *
 * Contents
 *   1. Palette tokens
 *   2. No gradients
 *   3. No motion  (and the elements that must be pinned visible)
 *   4. Navbar & logo
 *   5. Buttons
 *   6. Surfaces, cards & borders
 *   7. Text, links & accents
 *   8. Gradient text -> solid
 *   9. Code panels & decorative plates
 *  10. Forms & focus
 */

/* ============================================
   1. PALETTE TOKENS
   light-theme.css already funnels the whole site through these names, so
   re-pointing them here re-skins almost everything without new selectors.
   ============================================ */
[data-theme="light"] {
  --flat-white: #ffffff;
  --flat-band: #f2f2fc;
  --flat-tint: #e6e6fa;
  --flat-blue: #010070;        /* the supplied navy, used verbatim */
  --flat-blue-strong: #2a2ac0; /* hover: LIGHTER, see the note above   */
  --flat-ink: #010070;         /* headings are the navy itself         */
  --flat-body: #414a6b;
  --flat-muted: #626a8c;
  --flat-border: #dcdcf2;

  /* Brand ramp — one navy, used for ink and accent alike */
  --deep: var(--flat-ink);
  --blue: var(--flat-blue);
  --blue-strong: var(--flat-blue-strong);
  --sky: var(--flat-tint);
  --mist: var(--flat-band);
  --mint: var(--flat-blue);
  --mint-light: var(--flat-blue-strong);

  --primary-ink: var(--flat-blue);
  --primary-ink-strong: var(--flat-blue-strong);
  --on-primary: #ffffff;

  /* Text ramp */
  --text-white: var(--flat-ink);
  --text-gray: var(--flat-body);
  --text-muted: var(--flat-muted);
  --text-muted-on-mist: #5a6285;
  --text-dark: var(--flat-muted);

  /* Surfaces */
  --surface-page: var(--flat-white);
  --surface-alt: var(--flat-band);
  --surface-card: var(--flat-white);
  --border-soft: var(--flat-border);
  --border-strong: #c3c3ea;

  /* Legacy aliases still referenced across design-system.css */
  --black-dark: var(--flat-white);
  --black-base: var(--flat-white);
  --black-light: var(--flat-band);
  --black-lighter: var(--flat-border);
  --primary: var(--flat-blue);
  --primary-light: var(--flat-blue);
  --primary-dark: var(--flat-blue-strong);
  --primary-green: var(--flat-blue);
  --primary-green-dark: var(--flat-blue-strong);
  --accent-cyan: var(--flat-blue);
  --accent-cyan-light: var(--flat-blue);
  --accent-cyan-dark: var(--flat-blue-strong);
  --accent-violet: var(--flat-blue);
  --accent-violet-light: var(--flat-blue);
  --accent-violet-dark: var(--flat-blue-strong);
  --accent-amber: var(--flat-blue);
  --accent-amber-light: var(--flat-blue);
  --accent-amber-dark: var(--flat-blue-strong);
  --secondary-yellow: var(--flat-blue);
  --secondary-blue: var(--flat-blue);
  --secondary-purple: var(--flat-blue);

  /* A gradient token that is a single flat colour, so any rule still saying
     background: var(--primary-gradient) paints flat blue instead. */
  --primary-gradient: var(--flat-blue);
  --shimmer-text-gradient: none;

  /* Constellation field — navy dots; the field animates (see particles.js) */
  --particle-rgb: 1, 0, 112;

  /* Kill the glow shadow tokens rather than let them tint the page */
  --shadow-glow: none;
  --shadow-glow-amber: none;
  --shadow-glow-cyan: none;
  --shadow-glow-violet: none;
}

/* ============================================
   2. NO GRADIENTS
   background-image carries every gradient in the codebase. The only real
   image it also carries is one decorative SVG noise tile, which this theme
   does not want either — so the blanket needs no exceptions.
   ============================================ */
[data-theme="light"] *,
[data-theme="light"] *::before,
[data-theme="light"] *::after {
  background-image: none !important;
  text-shadow: none !important;
  /* Glows go too. Several are still mint (rgba(90,255,160,...)) left over
     from the pre-teal palette — a green haze has no place in a white and
     blue theme, and picking them off one class at a time kept missing one.
     Floating elements get a single soft shadow back in section 4. */
  box-shadow: none !important;
}

/* Decorative glow / grid / beam layers exist only to carry a gradient.
   With the gradient gone they are empty boxes; remove them outright. */
[data-theme="light"] .hero-bg,
[data-theme="light"] .hero-glow,
[data-theme="light"] .hero-glow-1,
[data-theme="light"] .hero-glow-2,
[data-theme="light"] .hero-grid,
[data-theme="light"] .global-grid-bg,
[data-theme="light"] .grid-accent,
[data-theme="light"] .section-glow,
[data-theme="light"] .glow-orb,
[data-theme="light"] .industry-glow,
[data-theme="light"] .globe-glow,
[data-theme="light"] .editor-glow,
[data-theme="light"] .service-hero-glow,
[data-theme="light"] .services-bg-pattern,
[data-theme="light"] .bg-pattern,
[data-theme="light"] .comet-card::before,
[data-theme="light"] .comet-card::after,
[data-theme="light"] .shimmer-border::before,
[data-theme="light"] .shimmer-card::after,
[data-theme="light"] .card::after,
[data-theme="light"] .page-tracing-beam,
[data-theme="light"] .faq-section::before,
[data-theme="light"] .faq-cta::before,
[data-theme="light"] .contact-form-wrapper::before,
[data-theme="light"] .contact-form-wrapper::after,
[data-theme="light"] .contact-card::before,
[data-theme="light"] .about-stat-card::before {
  display: none !important;
}

/* Surfaces that used to be a gradient now need a flat colour. */
[data-theme="light"] body,
[data-theme="light"] .hero,
[data-theme="light"] .page-header,
[data-theme="light"] .faq-cta,
[data-theme="light"] .contact-form-wrapper,
[data-theme="light"] .contact-card {
  background-color: var(--flat-white) !important;
}

[data-theme="light"] .section-alt,
[data-theme="light"] .footer,
[data-theme="light"] .vault-hero,
[data-theme="light"] .cta-vault {
  background-color: var(--flat-band) !important;
}

/* vault.html's two panels carried a green/blue wash and a green border */
[data-theme="light"] .cta-vault {
  border: 1px solid var(--flat-border) !important;
}

/* ============================================
   3. NO MOTION
   CSS animation and transition are switched off wholesale. GSAP is a
   separate matter: it writes inline styles, so animations.js skips its
   decorative initialisers entirely while this theme is active.

   The canvas animations are deliberately NOT covered here: the globe spins
   and the particle field drifts in both themes.

   THE IMPORTANT PART: a handful of elements are authored at opacity:0 and
   only ever become visible because something animates them. Killing the
   animation without pinning these would blank the hero and every .reveal
   block on the site. They are pinned immediately below, with !important so
   the rule also beats any inline opacity GSAP may already have written
   (for instance when the visitor switches dark -> light mid-page).
   ============================================ */
[data-theme="light"] *,
[data-theme="light"] *::before,
[data-theme="light"] *::after {
  animation: none !important;
  transition: none !important;
}

[data-theme="light"] {
  scroll-behavior: auto !important;
}

[data-theme="light"] .reveal,
[data-theme="light"] .reveal.active,
[data-theme="light"] .footer-brand,
[data-theme="light"] .footer-column,
[data-theme="light"] .cta-content,
[data-theme="light"] .hero,
[data-theme="light"] .hero-badge,
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-subtitle,
[data-theme="light"] .hero-actions,
[data-theme="light"] .hero-stats,
[data-theme="light"] .hero-trust,
[data-theme="light"] .hero-visual,
[data-theme="light"] .code-line,
[data-theme="light"] .navbar,
[data-theme="light"] .transition-fade,
[data-theme="light"] #swup {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* The mobile menu is the subtle case: design-system.css sets
   `.mobile-menu li { opacity: 0 }` in one rule and only ever restores it
   via `animation: menuSlideIn ... forwards` in another. With animation off
   the menu would slide open completely empty, so its items are pinned too. */
[data-theme="light"] .mobile-menu li,
[data-theme="light"] .mobile-menu.active li,
[data-theme="light"] .mobile-menu-link,
[data-theme="light"] .mobile-nav li {
  opacity: 1 !important;
  transform: none !important;
}

/* The menu's links, CTA buttons and social icons are each faded in by their
   own staggered rule. Rather than chase them one class at a time, every
   descendant is made opaque; transform is left alone here so nothing that
   relies on it for layout shifts. */
[data-theme="light"] .mobile-menu *,
[data-theme="light"] .mobile-menu-nav * {
  opacity: 1 !important;
}

/* Swup drives page changes by setting these classes on <html> and waiting for
   the transition to finish. At zero duration it resolves immediately; these
   rules make sure the page is never left sitting at opacity:0 meanwhile. */
[data-theme="light"].is-changing .transition-fade,
[data-theme="light"].is-changing .hero,
[data-theme="light"].is-animating #swup {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* The back-to-top button is meant to stay hidden until it is scrolled to —
   that is state, not animation, so it keeps its opacity:0 default. */
[data-theme="light"] .back-to-top {
  opacity: 0 !important;
  transform: none !important;
}

[data-theme="light"] .back-to-top.visible {
  opacity: 1 !important;
}

[data-theme="light"] .back-to-top {
  background: var(--flat-white) !important;
  border: 1px solid var(--flat-border) !important;
  color: var(--flat-blue) !important;
  box-shadow: 0 4px 12px rgba(1, 0, 112, 0.12) !important;
}

/* ============================================
   4. NAVBAR & LOGO
   Solid white, one hairline rule underneath, no blur and no shadow until
   the page is scrolled. The wordmark is the navy mark (logo-blue.png,
   #010070) which theme.js swaps in for light backgrounds.
   ============================================ */
[data-theme="light"] .navbar {
  background: var(--flat-white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--flat-border) !important;
  box-shadow: none !important;
}

[data-theme="light"] .navbar.scrolled {
  background: var(--flat-white) !important;
  border-bottom-color: var(--flat-border) !important;
  box-shadow: none !important;
}

[data-theme="light"] .navbar.scrolled::after {
  display: none !important;
}

[data-theme="light"] .logo-img {
  filter: none !important;
}

[data-theme="light"] .logo-text h1 {
  color: var(--flat-ink) !important;
}

[data-theme="light"] .logo-text span {
  color: var(--flat-muted) !important;
}

[data-theme="light"] .logo-icon {
  background: var(--flat-blue) !important;
  color: #ffffff !important;
}

[data-theme="light"] .nav-links a {
  color: var(--flat-body) !important;
}

[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active {
  color: var(--flat-blue-strong) !important;
}

/* The active-item underline was a gradient bar */
[data-theme="light"] .nav-links a::after,
[data-theme="light"] .nav-links a.active::after {
  background: var(--flat-blue) !important;
}

/* Dropdowns and the mobile sheet float above content, so they keep a single
   soft shadow — it is the only depth cue left once gradients are gone. */
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .mega-menu,
[data-theme="light"] .mobile-menu,
[data-theme="light"] .nav-dropdown-menu,
[data-theme="light"] .login-card,
[data-theme="light"] .modal-content {
  background: var(--flat-white) !important;
  border: 1px solid var(--flat-border) !important;
  box-shadow: 0 8px 24px rgba(1, 0, 112, 0.12) !important;
}

[data-theme="light"] .mobile-menu-brand {
  color: var(--flat-ink) !important;
}

[data-theme="light"] .menu-toggle span,
[data-theme="light"] .hamburger span {
  background: var(--flat-ink) !important;
}

/* ============================================
   5. BUTTONS
   Three flat levels: solid blue, white with a blue rule, plain blue text.
   ============================================ */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn.btn-primary,
[data-theme="light"] .login-btn {
  background: var(--flat-blue) !important;
  border: 1px solid var(--flat-blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn.btn-primary:hover,
[data-theme="light"] .login-btn:hover {
  background: var(--flat-blue-strong) !important;
  border-color: var(--flat-blue-strong) !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn.btn-secondary,
[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-dark {
  background: var(--flat-white) !important;
  border: 1px solid var(--flat-blue) !important;
  color: var(--flat-blue-strong) !important;
  box-shadow: none !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn.btn-secondary:hover,
[data-theme="light"] .btn-outline:hover,
[data-theme="light"] .btn-dark:hover {
  background: var(--flat-tint) !important;
  color: var(--flat-blue-strong) !important;
}

[data-theme="light"] .btn-tertiary,
[data-theme="light"] .btn-ghost {
  background: transparent !important;
  color: var(--flat-blue-strong) !important;
  box-shadow: none !important;
}

/* .btn-text is NOT a button variant — it is the label span inside the
   contact form's submit button, so it must inherit the button's colour
   rather than be painted blue on a blue fill. */
[data-theme="light"] .btn-primary .btn-text,
[data-theme="light"] .btn-primary .btn-loader,
[data-theme="light"] .login-btn span {
  color: inherit !important;
}

/* ============================================
   6. SURFACES, CARDS & BORDERS
   One card treatment everywhere: white, 1px border, square-ish, no lift.
   ============================================ */
/* NOTE ON SPECIFICITY
   The blanket in section 2 is only (0,1,0), so a rule written as
   [data-theme="light"] .foo { background: linear-gradient(...) !important }
   outranks it. Six of those exist in design-system.css plus one in
   mobile-app.css and one inline in index.html; every one of their selectors
   is listed here or in section 4, and this file loads last, so these win. */
[data-theme="light"] .card,
[data-theme="light"] .service-card,
[data-theme="light"] .service-hero-card,
[data-theme="light"] .service-card-featured,
[data-theme="light"] .bento-item,
[data-theme="light"] .feature-card,
[data-theme="light"] .tech-category,
[data-theme="light"] .contact-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .about-stat-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .team-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .industry-card,
[data-theme="light"] .process-card,
[data-theme="light"] .value-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .contact-form-wrapper {
  background: var(--flat-white) !important;
  border: 1px solid var(--flat-border) !important;
  box-shadow: none !important;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .service-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .tech-category:hover,
[data-theme="light"] .contact-card:hover,
[data-theme="light"] .industry-card:hover,
[data-theme="light"] .pricing-card:hover,
[data-theme="light"] .team-card:hover {
  border-color: var(--flat-blue) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* The CTA panel was a three-stop deep gradient; it is now one blue block. */
[data-theme="light"] .cta-content,
[data-theme="light"] .cta-section .cta-content {
  background: var(--flat-blue) !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .cta-content h2,
[data-theme="light"] .cta-content p,
[data-theme="light"] .cta-content a:not(.btn) {
  color: #ffffff !important;
}

/* Icon plates: flat tint square with a blue glyph, never a gradient disc. */
[data-theme="light"] .service-icon,
[data-theme="light"] .feature-icon,
[data-theme="light"] .about-feature-icon,
[data-theme="light"] .tech-category-icon,
[data-theme="light"] .contact-icon,
[data-theme="light"] .page-header .icon-large,
[data-theme="light"] .value-icon,
[data-theme="light"] .process-icon,
[data-theme="light"] .card-icon,
[data-theme="light"] .industry-icon,
[data-theme="light"] .contact-card-icon,
[data-theme="light"] .stat-icon,
[data-theme="light"] .icon-box,
[data-theme="light"] .service-hero-icon i,
[data-theme="light"] .service-hero-icon,
[data-theme="light"] .platform-icon {
  background: var(--flat-tint) !important;
  color: var(--flat-blue-strong) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Badges, tags and pills */
[data-theme="light"] .badge,
[data-theme="light"] .tech-badge,
[data-theme="light"] .section-tag,
[data-theme="light"] .hero-badge,
[data-theme="light"] .service-badge,
[data-theme="light"] .tag {
  background: var(--flat-tint) !important;
  color: var(--flat-blue-strong) !important;
  border: 1px solid var(--flat-border) !important;
  box-shadow: none !important;
}

/* Numbered step markers: solid blue disc, white numeral. Their only fill
   was a gradient, so without this they lose the disc entirely and leave a
   white numeral on the white page. */
[data-theme="light"] .process-number,
[data-theme="light"] .step-number,
[data-theme="light"] .timeline-number {
  background: var(--flat-blue) !important;
  color: #ffffff !important;
  border: none !important;
}

[data-theme="light"] .tech-badge.hot,
[data-theme="light"] .tech-badge.qa,
[data-theme="light"] .faq-tab.active,
[data-theme="light"] .tech-badge.trending {
  background: var(--flat-blue) !important;
  color: #ffffff !important;
  border-color: var(--flat-blue) !important;
}

/* Everything else loses its glow; overlays got theirs back in section 4. */
[data-theme="light"] section,
[data-theme="light"] .container,
[data-theme="light"] .panel,
[data-theme="light"] .tech-item,
[data-theme="light"] .globe-visual,
[data-theme="light"] .footer {
  box-shadow: none !important;
}

[data-theme="light"] .tech-item {
  background: var(--flat-white) !important;
  border: 1px solid var(--flat-border) !important;
}

[data-theme="light"] hr,
[data-theme="light"] .divider {
  border-color: var(--flat-border) !important;
  background: var(--flat-border) !important;
}

/* ============================================
   7. TEXT, LINKS & ACCENTS
   ============================================ */
[data-theme="light"] body {
  color: var(--flat-body) !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: var(--flat-ink) !important;
}

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] td {
  color: var(--flat-body);
}

[data-theme="light"] .text-muted,
[data-theme="light"] .section-subtitle {
  color: var(--flat-muted) !important;
}

/* Muted text on the band needs a notch more weight to clear AA */
[data-theme="light"] .section-alt .text-muted,
[data-theme="light"] .footer .text-muted {
  color: var(--text-muted-on-mist) !important;
}

[data-theme="light"] a {
  color: var(--flat-blue);
}

[data-theme="light"] a:hover {
  color: var(--flat-blue-strong);
}

[data-theme="light"] .footer a {
  color: var(--flat-body) !important;
}

[data-theme="light"] .footer a:hover {
  color: var(--flat-blue-strong) !important;
}

/* The footer heart, previously an inline teal hex on every page */
[data-theme="light"] .footer-heart,
[data-theme="light"] .bi-heart-fill {
  color: var(--flat-blue) !important;
}

/* The hero highlight underline was a gradient sweep */
[data-theme="light"] .hero-highlight {
  color: var(--flat-blue-strong) !important;
}

[data-theme="light"] .hero-highlight::after {
  background: var(--flat-tint) !important;
}

[data-theme="light"] i,
[data-theme="light"] .icon,
[data-theme="light"] svg.icon {
  color: inherit;
}

[data-theme="light"] .hero-badge i,
[data-theme="light"] .check-icon,
[data-theme="light"] .list-check i {
  color: var(--flat-blue) !important;
}

/* ============================================
   8. GRADIENT TEXT -> SOLID
   These elements paint their glyphs with a clipped gradient and set
   -webkit-text-fill-color: transparent. With the gradient gone they would
   render as invisible text, so the fill is handed back to `color`.
   ============================================ */
[data-theme="light"] *,
[data-theme="light"] *::before,
[data-theme="light"] *::after {
  -webkit-text-fill-color: currentColor !important;
}

/* Headings are the navy itself, so the words these classes highlight would
   vanish into them. They take the lighter step instead, which keeps the
   two-tone headline ("We Build *Software* That *Scales*") readable as two
   tones rather than one flat block of navy. */
[data-theme="light"] .text-gradient,
[data-theme="light"] .text-gradient-cyan,
[data-theme="light"] .text-gradient-violet,
[data-theme="light"] .text-gradient-amber,
[data-theme="light"] .text-gradient-multi,
[data-theme="light"] .gradient-text-animate,
[data-theme="light"] .shimmer-text,
[data-theme="light"] .shimmer-text-hover,
[data-theme="light"] .login-header h1 span {
  color: var(--flat-blue-strong) !important;
  background: none !important;
}

[data-theme="light"] .stat-value,
[data-theme="light"] .stat-card .stat-value,
[data-theme="light"] .counter-value,
[data-theme="light"] .hero-stat-value,
[data-theme="light"] .about-stat-value,
[data-theme="light"] .globe-stat-value {
  color: var(--flat-ink) !important;
  background: none !important;
}

/* ============================================
   9. CODE PANELS & DECORATIVE PLATES
   Two things in section 2 lost a background they actually needed.

   The code editor and the inline code preview used to be dark islands, and
   their syntax palette (#7fd3e8, #bfdbf7, #e1e5f2) is tuned for a dark
   ground — around 10:1 there, but under 1.5:1 once the dark gradient is
   gone. A dark block would also be the one heavy element left on a white
   page, so instead both panels become light and the syntax is re-cut from
   the navy ramp. Measured on the #f5f5fd panel:
       #010070 function 15.67   #2a2ac0 keyword 8.84
       #414a6b plain     8.01   #626a8c string  4.89  — all AA.

   The case-study panel is not an image at all: it is a tinted plate that
   holds the badge and tech-stack chips, so it becomes a flat tint.
   ============================================ */
[data-theme="light"] .code-editor,
[data-theme="light"] .code-preview {
  background-color: #f5f5fd !important;
  border: 1px solid var(--flat-border) !important;
  box-shadow: none !important;
  /* the editor carried a perspective/rotate tilt — flat means flat */
  transform: none !important;
}

[data-theme="light"] .code-editor .editor-header,
[data-theme="light"] .code-editor .editor-footer {
  background-color: var(--flat-band) !important;
  border-color: var(--flat-border) !important;
}

[data-theme="light"] .code-editor .editor-tabs .tab.active,
[data-theme="light"] .code-editor .tab.active {
  background-color: var(--flat-blue) !important;
  color: #ffffff !important;
}

/* Plain code text, the caret and the gutter */
[data-theme="light"] .code-editor,
[data-theme="light"] .code-editor .code-content,
[data-theme="light"] .code-editor .code-line,
[data-theme="light"] .code-preview,
[data-theme="light"] .code-preview .code-line {
  color: var(--flat-body) !important;
}

[data-theme="light"] .code-editor .editor-title,
[data-theme="light"] .code-editor .editor-footer span,
[data-theme="light"] .code-editor .line-numbers span,
[data-theme="light"] .code-editor .editor-tabs .tab {
  color: var(--flat-muted) !important;
}

[data-theme="light"] .cursor {
  color: var(--flat-blue) !important;
}

/* Syntax, re-cut from the blue ramp */
[data-theme="light"] .function,
[data-theme="light"] .code-preview .c-func {
  color: var(--flat-ink) !important;
}

[data-theme="light"] .keyword,
[data-theme="light"] .code-preview .c-keyword {
  color: var(--flat-blue-strong) !important;
}

[data-theme="light"] .property,
[data-theme="light"] .number {
  color: var(--flat-blue) !important;
}

[data-theme="light"] .string,
[data-theme="light"] .code-preview .c-string {
  color: var(--flat-muted) !important;
}

[data-theme="light"] .variable {
  color: var(--flat-body) !important;
}

/* The window dots read as decoration, not status, so they stay one colour */
[data-theme="light"] .editor-dots .dot {
  background-color: #c3c3ea !important;
}

[data-theme="light"] .case-study-image {
  background-color: var(--flat-tint) !important;
}

[data-theme="light"] .case-study-overlay {
  background: none !important;
}

[data-theme="light"] .case-study-badge {
  background-color: var(--flat-blue) !important;
  color: #ffffff !important;
}

[data-theme="light"] .case-study-tech-stack span {
  background-color: var(--flat-white) !important;
  color: var(--flat-blue-strong) !important;
  border: 1px solid var(--flat-border) !important;
}

/* ============================================
   10. FORMS & FOCUS
   A visible focus ring matters more once every transition is gone.
   ============================================ */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: var(--flat-white) !important;
  border: 1px solid var(--flat-border) !important;
  color: var(--flat-ink) !important;
  box-shadow: none !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--flat-muted) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: var(--flat-blue) !important;
  outline: 2px solid var(--flat-blue) !important;
  outline-offset: 1px !important;
}

[data-theme="light"] a:focus-visible,
[data-theme="light"] button:focus-visible,
[data-theme="light"] .btn:focus-visible {
  outline: 2px solid var(--flat-blue) !important;
  outline-offset: 2px !important;
}

/* ::selection stays blue rather than the browser default */
[data-theme="light"] ::selection {
  background: var(--flat-tint);
  color: var(--flat-ink);
}