/* ═══════════════════════════════════════════════════════════════════════
   Грейдус skin — light-first identity for the RU instance (BRAND_SKIN=greidus)
   Loaded after styles.css. Tokens + typography + the components that carry
   the look; the amber literals of styles.css are recoloured by
   skin-greidus.generated.css (scripts/build_skin.py).

   Palette: malachite teal on paper-white, coral as the single warm signal.
   Type:    Unbounded (display) · Golos Text (body) — both drawn for Cyrillic.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Golos+Text:wght@400;500;600;700&display=swap');

html[data-skin="greidus"] {
  --font-display: 'Unbounded', 'Golos Text', system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bg: #f3f6f4;
  --surface: #ffffff;
  --surface-dark: #eaf0ed;
  --card: #ffffff;
  --card-alt: #f6f9f7;
  --border: rgba(18, 32, 42, 0.11);
  --text-primary: #12202a;
  --text-secondary: #46545e;
  --text-muted: #6f7d87;
  --accent: #0f8b7a;
  --accent-strong: #0a6c5f;
  --accent-rgb: 15, 139, 122;
  --signal: #ff6b47;           /* coral: eyebrows, the header rule, one dot per page */
  --muted: #e2ebe7;
  --success: #1b8f5a;
  --warning: #d18a00;
  --danger: #d64545;
  --shadow: 0 14px 34px -18px rgba(18, 32, 42, 0.22);
  --radius: 10px;
  color-scheme: light;
}

html[data-skin="greidus"][data-theme="dark"] {
  --bg: #0c1517;
  --surface: #101b1e;
  --surface-dark: #0b1416;
  --card: #142327;
  --card-alt: #182b30;
  --border: rgba(233, 241, 238, 0.1);
  --text-primary: #e9f1ee;
  --text-secondary: #a9bbb6;
  --text-muted: #7f918d;
  --accent: #38c9b1;
  --accent-strong: #22a893;
  --accent-rgb: 56, 201, 177;
  --signal: #ff8a6a;
  --muted: #1a2e33;
  --success: #5ed696;
  --warning: #ffc44d;
  --danger: #ff7b72;
  --shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ── Typography ──────────────────────────────────────────────────────── */
html[data-skin="greidus"] body { font-family: var(--font-body); letter-spacing: 0; }
html[data-skin="greidus"] h1, html[data-skin="greidus"] .hero-title, html[data-skin="greidus"] .page-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; text-transform: none; line-height: 1.12;
}
html[data-skin="greidus"] .hero-title { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.03em; }
html[data-skin="greidus"] h2, html[data-skin="greidus"] h3, html[data-skin="greidus"] .section__title {
  font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; text-transform: none;
}
html[data-skin="greidus"] .brand__word { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
html[data-skin="greidus"] .hero-eyebrow { color: var(--signal); letter-spacing: 0.22em; font-weight: 600; }

/* ── Header: white bar with the teal→coral rule on top ───────────────── */
html[data-skin="greidus"] .site-header {
  background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--border); backdrop-filter: saturate(160%) blur(10px);
}
html[data-skin="greidus"] .site-header::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0 72%, var(--signal) 72% 100%);
}
html[data-skin="greidus"] .site-header--scrolled { background: rgba(255, 255, 255, 0.97); box-shadow: 0 6px 24px -12px rgba(18, 32, 42, 0.25); }
html[data-skin="greidus"][data-theme="dark"] .site-header { background: rgba(16, 27, 30, 0.9); }
html[data-skin="greidus"][data-theme="dark"] .site-header--scrolled { background: rgba(16, 27, 30, 0.97); }
html[data-skin="greidus"] .nav__link--active { background: rgba(var(--accent-rgb), 0.1); }
html[data-skin="greidus"] .hdr-nav-link, html[data-skin="greidus"] .nav__link { color: var(--text-secondary); }
html[data-skin="greidus"] .hdr-nav-link:hover, html[data-skin="greidus"] .nav__link:hover { color: var(--text-primary); }

/* ── Buttons: solid, sentence case, square-ish ──────────────────────── */
html[data-skin="greidus"] .btn {
  border-radius: 8px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 0.92rem; padding: 0.7rem 1.35rem;
}
html[data-skin="greidus"] .btn--sm, html[data-skin="greidus"] .btn.btn--sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
html[data-skin="greidus"] .btn--xs, html[data-skin="greidus"] .btn.btn--xs { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
html[data-skin="greidus"] .btn--primary, html[data-skin="greidus"] .btn.primary {
  background: var(--accent); color: #ffffff; border: 1px solid transparent; box-shadow: 0 8px 20px -10px rgba(var(--accent-rgb), 0.7);
}
html[data-skin="greidus"] .btn--primary:hover, html[data-skin="greidus"] .btn.primary:hover { background: var(--accent-strong); filter: none; transform: translateY(-1px); }
html[data-skin="greidus"] .btn--secondary { border-radius: 8px; border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent-strong); }
html[data-skin="greidus"] .btn--secondary:hover { background: rgba(var(--accent-rgb), 0.08); }
html[data-skin="greidus"] .btn--full { border-radius: 8px; }
html[data-skin="greidus"] .hdr-register-btn { border-radius: 8px; }
html[data-skin="greidus"] a { color: var(--accent-strong); }
html[data-skin="greidus"] .btn, html[data-skin="greidus"] .nav a, html[data-skin="greidus"] .site-header a, html[data-skin="greidus"] .app-sidebar a, html[data-skin="greidus"] .site-footer a { color: inherit; }
html[data-skin="greidus"] .btn--primary, html[data-skin="greidus"] .btn.primary { color: #ffffff; }

/* ── Hero: the grade ruler ──────────────────────────────────────────── */
html[data-skin="greidus"] .hero-card {
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.9) 0 3px, transparent 3px) left/16px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(var(--accent-rgb), 0.55) 0 1px, transparent 1px 9px) 3px 0/9px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(var(--accent-rgb), 0.9) 0 1px, transparent 1px 45px) 3px 0/13px 100% no-repeat,
    var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow); padding-left: 2.6rem;
}
html[data-skin="greidus"] .hero-card::after { display: none; }

