/* ==========================================================================
   MOVIEMAN GARY PRODUCTIONS — HIGH-CONTRAST AESTHETICS ENGINE
   Ensures zero invisible text, zero low-contrast clashes across all themes:
   1. [data-theme="vhs"]         (Default: 1980s Analog Tape / CRT Synth)
   2. [data-theme="comicbook"]   (Marvel Comics Graphic Novel)
   3. [data-theme="noir"]        (1940s High-Contrast Film Noir B&W)
   4. [data-theme="cyberpunk"]   (Blade Runner Neon HUD)
   5. [data-theme="technicolor"] (1950s 3-Strip Saturated / Pastel Indie)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COMICBOOK AESTHETIC (LIGHT THEME - MARVEL GRAPHIC NOVEL)
   White & cream newsprint paper, 3px solid black ink borders,
   100% black & dark charcoal text, Marvel hero red and action yellow.
   -------------------------------------------------------------------------- */

[data-theme="comicbook"] {
  --bg-body: #faf4e3;
  --bg-surface: #f5eed8;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --footer-bg: #111111;
  --topbar-bg: #ffd000;
  --toast-bg: #ffffff;

  --border-color: #111111;
  --border-light: #111111;
  --primary: #e60026;         /* Marvel Red */
  --primary-light: #ffd000;   /* Action Yellow */
  --primary-dark: #111111;
  --primary-glow: rgba(230, 0, 38, 0.25);

  /* High-Contrast Dark Text on Light Paper */
  --text-primary: #000000;    /* Solid Black Ink - 19:1 contrast */
  --text-secondary: #1a1a1a;  /* Near Black - 16:1 contrast */
  --text-muted: #4b5563;      /* Deep Charcoal - 7.5:1 contrast */
  --text-accent: #b91c1c;     /* Deep Red - 6.2:1 contrast */
  --input-text: #000000;      /* Solid Black typing text */
  --input-placeholder: #4b5563;

  /* Button Tokens */
  --btn-primary-bg: #e60026;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #000000;
  --btn-secondary-border: #111111;

  /* Tags */
  --tag-bg: #ffd000;
  --tag-text: #000000;
  --tag-time-bg: #111111;
  --tag-time-text: #ffffff;

  /* Typography */
  --font-display: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  --font-heading: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  --radius-sm: 2px;
  --radius-md: 4px;
}

[data-theme="comicbook"] body {
  background-color: #faf4e3;
  background-image: radial-gradient(#d3c9b0 18%, transparent 18%), radial-gradient(#d3c9b0 18%, transparent 18%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  color: #000000;
}

[data-theme="comicbook"] .top-bar {
  background-color: #ffd000;
  border-bottom: 3px solid #111111;
  color: #111111;
}

[data-theme="comicbook"] .top-bar-contact a,
[data-theme="comicbook"] .top-bar-right span {
  color: #111111;
  font-weight: 700;
}

[data-theme="comicbook"] .top-bar-badge {
  background-color: #e60026;
  color: #ffffff;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0px #111111;
}

[data-theme="comicbook"] .top-toggle-btn {
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0px #111111;
  font-weight: 700;
}

[data-theme="comicbook"] .site-header {
  background-color: #ffffff;
  border-bottom: 3px solid #111111;
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.15);
}

[data-theme="comicbook"] .brand-title {
  color: #e60026;
  font-size: 1.55rem;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0px #ffd000, 3px 3px 0px #111111;
}

[data-theme="comicbook"] .brand-sub {
  color: #111111;
  font-weight: 800;
}

[data-theme="comicbook"] .nav-link {
  color: #111111;
  font-weight: 800;
  font-size: 0.95rem;
}

[data-theme="comicbook"] .nav-link:hover,
[data-theme="comicbook"] .nav-link.active {
  color: #e60026;
}

[data-theme="comicbook"] .btn-cta-nav {
  background: #ffd000;
  color: #111111;
  border: 3px solid #111111;
  box-shadow: 3px 3px 0px #111111;
  font-weight: 900;
}

[data-theme="comicbook"] .btn-cta-nav:hover {
  background: #e60026;
  color: #ffffff;
}

