/*
 * Godrix Light Theme — palette, corrections & theme toggle
 *
 * Light is the default theme. design-system.css ships a large
 * [data-theme="light"] block; this file loads after it, re-tokenises the
 * theme onto the Godrix palette, and styles the theme toggle.
 *
 * PALETTE
 *   #022b3a  deep    ink, headings, dark panels, logo mark
 *   #1d6fd0  blue    links, secondary fills, icons
 *   #bfdbf7  sky     tint only — badges, selected states (NOT a background)
 *   #e1e5f2  mist    alternating section bands, card borders
 *   #ffffff  white   page
 *
 * FIVE COLOURS ONLY. No green, no gold, nothing outside the list above.
 * An earlier revision added mint (#5affa0) as a sixth "accent" for CTAs;
 * it has been removed because it was never part of the brief.
 *
 * Action hierarchy is built from value, not extra hue:
 *   primary   #022b3a deep fill, white text   14.90:1
 *   secondary #1d6fd0 blue fill, white text    4.96:1
 *   tertiary  transparent, blue text + border
 *
 * sky and mist are only 1.14:1 apart, so they are NOT two usable
 * backgrounds. mist is the band; sky is a tint on top of it.
 *
 * Contents
 *   1. Palette tokens
 *   2. Navbar & logo
 *   3. Buttons
 *   4. Section tags & accents
 *   5. CTA panel
 *   6. Text & surfaces (incl. the mist-band constraint)
 *   7. Theme toggle
 *   8. Dark-theme toggle styling
 *   9. Constellation particles
 *  10. Accent-as-text corrections (page-specific components)
 *  11. Dark islands (code editor)
 */

/* ============================================
   1. PALETTE TOKENS
   Ratios below are measured against #ffffff / #e1e5f2.
   ============================================ */
[data-theme="light"] {
  /* Brand ramp */
  --deep: #022b3a;          /* 14.90 on white */
  --blue: #1d6fd0;          /*  4.96 on white — AA for normal text */
  --blue-strong: #17509f;   /*  7.82 on white — hover / small text */
  --sky: #bfdbf7;           /* tint only */
  --mist: #e1e5f2;          /* alternating band */
  /* No mint. Kept as aliases pointing at palette colours so any rule that
     still references them stays inside the five. */
  --mint: #1d6fd0;
  --mint-light: #17509f;

  /* Interactive ink */
  --primary-ink: var(--blue);
  --primary-ink-strong: var(--blue-strong);

  /* Text sitting ON a mint / blue / deep surface */
  --on-primary: #022b3a;

  /* Text ramp */
  --text-white: #022b3a;    /* headings            14.90 */
  --text-gray: #2f4858;     /* body                 9.59 */
  --text-muted: #5a7183;    /* muted on white       5.09 */
  --text-muted-on-mist: #4d6373; /* muted on #e1e5f2   4.99 */
  --text-dark: #5a7183;

  /* Surfaces */
  --surface-page: #ffffff;
  --surface-alt: #e1e5f2;
  --surface-card: #ffffff;
  --border-soft: #d4dbe8;
  --border-strong: rgba(29, 111, 208, 0.35);

  /* Legacy aliases used across design-system.css */
  --black-dark: #ffffff;
  --black-base: #ffffff;
  --black-light: #e1e5f2;
  --black-lighter: #d4dbe8;
  --primary: var(--blue);
  --primary-light: var(--blue);
  --primary-dark: var(--blue-strong);
  /* design-system.css defines this as a mint ramp in its own light block;
     it feeds the active nav underline, icon fills and several accents. */
  --primary-gradient: linear-gradient(135deg, #17509f 0%, #1d6fd0 45%, #4a90e2 100%);
  --primary-green: var(--blue);
  --primary-green-dark: var(--blue-strong);
  --accent-cyan: var(--blue);
  --accent-cyan-dark: var(--blue-strong);
}

[data-theme="light"] body {
  background: var(--surface-page);
  color: var(--text-gray);
}

[data-theme="light"] .section-alt {
  background: var(--surface-alt);
}

/* ============================================
   2. NAVBAR & LOGO
   The wordmark and tagline were mint on white — the reason the whole
   navbar appeared blank.
   ============================================ */
[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

[data-theme="light"] .navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.05);
}

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

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

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

[data-theme="light"] .nav-links a {
  color: var(--text-gray);
}

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

/* ============================================
   3. BUTTONS
   ============================================ */

