/* =====================================================================
   OCYL Theme Layer – orb + light/dark surfaces
   ===================================================================== */

/* =====================================================================
   CSS VARIABLES – Light/Dark Theme
   ===================================================================== */

/* Light mode default - Professional white/neutral experience */
:root {
  --bg: #ffffff;
  --surface: #f8f9fa;
  --text: #1a1a1a;
  --text-light: #2d2d2d;
  --muted: #5a6c5a;
  --accent-green: #007a33;
  --bright-green: #00934d;
  --border: rgba(0,122,51,0.15);
  --glow: 0 0 8px rgba(0,122,51,0.12);
  --card-bg: #ffffff;
  --primary-black: #1a1a1a;
}

/* Dark mode - Deep charcoal control-center vibe */
[data-theme="dark"] {
  --bg: #1a1a1a;
  --surface: rgba(255,255,255,0.03);
  --text: #f5f5f5;
  --text-light: #e8e8e8;
  --muted: rgba(255,255,255,0.70);
  --accent-green: #00b140;
  --bright-green: #39ff14;
  --border: rgba(57,255,20,0.12);
  --glow: 0 0 20px rgba(57,255,20,0.25);
  --card-bg: #242424;
  --primary-black: #0f0f0f;
}

/* Apply theme variables globally */
body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* =====================================================================
   Orb wrapper + button
   ===================================================================== */