[data-theme="comicbook"] .hero-section {
  background: #faf4e3;
  border-bottom: 3px solid #111111;
}

[data-theme="comicbook"] .hero-headline {
  color: #000000;
  font-size: 4.2rem;
  line-height: 0.95;
  letter-spacing: 1px;
  text-shadow: 3px 3px 0px #ffd000, 5px 5px 0px #111111;
}

@media (max-width: 600px) {
  [data-theme="comicbook"] .hero-headline {
    font-size: 2.6rem;
    text-shadow: 2px 2px 0px #ffd000, 3px 3px 0px #111111;
  }
}

@media (max-width: 380px) {
  [data-theme="comicbook"] .hero-headline {
    font-size: 2.1rem;
  }
}

[data-theme="comicbook"] .hero-headline .text-gold {
  color: #e60026;
  background: none;
  -webkit-text-fill-color: initial;
}

[data-theme="comicbook"] .hero-lead {
  color: #e60026;
  font-weight: 900;
  font-size: 1.25rem;
}

[data-theme="comicbook"] .hero-bio {
  color: #111111;
  font-weight: 500;
}

[data-theme="comicbook"] .hero-service-bullets li {
  color: #111111;
  font-weight: 600;
}

[data-theme="comicbook"] .btn-primary {
  background: #e60026;
  color: #ffffff;
  border: 3px solid #111111;
  box-shadow: 4px 4px 0px #111111;
  font-weight: 900;
}

[data-theme="comicbook"] .btn-primary:hover {
  background: #ffd000;
  color: #111111;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #111111;
}

[data-theme="comicbook"] .btn-secondary {
  background: #ffffff;
  color: #000000;
  border: 3px solid #111111;
  box-shadow: 4px 4px 0px #111111;
  font-weight: 800;
}

[data-theme="comicbook"] .showcase-video-card,
[data-theme="comicbook"] .clapperboard-box,
[data-theme="comicbook"] .about-photo-card,
[data-theme="comicbook"] .discipline-card,
[data-theme="comicbook"] .service-card,
[data-theme="comicbook"] .project-card,
[data-theme="comicbook"] .gear-container,
[data-theme="comicbook"] .gear-card,
[data-theme="comicbook"] .calc-panel,
[data-theme="comicbook"] .contact-card-sidebar,
[data-theme="comicbook"] .booking-form-box,
[data-theme="comicbook"] .secret-console-box,
[data-theme="comicbook"] .process-step-card,
[data-theme="comicbook"] .testimonial-card,
[data-theme="comicbook"] .faq-item,
[data-theme="comicbook"] .modal-dialog,
[data-theme="comicbook"] .toast-notice {
  background: #ffffff;
  border: 3px solid #111111;
  box-shadow: 5px 5px 0px #111111;
  color: #000000;
}

[data-theme="comicbook"] .service-card:hover,
[data-theme="comicbook"] .project-card:hover {
  border-color: #111111;
  box-shadow: 8px 8px 0px #111111;
  transform: translate(-2px, -2px);
}

[data-theme="comicbook"] .clapper-body-fields {
  background-color: #f5eed8;
}

[data-theme="comicbook"] .slate-cell {
  background: #ffffff;
  border: 2px solid #111111;
}

[data-theme="comicbook"] .slate-val {
  color: #e60026;
}

[data-theme="comicbook"] .section-title {
  color: #000000;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0px #ffd000, 4px 4px 0px #111111;
}

[data-theme="comicbook"] .section-tag {
  color: #e60026;
  font-weight: 900;
}

[data-theme="comicbook"] .section-subtitle,
[data-theme="comicbook"] .about-text,
[data-theme="comicbook"] .service-text,
[data-theme="comicbook"] .project-desc,
[data-theme="comicbook"] .gear-card-desc,
[data-theme="comicbook"] .modal-synopsis {
  color: #1a1a1a;
}

[data-theme="comicbook"] .stats-ribbon {
  background: #ffffff;
  border-top: 3px solid #111111;
  border-bottom: 3px solid #111111;
}

[data-theme="comicbook"] .stat-number {
  color: #e60026;
  text-shadow: 2px 2px 0px #ffd000, 3px 3px 0px #111111;
}