/* Primary: deep fill, white text — 14.90:1, the strongest pairing available
   from the five. Hover lifts to blue (white on #1d6fd0 = 4.96:1) so the
   button brightens toward the brand colour rather than going grey. */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #022b3a 0%, #06305e 60%, #0d3f7a 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(2, 43, 58, 0.16), 0 6px 18px rgba(2, 43, 58, 0.18);
}

[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #0d3f7a 0%, #1a5cb0 60%, #1d6fd0 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(2, 43, 58, 0.2), 0 12px 28px rgba(29, 111, 208, 0.26);
}

/* Secondary: blue fill, white text — 4.96:1, hover deepens to 7.82:1 */
[data-theme="light"] .btn-secondary {
  background: var(--blue);
  color: #ffffff;
  border: none;
}

[data-theme="light"] .btn-secondary:hover {
  background: var(--blue-strong);
  color: #ffffff;
}

/* Tertiary outline: blue at 30%, filling to an 8% tint on hover */
[data-theme="light"] .btn-outline {
  border: 2px solid rgba(29, 111, 208, 0.3);
  color: var(--blue-strong);
  background: transparent;
}

[data-theme="light"] .btn-outline:hover {
  background: rgba(29, 111, 208, 0.08);
  border-color: var(--blue);
  color: var(--blue-strong);
  box-shadow: 0 2px 10px rgba(29, 111, 208, 0.14);
}

/* Inside the deep CTA panel these sit on #022b3a, not on white */
[data-theme="light"] .cta-content .btn-dark {
  background: #ffffff;
  color: var(--deep);
}

[data-theme="light"] .cta-content .btn-dark:hover {
  background: var(--mist);
}

[data-theme="light"] .cta-content .btn-ghost-dark {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

[data-theme="light"] .cta-content .btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   4. SECTION TAGS & ACCENTS
   ============================================ */
[data-theme="light"] .section-tag {
  color: var(--blue-strong);
  background: var(--sky);
  border: 1px solid rgba(29, 111, 208, 0.22);
}

[data-theme="light"] .section-tag::before {
  background: var(--primary-ink);
}

/* The breathing glow from shimmer.css is far too strong on white */
[data-theme="light"] .section-tag::after {
  box-shadow: 0 0 14px -6px var(--blue);
}

[data-theme="light"] .hero-badge {
  background: #ffffff;
  border: 1px solid var(--border-soft);
  color: var(--text-gray);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .hero-badge i {
  color: var(--blue);
}

/* Was mint -> amber at 0.3 opacity, which renders as muddy tan on white */
[data-theme="light"] .hero-highlight::after {
  background: linear-gradient(90deg, rgba(29, 111, 208, 0.75), rgba(191, 219, 247, 0.6));
  opacity: 1;
}

[data-theme="light"] .trust-item i,
[data-theme="light"] .hero-trust-logos i {
  color: var(--blue-strong);
}

/* ============================================
   5. CTA PANEL
   A bright mint panel with white text was 1.5:1. A deep emerald panel
   with white text reads as premium and passes contrast.
   ============================================ */
[data-theme="light"] .cta-content {
  background: linear-gradient(135deg, #022b3a 0%, #0d3f7a 55%, #1d6fd0 100%);
  box-shadow: 0 8px 32px rgba(2, 43, 58, 0.22), 0 16px 64px rgba(2, 43, 58, 0.14);
}

[data-theme="light"] .cta-content h2,
[data-theme="light"] .cta-content p {
  color: #ffffff;
}

[data-theme="light"] .cta-content p {
  opacity: 0.92;
}

/* ============================================
   6. MUTED TEXT CORRECTIONS
   Several muted greys landed between 3:1 and 4.5:1 on white.
   ============================================ */
[data-theme="light"] .hero-trust-label,
[data-theme="light"] .footer-bottom,
[data-theme="light"] .text-muted {
  color: var(--text-muted);
}

[data-theme="light"] .hero-stat-label {
  color: var(--text-gray);
}

[data-theme="light"] .footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--border-soft);
}

/* Links use blue and DARKEN on hover */
[data-theme="light"] .footer a {
  color: var(--text-gray);
}

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

/* Wrapped in :where() so this baseline link colour carries (0,1,0)
   specificity. Every region rule below (.navbar, .footer, .section-alt)
   then wins on its own terms instead of fighting a long :not() chain. */
[data-theme="light"] :where(a:not(.btn):not(.logo)) {
  color: var(--blue);
}

[data-theme="light"] :where(a:not(.btn):not(.logo)):hover {
  color: var(--blue-strong);
}

/* Cards need a visible edge once the page is white */
[data-theme="light"] .card,
[data-theme="light"] .service-card,
[data-theme="light"] .industry-card,
[data-theme="light"] .case-study-card,
[data-theme="light"] .tech-card,
[data-theme="light"] .team-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .stat-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 2px rgba(2, 43, 58, 0.04), 0 4px 14px rgba(2, 43, 58, 0.05);
}