.theme-orb-wrapper {
  margin-left: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-orb {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

/* Orb core – always visible, then modified by theme */
.theme-orb-core {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-block;
  position: relative;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.16s ease-out,
    filter 0.16s ease-out;
  animation: ocyl-orb-float 3s ease-in-out infinite;
}

/* Halo */
.theme-orb-core::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  opacity: 0.5;
  box-shadow: 0 0 18px rgba(7, 12, 32, 0.7);
  pointer-events: none;
  transition:
    opacity 0.16s ease-out,
    transform 0.16s ease-out;
}

.theme-orb:hover .theme-orb-core {
  transform: scale(1.08);
}

.theme-orb:active .theme-orb-core {
  transform: scale(0.95);
  filter: brightness(0.9);
}

.theme-orb:hover .theme-orb-core::after {
  opacity: 0.75;
  transform: scale(1.05);
}

/* Light mode orb appearance (default) */
.theme-orb-core {
  background: radial-gradient(circle at 30% 30%, #050816, #253058 45%, #a9b7ff 80%, #ffffff 100%);
  box-shadow: 0 0 10px rgba(7, 12, 32, 0.6);
}

.theme-orb-core::after {
  box-shadow: 0 0 18px rgba(7, 12, 32, 0.7);
}

/* Dark mode orb appearance */
[data-theme="dark"] .theme-orb-core {
  background: radial-gradient(circle at 30% 30%, #c9ffe0, #5fee9b 40%, #29a86a 75%, #02030a 100%);
  box-shadow: 0 0 14px rgba(95, 222, 155, 0.9);
}

[data-theme="dark"] .theme-orb-core::after {
  box-shadow: 0 0 18px rgba(57,255,20,0.9);
}

/* Float animation */
@keyframes ocyl-orb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

/* =====================================================================
   Nav + Footer Surfaces
   ===================================================================== */

/* Light mode nav (default) */
nav {
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
}

nav a {
  color: var(--text);
}

nav a.active,
nav a:hover {
  color: var(--accent-green);
}

.logo h1 {
  color: var(--accent-green);
  text-shadow: none;
}

/* Light mode footer (default) */
footer {
  background: #f8f9fa;
  border-top: 1px solid rgba(0,0,0,0.08);
  color: var(--text);
}

.footer-links a {
  color: var(--muted);
}

.footer-links a:hover {
  color: var(--accent-green);
}

/* Dark mode nav */
[data-theme="dark"] nav {
  background: rgba(26,26,26,0.95);
  border-bottom: 1px solid rgba(57,255,20,0.12);
}

[data-theme="dark"] nav a {
  color: var(--text);
}

[data-theme="dark"] nav a.active,
[data-theme="dark"] nav a:hover {
  color: var(--bright-green);
}

[data-theme="dark"] .logo h1 {
  color: var(--bright-green);
  text-shadow: var(--glow);
}

/* Dark mode footer */
[data-theme="dark"] footer {
  background: #1a1a1a;
  border-top: 1px solid rgba(57,255,20,0.12);
}

[data-theme="dark"] .footer-links a:hover {
  color: var(--bright-green);
}

/* =====================================================================
   Hero Section
   ===================================================================== */

/* Light mode hero (default) */
.hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.hero::before {
  background: radial-gradient(circle, rgba(0,122,51,0.04) 0%, transparent 70%);
}

.hero h2 {
  color: var(--accent-green);
  text-shadow: none;
}

.hero-intro {
  color: var(--muted);
}

/* Dark mode hero */
[data-theme="dark"] .hero {
  background: linear-gradient(135deg, var(--bg) 0%, #121212 100%);
}

[data-theme="dark"] .hero::before {
  background: radial-gradient(circle, rgba(57,255,20,0.15) 0%, transparent 70%);
}

[data-theme="dark"] .hero h2 {
  color: var(--bright-green);
  text-shadow: var(--glow), 0 0 40px rgba(57,255,20,0.1);
}

[data-theme="dark"] .hero-intro {
  color: var(--muted);
}

/* Page hero light mode (default) */
.page-hero {
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.page-title {
  color: var(--accent-green);
  text-shadow: none;
}

.page-subtitle {
  color: var(--muted);
}

/* Page hero dark mode */
[data-theme="dark"] .page-hero {
  background: linear-gradient(135deg, var(--bg), #121212);
}

[data-theme="dark"] .page-title {
  color: var(--bright-green);
  text-shadow: var(--glow);
}

/* =====================================================================
   Cards & Surfaces
   ===================================================================== */

/* Light mode cards (default) */
.project-card,
.service-card {
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.project-card:hover,
.service-card:hover {
  box-shadow: 0 4px 12px rgba(0,122,51,0.12);
  border-color: var(--accent-green);
}

.project-card h3,
.service-card h3 {
  color: var(--accent-green);
  text-shadow: none;
}

.project-card p,
.service-card p {
  color: var(--muted);
}

.project-category,
.project-status {
  color: var(--accent-green);
}

/* Dark mode cards */
[data-theme="dark"] .project-card,
[data-theme="dark"] .service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .service-card:hover {
  box-shadow: 0 8px 24px rgba(57,255,20,0.15), var(--glow);
  border-color: var(--bright-green);
}

[data-theme="dark"] .project-card h3,
[data-theme="dark"] .service-card h3 {
  color: var(--bright-green);
  text-shadow: var(--glow);
}

/* Section headings light mode (default) */
h2 {
  color: var(--accent-green);
  text-shadow: none;
}

section > .container > p {
  color: var(--muted);
}

/* Section headings dark mode */
[data-theme="dark"] h2 {
  color: var(--bright-green);
  text-shadow: var(--glow);
}

/* =====================================================================
   Buttons
   ===================================================================== */

/* Light mode buttons (default) */
.cta-button {
  background: linear-gradient(135deg, var(--accent-green), var(--bright-green));
  color: white;
  box-shadow: 0 2px 8px rgba(0,122,51,0.2);
}

.cta-button:hover {
  box-shadow: 0 4px 16px rgba(0,122,51,0.25);
  transform: translateY(-1px);
}

.cta-button-secondary {
  color: var(--accent-green);
  border-color: var(--accent-green);
}

.cta-button-secondary:hover {
  background: var(--accent-green);
  color: white;
}

/* Dark mode buttons */
[data-theme="dark"] .cta-button {
  box-shadow: 0 4px 12px rgba(57,255,20,0.3), var(--glow);
}

[data-theme="dark"] .cta-button:hover {
  box-shadow: 0 8px 24px rgba(57,255,20,0.4), var(--glow);
}

[data-theme="dark"] .cta-button-secondary {
  color: var(--bright-green);
  border-color: var(--bright-green);
}

[data-theme="dark"] .cta-button-secondary:hover {
  background: var(--bright-green);
  color: var(--primary-black);
}

/* =====================================================================
   Forms
   ===================================================================== */

/* Light mode forms (default) */
.contact-form input,
.contact-form textarea {
  background: white;
  border-color: var(--border);
  color: var(--text);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(0,122,51,0.1);
}

.contact-form label {
  color: var(--muted);
}

/* Dark mode forms */
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus {
  border-color: var(--bright-green);
  box-shadow: 0 0 0 3px rgba(57,255,20,0.1);
}

/* =====================================================================
   Modal
   ===================================================================== */

/* Light mode modal (default) */
.modal {
  background: rgba(0,0,0,0.6);
}

.modal-content {
  background: linear-gradient(135deg, #f7f9f7, #ffffff);
  border-color: var(--accent-green);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-close {
  background: rgba(0,122,51,0.05);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.modal-close:hover {
  background: var(--accent-green);
  color: white;
}

.modal-header h2 {
  color: var(--accent-green);
}

.modal-body {
  color: var(--text);
}

.modal-body p {
  color: var(--muted);
}

/* Dark mode modal */
[data-theme="dark"] .modal {
  background: rgba(0,0,0,0.85);
}

[data-theme="dark"] .modal-content {
  background: linear-gradient(135deg, var(--bg), #1f1f1f);
  border-color: var(--bright-green);
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), var(--glow);
}

[data-theme="dark"] .modal-close {
  background: rgba(57,255,20,0.1);
  border-color: var(--bright-green);
  color: var(--bright-green);
}

[data-theme="dark"] .modal-close:hover {
  background: var(--bright-green);
  color: var(--primary-black);
}

[data-theme="dark"] .modal-header h2 {
  color: var(--bright-green);
}

/* =====================================================================
   Progress Bars
   ===================================================================== */

/* Light mode progress (default) */
.progress-bar {
  background: rgba(0,122,51,0.08);
}

.progress-fill {
  background: linear-gradient(90deg, var(--accent-green), #00d050);
  box-shadow: 0 0 8px rgba(0,122,51,0.3);
}

/* Dark mode progress */
[data-theme="dark"] .progress-bar {
  background: rgba(57,255,20,0.1);
}

[data-theme="dark"] .progress-fill {
  background: linear-gradient(90deg, var(--accent-green), var(--bright-green));
  box-shadow: var(--glow);
}

/* =====================================================================
   Hamburger Menu
   ===================================================================== */

/* Light mode hamburger (default) */
.hamburger span {
  background: var(--accent-green);
}

nav ul {
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.08);
}

/* Dark mode hamburger */
[data-theme="dark"] .hamburger span {
  background: var(--bright-green);
}

[data-theme="dark"] nav ul {
  background: rgba(26,26,26,0.98);
  border: 1px solid var(--border);
}

/* =====================================================================
   Canvas & Backgrounds
   ===================================================================== */

/* Light mode canvas (default) */
#bg-canvas {
  opacity: 0.05;
}

/* Dark mode canvas */
[data-theme="dark"] #bg-canvas {
  opacity: 0.3;
}

/* =====================================================================
   Overview Card
   ===================================================================== */

/* Light mode overview (default) */
.overview-card-centered {
  background: linear-gradient(135deg, rgba(0,122,51,0.03), rgba(0,122,51,0.01));
  border-color: rgba(0,122,51,0.2);
}

.overview-card-centered:hover {
  box-shadow: 0 4px 16px rgba(0,122,51,0.1);
  border-color: var(--accent-green);
}

.stat-number {
  color: var(--accent-green);
  text-shadow: none;
}

.stat-label {
  color: var(--muted);
}

.stat-divider {
  background: linear-gradient(180deg, transparent, var(--accent-green), transparent);
}

.overview-content p {
  color: var(--text);
}

/* Dark mode overview */
[data-theme="dark"] .overview-card-centered {
  background: linear-gradient(135deg, rgba(57,255,20,0.05), rgba(57,255,20,0.02));
  border-color: rgba(57,255,20,0.2);
}

[data-theme="dark"] .overview-card-centered:hover {
  box-shadow: 0 8px 24px rgba(57,255,20,0.15);
  border-color: var(--bright-green);
}

[data-theme="dark"] .stat-number {
  color: var(--bright-green);
  text-shadow: var(--glow);
}

[data-theme="dark"] .stat-divider {
  background: linear-gradient(180deg, transparent, var(--bright-green), transparent);
}

/* =====================================================================
   Logo Visibility (Light/Dark)
   ===================================================================== */

/* Light mode default: show dark logo (black) */
.logo-img.logo-light-theme {
  display: none;
}

.logo-img.logo-dark-theme {
  display: block;
}

/* Dark mode: show light logo (white) */
[data-theme="dark"] .logo-img.logo-light-theme {
  display: block;
}

[data-theme="dark"] .logo-img.logo-dark-theme {
  display: none;
}