[data-theme="comicbook"] .stat-title {
  color: #000000;
  font-weight: 800;
}

[data-theme="comicbook"] .stat-sub {
  color: #374151;
  font-weight: 600;
}

[data-theme="comicbook"] .service-icon-box {
  background: #ffd000;
  color: #111111;
  border: 2px solid #111111;
  box-shadow: 2px 2px 0px #111111;
}

[data-theme="comicbook"] .calc-output-box {
  background: #fffdf5;
  border: 2px solid #111111;
}

[data-theme="comicbook"] .calc-out-val {
  color: #e60026;
}

[data-theme="comicbook"] .form-input,
[data-theme="comicbook"] .calc-select,
[data-theme="comicbook"] .secret-code-input {
  background: #ffffff;
  border: 2px solid #111111;
  color: #000000;
  box-shadow: 2px 2px 0px #111111;
}

[data-theme="comicbook"] .form-input:focus,
[data-theme="comicbook"] .calc-select:focus,
[data-theme="comicbook"] .secret-code-input:focus {
  border-color: #e60026;
}

[data-theme="comicbook"] .site-footer {
  background: #111111;
  color: #ffffff;
  border-top: 4px solid #ffd000;
}

[data-theme="comicbook"] .site-footer a,
[data-theme="comicbook"] .footer-brand-title,
[data-theme="comicbook"] .footer-col h4 {
  color: #ffffff;
}

[data-theme="comicbook"] .footer-brand-bio,
[data-theme="comicbook"] .footer-bottom {
  color: #d1d5db;
}


/* --------------------------------------------------------------------------
   2. NOIR AESTHETIC (1940s CHIAROSCURO - HIGH-CONTRAST B&W)
   Stark black & white, venetian blind light stripes, typewriter font,
   crisp white & silver text, blood-red accents. Never dark gray on black!
   -------------------------------------------------------------------------- */

[data-theme="noir"] {
  --bg-body: #050505;
  --bg-surface: #0b0b0b;
  --bg-card: #101010;
  --bg-input: #080808;
  --footer-bg: #030303;
  --topbar-bg: #000000;
  --toast-bg: #101010;

  --border-color: #404040;
  --border-light: #262626;
  --primary: #ffffff;
  --primary-light: #ffffff;
  --primary-dark: #737373;
  --primary-glow: rgba(255, 255, 255, 0.2);

  /* High-Contrast White & Silver Text */
  --text-primary: #ffffff;    /* Pure White - 21:1 contrast */
  --text-secondary: #e5e5e5;  /* Crisp Silver - 16:1 contrast */
  --text-muted: #d4d4d4;      /* High-visibility Light Silver - 13:1 contrast */
  --text-accent: #ff2d46;     /* Vivid Crimson - 6.2:1 contrast against black */
  --input-text: #ffffff;
  --input-placeholder: #888888;

  /* Buttons */
  --btn-primary-bg: #ffffff;
  --btn-primary-text: #000000;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #ffffff;
  --btn-secondary-border: #ffffff;

  /* Tags */
  --tag-bg: #000000;
  --tag-text: #ffffff;
  --tag-time-bg: #ffffff;
  --tag-time-text: #000000;

  /* Typography */
  --font-display: 'Courier Prime', 'Courier New', monospace;
  --font-heading: 'Courier Prime', 'Courier New', monospace;
  --font-mono: 'Courier Prime', 'Courier New', monospace;
}

[data-theme="noir"] body {
  background: repeating-linear-gradient(
    -45deg,
    #050505,
    #050505 24px,
    #0a0a0a 24px,
    #0a0a0a 48px
  );
  color: #ffffff;
}

[data-theme="noir"] .top-bar-badge {
  background: #d90429;
  color: #ffffff;
  border-color: #d90429;
}

[data-theme="noir"] .hero-headline {
  letter-spacing: 2px;
}

[data-theme="noir"] .hero-headline .text-gold {
  color: #ff2d46;
}

[data-theme="noir"] .btn-primary {
  background: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
  font-weight: 800;
}

[data-theme="noir"] .btn-primary:hover {
  background: #d90429;
  color: #ffffff;
  border-color: #d90429;
}