[data-theme="light"] .card:hover,
[data-theme="light"] .service-card:hover,
[data-theme="light"] .industry-card:hover,
[data-theme="light"] .case-study-card:hover,
[data-theme="light"] .tech-card:hover,
[data-theme="light"] .team-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .stat-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 6px rgba(2, 43, 58, 0.07), 0 14px 34px rgba(29, 111, 208, 0.14);
}

/* ============================================
   9. CONSTELLATION PARTICLES
   Canvas field mounted behind .hero / .page-header by particles.js.
   The colour is read from --particle-rgb, so the field follows the theme.
   ============================================ */
:root {
  /* single theme: navy dots on the white page */
  --particle-rgb: 1, 0, 112;
}

[data-theme="light"] {
  /* light theme: navy. mint would be invisible on white (1.29:1) */
  --particle-rgb: 1, 0, 112;
}

/* The hero hosts the field, so it is the containing block for it.
   `isolation: isolate` also makes it a stacking context, which is what
   lets the canvas use z-index:-1 below. */
.hero,
.page-header {
  position: relative;
  isolation: isolate;
}

/* z-index:-1 inside a stacking context paints AFTER the hero's own
   background but BEFORE its in-flow content — exactly the slot the field
   wants, and it keeps every hero child above the dots without each one
   needing a z-index of its own. */
.particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: -1;
}

/* The hero's own decoration is positioned, so it still needs to be told to
   sit above the field. */
.hero > .container,
.page-header > .container {
  position: relative;
  z-index: 1;
}

/* The homepage hero already layers its own glow/grid decoration; those are
   siblings inserted after the canvas, so they keep painting above it. */

/* ============================================
   10. MINT-AS-TEXT CORRECTIONS
   Components defined in page-level <style> blocks that use the brand mint
   (#5affa0) as a TEXT colour. Each measured 1.25–1.29:1 against white,
   i.e. effectively invisible. This file loads after those inline blocks,
   and [data-theme="light"] .x outranks a bare .x, so these win.
   ============================================ */

/* index.html — service cards */
[data-theme="light"] .service-number {
  color: var(--blue-strong);
}

[data-theme="light"] .service-cta span,
[data-theme="light"] .service-cta i {
  color: var(--blue-strong);
}

/* index.html + about.html — team member role */
[data-theme="light"] .role {
  color: var(--blue-strong);
}

/* index.html — technology badges */
[data-theme="light"] .tech-badge {
  color: var(--blue-strong);
  background: var(--sky);
  border-color: rgba(29, 111, 208, 0.22);
}

/* Inner page headers — the large icon glyph */
[data-theme="light"] .page-header .icon-large {
  color: var(--primary-ink);
  background: linear-gradient(135deg, rgba(29, 111, 208, 0.12) 0%, rgba(29, 111, 208, 0.04) 100%);
  border-color: rgba(29, 111, 208, 0.2);
}

[data-theme="light"] .page-header .icon-large i {
  color: var(--blue-strong);
}

/* vault.html — role cards */
[data-theme="light"] .role-card h3,
[data-theme="light"] .role-card h3 i {
  color: var(--primary-ink-strong);
}

/* vault-login.html */
[data-theme="light"] .forgot-link,
[data-theme="light"] .login-footer a,
[data-theme="light"] .back-link {
  color: var(--blue-strong);
}

[data-theme="light"] .forgot-link:hover,
[data-theme="light"] .login-footer a:hover,
[data-theme="light"] .back-link:hover {
  color: var(--primary-ink-strong);
}

/* .login-btn takes color: var(--black-dark), which resolves to #ffffff in
   light theme — white text on a mint fill. Same shape as the .btn-primary
   bug in section 3. */
