/* src/frontend/static/css/light.css */

/* Trendy light theme: "Milk & Bone" */

/* Base app styles for light theme */
html[data-theme="light"], body[data-theme="light"], :root[data-theme="light"] {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family-sans);
  font-size: var(--base-font-size);
}

/* Panels / cards */
.card, .panel, #video-modal {
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border-weak);
}

/* Links and muted text */
a, .link { color: var(--accent); text-decoration: none; }
.small, .meta, .muted { color: var(--muted); }

/* Tabs and chips */
.tab { background: transparent; color: var(--muted); border-radius: 10px; padding: 8px 12px; }
.tab.active { background: var(--chip-bg); color: var(--text-inverse); font-weight:700; border:1px solid var(--border-weak); }
.chip { 
    background: var(--chips-bg); 
    color: var(--text); 
    border-radius: 10px; 
    padding: 8px 12px; 
    border:1px solid var(--border-weak); 
}

/* Card hover */
.card:hover { background: var(--card-hover-bg); transform: translateY(-4px); transition: transform .18s ease, background .18s ease; }

/* Buttons */
.btn {
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border: 0;
  font-family: var(--font-family-sans);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Primary */
.btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
  box-shadow: 0 6px 18px rgba(31,138,112,0.12);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

/* Secondary (warm) */
.btn-secondary {
  background: var(--accent-2);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(242,201,76,0.08);
}
.btn-secondary:hover { background: var(--accent-2-hover); transform: translateY(-2px); }

/* Ghost / outline button */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-weak);
}
.btn-ghost:hover { background: var(--glass); }

/* Focus accessibility */
.btn:focus {
  outline: 3px solid rgba(31,138,112,0.14);
  outline-offset: 2px;
}

/* Input / search */
.search { background: var(--chips-bg); border-radius: 12px; border:1px solid var(--border-weak); padding:10px; }
.search input{ color: var(--text); background:transparent; border:0; outline:0; }

/* Logo: лучше подготовить две версии и менять через JS как было описано ранее */
.brand-title { color: var(--text); font-weight:800; }

/* Modal overlay */
#video-modal-overlay { background: var(--overlay); }

/* small responsive polish */
@media (max-width:700px){
  .btn-primary, .btn-secondary { width: 100%; display:block; text-align:center; }
}