/* ===== StrongNote Theme System — Dark/Light ===== */

/* --- Dark Theme (default) --- */
:root,
[data-theme="dark"] {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-card: rgba(255, 255, 255, 0.03);

  --text-primary: #e8e8ed;
  --text-secondary: #a0a0b0;
  --text-heading: #ffffff;
  --text-muted: #606070;

  --accent: #00d4ff;
  --accent-rgb: 0, 212, 255;
  --accent-dark: #00a8cc;
  --accent-purple: #7b2fbe;
  --accent-rgb-purple: 123, 47, 190;
  --gradient-accent: linear-gradient(135deg, #00d4ff, #7b2fbe);
  --neon-glow: 0 0 30px rgba(0, 212, 255, 0.15);
  --neon-glow-strong: 0 0 50px rgba(0, 212, 255, 0.25);

  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  --nav-bg: rgba(10, 10, 15, 0.85);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);

  --border-color: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.04);

  --btn-bg: linear-gradient(135deg, #00d4ff, #7b2fbe);
  --btn-hover-glow: 0 8px 40px rgba(0, 212, 255, 0.3);
  --btn-text: #ffffff;

  --danger: #ff5252;
  --success: #4caf84;

  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-focus-border: #00d4ff;
  --input-focus-glow: 0 0 0 3px rgba(0, 212, 255, 0.12);

  --chip-bg: rgba(255, 255, 255, 0.04);
  --chip-border: rgba(255, 255, 255, 0.08);

  --overlay-bg: rgba(10, 10, 15, 0.6);

  /* Logo gradient — 3 цвета: cyan → purple → pink */
  --logo-c1: #00d4ff;
  --logo-c2: #7b2fbe;
  --logo-c3: #ff6fd8;
  --logo-glow-1: rgba(0, 212, 255, 0.5);
  --logo-glow-2: rgba(123, 47, 190, 0.3);
  --logo-shadow-hover: 0 0 50px rgba(0, 212, 255, 0.3);
}

/* --- Light Theme --- */
[data-theme="light"] {
  --bg-primary: #f5f5f7;
  --bg-secondary: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.75);

  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-heading: #000000;
  --text-muted: #9a9aa6;

  --accent: #7b2fbe;
  --accent-rgb: 123, 47, 190;
  --accent-dark: #5e1fa3;
  --accent-purple: #7b2fbe;
  --accent-rgb-purple: 123, 47, 190;
  --gradient-accent: linear-gradient(135deg, #7b2fbe, #4f8cf7);
  --neon-glow: 0 0 30px rgba(123, 47, 190, 0.12);
  --neon-glow-strong: 0 0 50px rgba(123, 47, 190, 0.2);

  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

  --nav-bg: rgba(245, 245, 247, 0.85);
  --nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);

  --border-color: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.04);

  --btn-bg: linear-gradient(135deg, #7b2fbe, #4f8cf7);
  --btn-hover-glow: 0 8px 40px rgba(123, 47, 190, 0.25);
  --btn-text: #ffffff;

  --danger: #d32f2f;
  --success: #388e3c;

  --input-bg: rgba(0, 0, 0, 0.02);
  --input-border: rgba(0, 0, 0, 0.12);
  --input-focus-border: #7b2fbe;
  --input-focus-glow: 0 0 0 3px rgba(123, 47, 190, 0.1);

  --chip-bg: rgba(0, 0, 0, 0.04);
  --chip-border: rgba(0, 0, 0, 0.08);

  --overlay-bg: rgba(245, 245, 247, 0.6);

  /* Logo gradient — насыщенные для контраста на белом */
  --logo-c1: #2563eb;
  --logo-c2: #7c3aed;
  --logo-c3: #db2777;
  --logo-glow-1: rgba(37, 99, 235, 0.45);
  --logo-glow-2: rgba(124, 58, 237, 0.3);
  --logo-shadow-hover: 0 0 40px rgba(37, 99, 235, 0.35);
}

/* ===== Font Variable ===== */
:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== Global Variable Application ===== */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
}

.nav-bar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border-color);
}

.card,
.card-panel,
.card-glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

h1, h2, h3, h4, h5, h6,
.home-title,
.section-head h2,
.person-about h3,
.post-title,
.section-title {
  color: var(--text-heading);
}

p,
.person-about p,
.section-head p,
.post-content,
.card-content,
.card-reveal p {
  color: var(--text-secondary);
}

.blog-meta,
.blog-post-date,
.comment-date,
.entry-meta,
.posted-on,
.single-post-meta {
  color: var(--text-muted);
}

.skill-right .singel-hr,
.person-info h5,
.about-social li a,
.side-nav .about-me {
  border-color: var(--border-color);
}

.section-divider,
.title-divider {
  background: var(--gradient-accent);
}

a:not(.nav-links a):not(.btn):not(.gradient-btn):not(.btn-primary):not(.btn-outline):not(.waves-effect) {
  color: var(--accent);
}

/* Focus-visible: keyboard accessibility (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

.title {
  color: var(--text-primary);
  font-weight: 700;
}
.regular-text {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.5;
}
.card-title-top {
  display: block;
  color: var(--text-heading);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.brand-bg {
  background: var(--gradient-accent) !important;
}
.brand-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.skill-bar,
.singel-hr {
  background: var(--border-color);
}
.skill-bar-fill,
.singel-hr-inner {
  background: var(--gradient-accent);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
.input-box,
.materialize-textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}
input:focus,
textarea:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-glow);
  outline: none;
}

pre, code {
  background: var(--chip-bg);
  color: var(--text-primary);
}

footer,
.footer-wrap {
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

::selection {
  background: var(--accent);
  color: #fff;
}

#theme-toggle {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 40px;
  padding: 4px 12px;
  font-size: 14px;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#theme-toggle:hover {
  border-color: var(--accent);
  box-shadow: var(--neon-glow);
}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass,
  .nav-bar,
  .footer-bar {
    background: var(--bg-card);
  }
}