[data-theme="light"] .login-btn {
  background: linear-gradient(135deg, #022b3a 0%, #06305e 60%, #0d3f7a 100%);
  color: #ffffff;
}

[data-theme="light"] .login-btn:hover {
  background: linear-gradient(135deg, #0d3f7a 0%, #1a5cb0 60%, #1d6fd0 100%);
  color: #ffffff;
}

/* Footer copyright line sat at 4.20:1 on the alt band */
[data-theme="light"] .footer-bottom p,
[data-theme="light"] .footer-bottom {
  color: var(--text-muted);
}

/* index.html:1997 sets [data-theme="light"] .team-card .role to var(--primary),
   i.e. mint on white. Same specificity, but this file loads after that inline
   block, so it wins. */
[data-theme="light"] .team-card .role {
  color: var(--blue-strong);
}

/* design-system.css:5305 pinned this to #4a7ab0 (4.47:1) */
[data-theme="light"] .trust-header span {
  color: var(--text-muted);
}

/* ============================================
   11. DARK ISLANDS
   The hero code editor is a deliberately dark UI sitting on a light page.
   Its text inherits --text-muted, which is now a dark blue tuned for white
   backgrounds — 2.78:1 against the editor's #21262d chrome. Inside this
   island the light-theme text tokens have to be undone.
   ============================================ */
[data-theme="light"] .code-editor,
[data-theme="light"] .code-editor .editor-header,
[data-theme="light"] .code-editor .editor-footer {
  color: #8dabb9;
}

[data-theme="light"] .code-editor .editor-title,
[data-theme="light"] .code-editor .editor-footer span,
[data-theme="light"] .code-editor .line-numbers span {
  color: #8dabb9;
}

[data-theme="light"] .code-editor .editor-tabs .tab {
  color: #8dabb9;
}

[data-theme="light"] .code-editor .editor-tabs .tab.active {
  color: var(--sky, #bfdbf7);
}

[data-theme="light"] .code-editor .code-content {
  color: #d6e4ec;
}

/* ============================================
   12. THE MIST BAND
   #e1e5f2 is a real surface, not a near-white. Against it the two lightest
   ink values fall under AA:
       --text-muted #5a7183  ->  4.05
       --blue       #1d6fd0  ->  3.94
   So anything sitting on a mist surface (.section-alt, .footer) steps one
   notch darker. Measured on #e1e5f2: #4d6373 = 4.99, #17509f = 6.22.
   ============================================ */
[data-theme="light"] .section-alt .text-muted,
[data-theme="light"] .section-alt .logo-text span,
[data-theme="light"] .footer .text-muted,
[data-theme="light"] .footer .logo-text span,
[data-theme="light"] .footer-bottom,
[data-theme="light"] .footer-bottom p,
[data-theme="light"] .footer .hero-trust-label,
[data-theme="light"] .footer p {
  color: var(--text-muted-on-mist);
}

[data-theme="light"] .section-alt a:not(.btn):not(.logo),
[data-theme="light"] .footer a:not(.btn):not(.logo) {
  color: var(--blue-strong);
}

[data-theme="light"] .section-alt a:not(.btn):not(.logo):hover,
[data-theme="light"] .footer a:not(.btn):not(.logo):hover {
  color: var(--deep);
}

/* The footer carries the logo lockup too */
[data-theme="light"] .footer .logo-text h1 {
  color: var(--deep);
}

/* ============================================
   14. REMAINING OFF-PALETTE COMPONENTS
   These are declared as base rules (not inside a [data-theme] block), so
   they escaped the palette remap. Status badges keep their differentiation
   through palette intensity rather than hue, so "hot" still outranks "qa"
   without reaching outside the five colours.
   ============================================ */
[data-theme="light"] .tech-badge.hot {
  background: var(--deep);
  color: #ffffff;
}

[data-theme="light"] .tech-badge.trending {
  background: var(--blue);
  color: #ffffff;
}

[data-theme="light"] .tech-badge {
  background: var(--sky);
  color: var(--blue-strong);
}

[data-theme="light"] .tech-badge.design {
  background: var(--sky);
  color: var(--deep);
}

[data-theme="light"] .tech-badge.qa {
  background: var(--deep);
  color: #ffffff;
}

/* index.html:1949 uses [data-theme="light"] .tech-items .tech-item (0,3,0),
   so this has to match that specificity to win. */
[data-theme="light"] .tech-item,
[data-theme="light"] .tech-items .tech-item {
  background: #ffffff;
  border: 1px solid var(--border-soft);
}

[data-theme="light"] .globe-particle {
  background: var(--blue);
}

/* The editor is a dark island, but its outer rim belongs to the palette */
[data-theme="light"] .code-editor {
  border-color: rgba(29, 111, 208, 0.35);
}

/* Editor chrome: palette blue rather than the stray #4ade80 */
.code-editor .tab.active {
  background: var(--blue, #1f7a8c);
  color: #ffffff;
}