/* ==========================================================
   OAP GLOBAL THEMES
   Path: /assets/css/oap_themes.css

   Purpose:
   - Central shared theme file for OAP pages.
   - Theme toggle button remains only in public/index.html.
   - Other pages only read/apply the saved theme.
   - This file does not add any background image.
   ========================================================== */


/* =========================
   DEFAULT / LIGHT THEME
   ========================= */
:root,
html[data-theme="light"] {
  color-scheme: light;

  --oap-bg: #C4BAB0;
  --oap-bg-soft: #d2cac1;
  --oap-page-bg: rgba(196, 186, 176, .96);

  --oap-text: #242424;
  --oap-text-soft: rgba(36,36,36,.72);
  --oap-text-muted: rgba(36,36,36,.50);

  --oap-panel: rgba(255,255,255,.34);
  --oap-panel-strong: rgba(255,255,255,.52);
  --oap-input-bg: rgba(255,255,255,.48);

  --oap-border: rgba(36,36,36,.13);
  --oap-border-soft: rgba(36,36,36,.09);

  --oap-shadow: 0 22px 60px rgba(40,35,25,.10);

  --oap-primary: #181818;
  --oap-primary-text: #ffffff;

  --oap-disabled-bg: rgba(24,24,24,.045);
  --oap-disabled-border: rgba(24,24,24,.10);
  --oap-disabled-text: rgba(24,24,24,.38);

  --oap-plane-opacity: .20;
  --oap-photo-opacity: .40;
  --oap-photo-filter: brightness(.98) saturate(.72) contrast(.72) blur(.2px);

  --oap-overlay:
    linear-gradient(180deg, rgba(196,186,176,.92) 0%, rgba(196,186,176,.92) 100%);
}


/* =========================
   DARK THEME
   ========================= */
html[data-theme="dark"] {
  color-scheme: dark;

  --oap-bg: #181818;
  --oap-bg-soft: #202020;
  --oap-page-bg: rgba(24,24,24,.96);

  --oap-text: #ffffff;
  --oap-text-soft: rgba(255,255,255,.74);
  --oap-text-muted: rgba(255,255,255,.48);

  --oap-panel: rgba(255,255,255,.075);
  --oap-panel-strong: rgba(255,255,255,.12);
  --oap-input-bg: rgba(255,255,255,.085);

  --oap-border: rgba(255,255,255,.13);
  --oap-border-soft: rgba(255,255,255,.085);

  --oap-shadow: 0 24px 70px rgba(0,0,0,.38);

  --oap-primary: #ffffff;
  --oap-primary-text: #181818;

  --oap-disabled-bg: rgba(255,255,255,.05);
  --oap-disabled-border: rgba(255,255,255,.08);
  --oap-disabled-text: rgba(255,255,255,.38);

  --oap-plane-opacity: .24;
  --oap-photo-opacity: .34;
  --oap-photo-filter: brightness(.56) saturate(.88) contrast(1.06) blur(.2px);

  --oap-overlay:
    linear-gradient(180deg, rgba(24,24,24,.92) 0%, rgba(24,24,24,.92) 100%);
}


/* =========================
   GLOBAL APPLICATION
   ========================= */
html,
body {
  background: var(--oap-bg);
  color: var(--oap-text);
}

#page-content {
  background-color: var(--oap-page-bg) !important;
}


/* =========================
   OPTIONAL BACKGROUND LAYERS
   No image is defined here.
   Index page keeps its own background image.
   ========================= */
.bg-photo {
  opacity: var(--oap-photo-opacity) !important;
  filter: var(--oap-photo-filter) !important;
}

.bg-plane {
  opacity: var(--oap-plane-opacity) !important;
}

.bg-photo-overlay {
  background: var(--oap-overlay) !important;
}


/* =========================
   COMMON TEXT / BORDERS
   ========================= */
header,
.header-brand,
.aviation-path,
.nav-bar,
.bottom-section,
.features-screen,
.landing-footer {
  color: var(--oap-text);
}

.desc-text,
.profile-id,
.nav-date,
.section-copy,
.feature-card p,
.footer-brand p,
.footer-col a,
.footer-bottom,
.oap-muted,
.text-muted {
  color: var(--oap-text-soft);
}

.nav-bar,
.features-screen,
.landing-footer,
.footer-bottom,
.profile-meta::after,
.oap-border {
  border-color: var(--oap-border) !important;
}


/* =========================
   COMMON PANELS / CARDS
   ========================= */
.feature-card,
.profile-menu,
.section-eyebrow,
.feature-icon,
.glass-card,
.oap-panel {
  background: var(--oap-panel);
  border-color: var(--oap-border);
  box-shadow: var(--oap-shadow);
}

.feature-card::before {
  background: radial-gradient(circle at top right, var(--oap-panel-strong), transparent 48%);
}


/* =========================
   COMMON INPUTS / BUTTONS
   ========================= */
input,
select,
textarea,
.oap-input {
  background-color: var(--oap-input-bg);
  color: var(--oap-text);
  border-color: var(--oap-border);
}

input::placeholder,
textarea::placeholder {
  color: var(--oap-text-muted);
}

button,
a {
  color: inherit;
}

.oap-primary-btn,
.btn-primary {
  background: var(--oap-primary);
  color: var(--oap-primary-text);
}

.is-disabled,
[disabled] {
  color: var(--oap-disabled-text) !important;
  border-color: var(--oap-disabled-border) !important;
}


/* =========================
   ICONS
   ========================= */
html[data-theme="light"] .aviation-path svg,
html[data-theme="light"] .action-btn svg,
html[data-theme="light"] .join-box svg,
html[data-theme="light"] .feature-icon svg {
  stroke: rgba(36,36,36,.80);
}

html[data-theme="light"] .aviation-path svg {
  fill: rgba(36,36,36,.76);
}

html[data-theme="light"] .action-btn:hover svg,
html[data-theme="light"] .join-box:hover svg {
  fill: rgba(36,36,36,.80);
}


/* =========================
   HERO TEXT COLORS
   ========================= */
html[data-theme="light"] .word-1 { color: rgba(36,36,36,.96); }
html[data-theme="light"] .word-2 { color: rgba(36,36,36,.43); }
html[data-theme="light"] .word-3 { color: rgba(36,36,36,.16); }

html[data-theme="dark"] .word-1 {
  color: #ffffff;
}

html[data-theme="dark"] .word-2 {
  color: rgba(255,255,255,.40);
}

html[data-theme="dark"] .word-3 {
  color: rgba(255,255,255,.15);
}