/**
 * Thème global OkDak — surcharge clair pour tout le site.
 * Activé via html[data-okdak-theme="light"] (theme.js)
 */

/* ——— Jetons Apple (clair) ——— */
html[data-okdak-theme="light"] {
  color-scheme: light;

  --apple-bg: #f5f5f7;
  --apple-bg-elevated: #ffffff;
  --apple-bg-page: #fbfbfd;
  --apple-fill: rgba(120, 120, 128, 0.12);
  --apple-fill-secondary: rgba(120, 120, 128, 0.16);
  --apple-fill-tertiary: rgba(118, 118, 128, 0.08);
  --apple-text: #1d1d1f;
  --apple-text-secondary: #6e6e73;
  --apple-text-tertiary: #86868b;
  --apple-glass: rgba(255, 255, 255, 0.72);
  --apple-glass-hover: rgba(255, 255, 255, 0.92);
  --apple-border: rgba(0, 0, 0, 0.08);
  --apple-border-strong: rgba(0, 0, 0, 0.12);
  --apple-separator: rgba(60, 60, 67, 0.18);
  --apple-shadow-hairline: 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --apple-shadow-card: var(--apple-shadow-hairline), 0 2px 8px rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.08);
  --apple-shadow-float: var(--apple-shadow-hairline), 0 4px 12px rgba(0, 0, 0, 0.08),
    0 20px 40px rgba(0, 0, 0, 0.1);
  --apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --apple-scrim: rgba(0, 0, 0, 0.35);
  --apple-page-bg-image: radial-gradient(120% 80% at 50% -10%, rgba(0, 113, 227, 0.07) 0%, transparent 55%),
    radial-gradient(80% 50% at 100% 50%, rgba(0, 113, 227, 0.04) 0%, transparent 45%);

  /* Legacy style.css */
  --main-color: #0071e3;
  --secondary-color: #5ac8fa;
  --dark-bg: #f5f5f7;
  --darker-bg: #e8e8ed;
  --light-text: #1d1d1f;
  --lighter-text: #000000;
  --card-bg: rgba(255, 255, 255, 0.92);
  --border-color: rgba(0, 0, 0, 0.1);
  --glass-effect: rgba(0, 0, 0, 0.04);
}

/* ——— Fond & texte globaux ——— */
html[data-okdak-theme="light"] body,
html[data-okdak-theme="light"] body.app,
html[data-okdak-theme="light"] body.light-theme {
  background-color: var(--apple-bg-page);
  background-image: var(--apple-page-bg-image);
  color: var(--apple-text);
}

html[data-okdak-theme="light"] html,
html[data-okdak-theme="light"] body.page-feed {
  background: var(--apple-bg-page) !important;
}

/* ——— Bouton thème (index uniquement) ——— */
#themeToggle.theme-toggle {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 10002;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--apple-border);
  background: rgba(28, 28, 30, 0.72);
  color: var(--apple-text);
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: transform 0.2s ease, background 0.2s ease;
}

html[data-okdak-theme="light"] #themeToggle.theme-toggle {
  background: rgba(255, 255, 255, 0.88);
  color: #1d1d1f;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

#themeToggle.theme-toggle:hover {
  transform: scale(1.05);
}

/* ——— Composants communs ——— */
html[data-okdak-theme="light"] input,
html[data-okdak-theme="light"] select,
html[data-okdak-theme="light"] textarea {
  background: rgba(255, 255, 255, 0.95);
  color: var(--apple-text);
  border-color: var(--apple-border);
}

html[data-okdak-theme="light"] .glass-card,
html[data-okdak-theme="light"] .glass-liquid,
html[data-okdak-theme="light"] .dropdown-content,
html[data-okdak-theme="light"] .menu-button {
  background: var(--apple-glass);
  border-color: var(--apple-border);
  color: var(--apple-text);
}

html[data-okdak-theme="light"] .code-editor,
html[data-okdak-theme="light"] textarea.code-editor {
  background: #f0f0f5;
  color: #1d1d1f;
}

html[data-okdak-theme="light"] iframe#preview {
  border-color: var(--apple-border);
}

html[data-okdak-theme="light"] .home-code-main,
html[data-okdak-theme="light"] .home-tech-card,
html[data-okdak-theme="light"] .home-media-card,
html[data-okdak-theme="light"] .preview-section,
html[data-okdak-theme="light"] .home-project-shell.glass-liquid {
  background: var(--apple-glass);
  border-color: var(--apple-border);
  box-shadow: var(--apple-shadow-card);
}

html[data-okdak-theme="light"] #feed-mode-buttons,
html[data-okdak-theme="light"] .feed-post,
html[data-okdak-theme="light"] .feed-stories-bar {
  background: var(--apple-glass) !important;
  border-color: var(--apple-border) !important;
  color: var(--apple-text);
}

html[data-okdak-theme="light"] body.dashboard-app .dashboard-header,
html[data-okdak-theme="light"] body.dashboard-app .dashboard-card {
  background: var(--apple-glass);
  border-color: var(--apple-border);
}

html[data-okdak-theme="light"] .popup-content,
html[data-okdak-theme="light"] .popup-overlay.show .popup-content {
  background: #ffffff;
  color: #1d1d1f;
}

html[data-okdak-theme="light"] .search-input {
  background: rgba(255, 255, 255, 0.9);
  color: #1d1d1f;
  border-color: rgba(0, 0, 0, 0.1);
}

html[data-okdak-theme="light"] .brand-highlight {
  background: linear-gradient(105deg, #1d1d1f 0%, #1d1d1f 35%, var(--apple-blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}