/* RANG F31-DESIGN-APP-1610 — «Фокус»
   Shared cabinet skin for student and parent surfaces.
   The structure and existing interaction contracts stay untouched; this file
   only remaps shared tokens and gives the current screen a calmer first move. */

/* F31-W1453: палитра, гарнитуры и геометрия берутся из themes.css
   по DESIGN.md §§3.5, 4.1, 5. Не перекрываем выбранную тему своей палитрой.
   Роли полосы используют те же цвета, что остальные действия кабинета. */
:root[data-rang-skin="focus"] {
  --run-bg: var(--accent);
  --run-ink: var(--accent-ink);
  --run-cta: var(--surface);
  --run-cta-ink: var(--accent);
}

/* A single recognisable gesture: the first action is an accent runway, not a
   generic stack of cards. It makes the answer to «what now?» visible first. */
:root[data-rang-skin="focus"] body { background:
  radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 30rem), var(--bg); }
:root[data-rang-skin="focus"] .topbar {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
}
:root[data-rang-skin="focus"] .logo-mark {
  border-radius: var(--radius-m) var(--radius-m) var(--radius-m) var(--radius-s);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 35%, var(--bg));
}
:root[data-rang-skin="focus"] .card {
  border-color: var(--border);
  box-shadow: var(--shadow-1);
}
:root[data-rang-skin="focus"] #view-home .next .card {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--run-bg);
  color: var(--run-ink);
  box-shadow: var(--shadow-2);
}
:root[data-rang-skin="focus"] #view-home .next .card::after {
  content: '';
  position: absolute;
  width: 13rem; height: 13rem;
  right: -4rem; top: -5rem;
  border: 1px solid color-mix(in srgb, var(--run-ink) 28%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 22px color-mix(in srgb, var(--run-ink) 6%, transparent), 0 0 0 44px color-mix(in srgb, var(--run-ink) 4%, transparent);
  pointer-events: none;
}
:root[data-rang-skin="focus"] #view-home .next .card :is(h1,h2,h3,p,.muted,.small) { color: var(--run-ink); }
:root[data-rang-skin="focus"] #view-home .next .btn-primary {
  background: var(--run-cta);
  color: var(--run-cta-ink);
  border-color: transparent;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--text) 10%, transparent);
}
:root[data-rang-skin="focus"] #view-home .next .btn-primary:hover { transform: translateY(-1px); }
:root[data-rang-skin="focus"] #view-home .stats .stat { border: 0; background: var(--surface); }
:root[data-rang-skin="focus"] #view-home .stats .stat b { color: var(--accent); }
:root[data-rang-skin="focus"] .tabbar {
  border-top-color: transparent;
  box-shadow: 0 -8px 28px color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}
:root[data-rang-skin="focus"] .tabbar a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-m);
}
:root[data-rang-skin="focus"] .btn-primary { box-shadow: 0 3px 0 color-mix(in srgb, var(--text) 10%, transparent); }
:root[data-rang-skin="focus"] .btn-primary:active { transform: translateY(1px); box-shadow: none; }

/* Login is a calm door: no sales language competes with the code field. */
:root[data-rang-skin="focus"] #view-login > h1 { max-width: 13ch; }
:root[data-rang-skin="focus"] #view-login .card:first-of-type {
  border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--surface));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 10%, transparent);
}

@media (max-width: 620px) {
  :root[data-rang-skin="focus"] #view-home .next .card { border-radius: var(--radius-l); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-rang-skin="focus"] .btn-primary:hover,
  :root[data-rang-skin="focus"] .btn-primary:active { transform: none; }
}