[data-theme="noir"] .project-thumb-box img,
[data-theme="noir"] .video-thumb-trigger img,
[data-theme="noir"] .about-photo-wrapper img {
  filter: grayscale(100%) contrast(150%) brightness(95%);
}

[data-theme="noir"] .service-card:hover,
[data-theme="noir"] .project-card:hover {
  border-color: #ffffff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}


/* --------------------------------------------------------------------------
   3. CYBERPUNK AESTHETIC (BLADE RUNNER - NEON CAMERA HUD)
   Obsidian midnight, electric neon cyan, hot magenta,
   high-contrast cyan text, illuminated telemetry readouts.
   -------------------------------------------------------------------------- */

[data-theme="cyberpunk"] {
  --bg-body: #060812;
  --bg-surface: #0a0e1f;
  --bg-card: #0d1226;
  --bg-input: #080c1a;
  --footer-bg: #04050a;
  --topbar-bg: #04050a;
  --toast-bg: #0d1226;

  --border-color: rgba(0, 240, 255, 0.35);
  --border-light: rgba(0, 240, 255, 0.15);
  --primary: #00f0ff;         /* Neon Cyan */
  --primary-light: #ffffff;
  --primary-dark: #ff0055;    /* Hot Magenta */
  --primary-glow: rgba(0, 240, 255, 0.4);

  /* High-Contrast Luminous Text */
  --text-primary: #ffffff;    /* Pure White - 20:1 contrast */
  --text-secondary: #d1f2ff;  /* Bright Ice Cyan - 15:1 contrast */
  --text-muted: #93c5fd;      /* Clear Sky Blue - 9.5:1 contrast - NEVER dark blue! */
  --text-accent: #00f0ff;     /* Electric Cyan Glow - 13:1 contrast */
  --input-text: #00f0ff;      /* Terminal Cyan */
  --input-placeholder: #60a5fa;

  /* Buttons */
  --btn-primary-bg: #ff0055;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #00f0ff;
  --btn-secondary-border: #00f0ff;

  /* Tags */
  --tag-bg: rgba(0, 240, 255, 0.15);
  --tag-text: #00f0ff;
  --tag-time-bg: rgba(255, 0, 85, 0.3);
  --tag-time-text: #ffffff;

  --font-heading: 'Courier Prime', monospace;
}

[data-theme="cyberpunk"] body {
  background-color: #060812;
  background-image: linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}

[data-theme="cyberpunk"] .brand-title {
  color: #00f0ff;
  text-shadow: 0 0 10px #00f0ff, 0 0 20px rgba(0, 240, 255, 0.5);
}

[data-theme="cyberpunk"] .hero-headline .text-gold {
  color: #00f0ff;
  text-shadow: 0 0 20px #00f0ff;
}

[data-theme="cyberpunk"] .btn-primary {
  background: #ff0055;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(255, 0, 85, 0.5);
}

[data-theme="cyberpunk"] .btn-primary:hover {
  background: #00f0ff;
  color: #000000;
  box-shadow: 0 0 25px #00f0ff;
}

[data-theme="cyberpunk"] .service-card:hover,
[data-theme="cyberpunk"] .project-card:hover {
  border-color: #00f0ff;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
}


/* --------------------------------------------------------------------------
   4. VHS AESTHETIC (1980s ANALOG TAPE / SYNTHWAVE)
   CRT scanlines, neon orange, laser purple, chromatic text shadows,
   high-contrast lavender & bright white text.
   -------------------------------------------------------------------------- */

[data-theme="vhs"] {
  --bg-body: #090412;
  --bg-surface: #100720;
  --bg-card: #150a2a;
  --bg-input: #0c0518;
  --footer-bg: #06020c;
  --topbar-bg: #06020c;
  --toast-bg: #150a2a;

  --border-color: #7209b7;
  --border-light: rgba(114, 9, 183, 0.35);
  --primary: #ff5400;         /* 80s Hot Orange */
  --primary-light: #ffbd00;
  --primary-dark: #7209b7;    /* Laser Purple */
  --primary-glow: rgba(255, 84, 0, 0.4);

  /* High-Contrast Text */
  --text-primary: #ffffff;    /* Pure White - 20:1 contrast */
  --text-secondary: #f3e8ff;  /* Light Lavender White - 17:1 contrast */
  --text-muted: #d8b4fe;      /* Bright Lavender - 11:1 contrast - NEVER dark purple! */
  --text-accent: #ff7b00;     /* Neon Orange - 8.5:1 contrast */
  --input-text: #ffffff;
  --input-placeholder: #a855f7;

  /* Buttons */
  --btn-primary-bg: linear-gradient(90deg, #ff5400 0%, #7209b7 100%);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #ffffff;
  --btn-secondary-border: #ff7b00;

  /* Tags */
  --tag-bg: #7209b7;
  --tag-text: #ffffff;
  --tag-time-bg: #ff5400;
  --tag-time-text: #000000;

  --font-display: 'Courier Prime', monospace;
  --font-heading: 'Courier Prime', monospace;
}

[data-theme="vhs"] body {
  background: repeating-linear-gradient(
    0deg,
    #090412,
    #090412 2px,
    #06030c 2px,
    #06030c 4px
  );
}

[data-theme="vhs"] .brand-title {
  color: #ff5400;
  text-shadow: -2px 0 #00f0ff, 2px 0 #ff0055;
}

[data-theme="vhs"] .hero-headline {
  text-shadow: -3px 0 #00f0ff, 3px 0 #ff0055;
}

[data-theme="vhs"] .hero-headline .text-gold {
  color: #ffbd00;
  text-shadow: -2px 0 #00f0ff, 2px 0 #ff0055;
  background: none;
  -webkit-text-fill-color: initial;
}

[data-theme="vhs"] .btn-primary {
  background: linear-gradient(90deg, #ff5400 0%, #7209b7 100%);
  color: #ffffff;
  border: 1px solid #ff7b00;
  box-shadow: 0 0 15px rgba(255, 84, 0, 0.4);
}

[data-theme="vhs"] .btn-primary:hover {
  background: linear-gradient(90deg, #ff7b00 0%, #9d4edd 100%);
  box-shadow: 0 0 25px rgba(255, 84, 0, 0.7);
}

[data-theme="vhs"] .section-title {
  color: #ffffff;
  text-shadow: -2px 0 #00f0ff, 2px 0 #ff0055;
  font-family: 'Courier Prime', monospace;
  letter-spacing: 1px;
}

[data-theme="vhs"] .clapperboard-box {
  border-color: #ff5400;
  box-shadow: 0 0 25px rgba(255, 84, 0, 0.35);
}

[data-theme="vhs"] .status-dot {
  background: #39ff14;
  box-shadow: 0 0 10px #39ff14;
}

[data-theme="vhs"] .hero-badge-pill {
  background: rgba(255, 84, 0, 0.15);
  border: 1px solid #ff5400;
  color: #ffbd00;
}

[data-theme="vhs"] .rec-indicator {
  color: #ff0055;
  text-shadow: 0 0 8px #ff0055;
  font-family: 'Courier Prime', monospace;
}

[data-theme="vhs"] .service-card:hover,
[data-theme="vhs"] .project-card:hover {
  border-color: #ff5400;
  box-shadow: 0 0 20px rgba(255, 84, 0, 0.35);
}


/* --------------------------------------------------------------------------
   5. TECHNICOLOR AESTHETIC (LIGHT THEME - 1950s PASTEL INDIE)
   Warm pastel parchment, Wes Anderson symmetry, saturated coral,
   high-contrast deep navy slate text (#1e293b).
   -------------------------------------------------------------------------- */

[data-theme="technicolor"] {
  --bg-body: #faf6ea;
  --bg-surface: #f5eee0;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --footer-bg: #1e293b;
  --topbar-bg: #2a9d8f;
  --toast-bg: #ffffff;

  --border-color: #e76f51;
  --border-light: rgba(231, 111, 81, 0.3);
  --primary: #c2410c;         /* Saturated Coral Rust */
  --primary-light: #f4a261;   /* Golden Amber */
  --primary-dark: #2a9d8f;    /* Mint Teal */
  --primary-glow: rgba(194, 65, 12, 0.25);

  /* High-Contrast Dark Slate Text on Light Parchment */
  --text-primary: #1e293b;    /* Deep Navy Slate - 14:1 contrast */
  --text-secondary: #334155;  /* Slate - 10:1 contrast */
  --text-muted: #475569;      /* Slate Charcoal - 7:1 contrast - Guaranteed readable */
  --text-accent: #9a3412;     /* Saturated Dark Coral Rust - 6.8:1 contrast */
  --input-text: #1e293b;      /* Dark slate typing */
  --input-placeholder: #475569;

  /* Buttons */
  --btn-primary-bg: #c2410c;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #1e293b;
  --btn-secondary-border: #c2410c;

  /* Tags */
  --tag-bg: #2a9d8f;
  --tag-text: #ffffff;
  --tag-time-bg: #1e293b;
  --tag-time-text: #ffffff;
}

[data-theme="technicolor"] body {
  background-color: #faf6ea;
  color: #1e293b;
}

[data-theme="technicolor"] .top-bar {
  background: #2a9d8f;
  border-bottom: 2px solid #c2410c;
  color: #ffffff;
}

[data-theme="technicolor"] .top-bar-contact a,
[data-theme="technicolor"] .top-bar-right span {
  color: #ffffff;
  font-weight: 600;
}

[data-theme="technicolor"] .top-bar-badge {
  background: #c2410c;
  color: #ffffff;
  border-color: #ffffff;
}

[data-theme="technicolor"] .site-header {
  background-color: #faf6ea;
  border-bottom: 2px solid #e76f51;
}

[data-theme="technicolor"] .hero-section {
  background: #faf6ea;
  border-bottom: 2px solid #e76f51;
}

[data-theme="technicolor"] .hero-headline {
  color: #1e293b;
}

[data-theme="technicolor"] .hero-headline .text-gold {
  color: #c2410c;
}

[data-theme="technicolor"] .hero-bio,
[data-theme="technicolor"] .hero-service-bullets li,
[data-theme="technicolor"] .section-subtitle,
[data-theme="technicolor"] .about-text,
[data-theme="technicolor"] .service-text,
[data-theme="technicolor"] .project-desc,
[data-theme="technicolor"] .gear-card-desc,
[data-theme="technicolor"] .modal-synopsis {
  color: #334155;
}

[data-theme="technicolor"] .btn-primary:hover {
  background: #2a9d8f;
}

[data-theme="technicolor"] .showcase-video-card,
[data-theme="technicolor"] .clapperboard-box,
[data-theme="technicolor"] .about-photo-card,
[data-theme="technicolor"] .discipline-card,
[data-theme="technicolor"] .service-card,
[data-theme="technicolor"] .project-card,
[data-theme="technicolor"] .gear-container,
[data-theme="technicolor"] .gear-card,
[data-theme="technicolor"] .calc-panel,
[data-theme="technicolor"] .contact-card-sidebar,
[data-theme="technicolor"] .booking-form-box,
[data-theme="technicolor"] .secret-console-box,
[data-theme="technicolor"] .process-step-card,
[data-theme="technicolor"] .testimonial-card,
[data-theme="technicolor"] .faq-item,
[data-theme="technicolor"] .modal-dialog,
[data-theme="technicolor"] .toast-notice {
  background: #ffffff;
  border: 2px solid #e76f51;
  box-shadow: 0 4px 18px rgba(30, 41, 59, 0.08);
}

[data-theme="technicolor"] .clapper-body-fields,
[data-theme="technicolor"] .calc-output-box {
  background: #f5eee0;
  border: 1px dashed #e76f51;
}

[data-theme="technicolor"] .form-input,
[data-theme="technicolor"] .calc-select,
[data-theme="technicolor"] .secret-code-input {
  background: #ffffff;
  border: 1px solid #e76f51;
  color: #1e293b;
}

[data-theme="technicolor"] .site-footer {
  background: #1e293b;
  color: #f1f5f9;
  border-top: 3px solid #c2410c;
}

[data-theme="technicolor"] .site-footer a,
[data-theme="technicolor"] .footer-brand-title,
[data-theme="technicolor"] .footer-col h4 {
  color: #ffffff;
}

[data-theme="technicolor"] .footer-brand-bio,
[data-theme="technicolor"] .footer-bottom {
  color: #cbd5e1;
}