/* ── Home hero (.mx-hero): the matrix itself, drawn as a faint grid with the teal rule ── */
html[data-skin="greidus"] .mx-hero__inner {
  background:
    linear-gradient(180deg, var(--accent) 0 4px, transparent 4px) top/100% 4px no-repeat,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.10) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.10) 1px, transparent 1px) 0 0/28px 28px,
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0.35)),
    var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 3rem 2rem 2.4rem;
}
html[data-skin="greidus"][data-theme="dark"] .mx-hero__inner {
  background:
    linear-gradient(180deg, var(--accent) 0 4px, transparent 4px) top/100% 4px no-repeat,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.12) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.12) 1px, transparent 1px) 0 0/28px 28px,
    radial-gradient(ellipse at 50% 0%, rgba(20, 35, 39, 0.95), rgba(20, 35, 39, 0.6) 60%, rgba(20, 35, 39, 0.4)),
    var(--card);
}
html[data-skin="greidus"] .mx-hero__title { font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.025em; }
html[data-skin="greidus"] .mx-hero__desc strong { color: var(--accent-strong); }
html[data-skin="greidus"] .mx-hero__tag { background: var(--surface); border: 1px solid var(--border); text-transform: none; letter-spacing: 0; font-weight: 500; }
html[data-skin="greidus"] .mx-hero__tag:first-child { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent-strong); }
html[data-skin="greidus"] .section-header h2, html[data-skin="greidus"] .mx-picker h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
html[data-skin="greidus"] .mx-domain-section__title { color: var(--accent-strong); }
html[data-skin="greidus"] .progress-bar__fill--warning { background: var(--accent); }

/* ── Surfaces ───────────────────────────────────────────────────────── */
html[data-skin="greidus"] .app-sidebar { background: var(--surface); }
html[data-skin="greidus"] .sidebar-link--active { background: rgba(var(--accent-rgb), 0.1); color: var(--accent-strong); box-shadow: inset 3px 0 0 var(--accent); }
html[data-skin="greidus"] .sidebar-link:hover { background: rgba(var(--accent-rgb), 0.06); }
html[data-skin="greidus"] .site-footer { background: var(--surface); border-top: 1px solid var(--border); }
html[data-skin="greidus"] .stat-card, html[data-skin="greidus"] .pricing-card { box-shadow: none; }
html[data-skin="greidus"] .stat-card--accent { border-color: rgba(var(--accent-rgb), 0.45); }
html[data-skin="greidus"] .form-input { border-radius: 8px; background: var(--surface); }
html[data-skin="greidus"] .form-input:focus { border-color: var(--accent); }
html[data-skin="greidus"] .avatar, html[data-skin="greidus"] .avatar--lg, html[data-skin="greidus"] .hdr-user-dropdown__avatar {
  background: var(--accent); color: #ffffff;
}
html[data-skin="greidus"] .progress-bar__fill { background: var(--accent); }
html[data-skin="greidus"] .badge--accent { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-strong); }
html[data-skin="greidus"] .role-badge--owner, html[data-skin="greidus"] .role-badge--admin { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-strong); }
html[data-skin="greidus"] .alert--success { background: rgba(27, 143, 90, 0.1); border-color: rgba(27, 143, 90, 0.25); }
html[data-skin="greidus"] .alert--warning { background: rgba(209, 138, 0, 0.1); color: #8a5a00; border-color: rgba(209, 138, 0, 0.3); }
html[data-skin="greidus"][data-theme="dark"] .alert--warning { color: var(--warning); }
html[data-skin="greidus"] .alert--error { background: rgba(214, 69, 69, 0.08); border-color: rgba(214, 69, 69, 0.3); }
html[data-skin="greidus"] .alert--info { background: rgba(var(--accent-rgb), 0.08); border-color: rgba(var(--accent-rgb), 0.25); color: var(--accent-strong); }
html[data-skin="greidus"] .assignment-status--completed { color: var(--success); }
html[data-skin="greidus"] .mx-detail-overlay, html[data-skin="greidus"] .gsearch-overlay { background: rgba(18, 32, 42, 0.35); }
html[data-skin="greidus"] .hdr-user-dropdown { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 40px -16px rgba(18, 32, 42, 0.35); }
html[data-skin="greidus"] .nav__dropdown-menu { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 40px -16px rgba(18, 32, 42, 0.35); }
html[data-skin="greidus"] .hdr-icon-btn { color: var(--text-secondary); }
html[data-skin="greidus"] .hdr-icon-btn:hover { color: var(--text-primary); background: rgba(18, 32, 42, 0.05); }
html[data-skin="greidus"] ::selection { background: rgba(var(--accent-rgb), 0.25); }
html[data-skin="greidus"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Step pills of the review stepper and level chips pick the accent instead of amber */
html[data-skin="greidus"] .cycle-step--done .cycle-step__num, html[data-skin="greidus"] .cycle-step--current { border-color: rgba(var(--accent-rgb), 0.5); }
html[data-skin="greidus"] .rlevel-btn--active, html[data-skin="greidus"] .level-btn--active { background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); color: var(--accent-strong); }