@import url('./base.css');
@import url('./fonts.css');

:root {
  color-scheme: dark;
  --paper: #0e1116; --paper-2: #161a21; --ink: #e6e8ea;
  --ink-2: #aab1b8; --ink-3: #929aa3; --line: #262b33;
  --brand: #e6e8ea; --code-bg: #161a21;
  --background: var(--paper); --surface: var(--paper-2); --text: var(--ink); --muted: var(--ink-2);
  --accent: #ea4052; --accent-soft: #3a141a; --accent-text: #ff8391;
  --border: var(--line); --input-bg: #0e1116; --nav-bg: #161a21; --nav-text: #aab1b8;
  --nav-active: #3a141a; --nav-active-text: #ff8391; --nav-border: #343b45;
  --danger: #ff8391; --danger-bg: #3a141a; --success: #7ee787; --success-bg: #122b1c;
  --notice-bg: #2c2515; --notice-text: #e6c779; --backdrop: #060709e0;
  --radius: 4px; --button-radius: 4px; --input-radius: 4px; --modal-radius: 8px;
  --font-sans: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font: var(--font-sans);
  --nav-shadow: 0 12px 32px #00000059;
  --personal-bg: #161a21;
  --chart-0: #ff8391; --chart-1: #8fd3ff; --chart-2: #7ee787; --chart-3: #e6c779; --chart-4: #c6a2f5;
  --chart-5: #77d9d0; --chart-6: #ffab82; --chart-7: #c2cbd4; --chart-8: #d3a4c7; --chart-9: #a9c5ff;
  --chart-colors: #ff8391,#8fd3ff,#7ee787,#e6c779,#c6a2f5,#77d9d0,#ffab82,#c2cbd4,#d3a4c7,#a9c5ff;
}
body { background: var(--background); color: var(--text); font-family: var(--font); }
.surface { background: var(--surface); }
.muted, .caption, .app-footer, .rank, .table-labels, .task-number { color: var(--muted); }
.eyebrow { color: var(--accent); }
.button.primary { background: var(--accent); color: #0e1116; }
.button.secondary { background: var(--input-bg); border-color: var(--border); color: var(--text); }
.button.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }
.icon-button, .text-button, .admin-item, .legend-button { background: transparent; color: inherit; }
.icon-button:hover, .admin-item:hover { color: var(--accent); }
.badge, .avatar, .feature-icon { background: var(--accent-soft); color: var(--accent-text); }
.badge.subtle { background: var(--input-bg); color: var(--muted); }
.status-line { color: var(--muted); }
.status-dot { background: var(--muted); }
.status-line.running { color: var(--success); }
.status-line.running .status-dot { background: #3fb950; box-shadow: none; }
.status-line.paused { color: var(--notice-text); }
.bottom-nav { background: var(--nav-bg); color: var(--nav-text); box-shadow: var(--nav-shadow); }
.bottom-nav a.router-link-active { background: var(--nav-active); color: var(--nav-active-text); }
.personal-card { background: var(--personal-bg); }
.stats-grid svg { color: var(--accent); }
.stats-grid span { color: var(--muted); }
input:not([type=checkbox]), textarea, select { background: var(--input-bg); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox] { accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.notice { background: var(--notice-bg); color: var(--notice-text); }
.notice.error { background: var(--danger-bg); color: var(--danger); }
.notice.success { background: var(--success-bg); color: var(--success); }
.error-text { color: var(--danger); }
.ranking-row.is-me { background: var(--accent-soft); }
.ranking-row .nickname small { color: var(--accent); }
.task-solved { border-color: var(--accent-soft); }
.task-solved .task-number, .task-solved .task-summary .caption { color: var(--accent); }
.task-points { color: var(--accent); }
.task-points small { color: var(--muted); }
.modal-backdrop { background: var(--backdrop); backdrop-filter: blur(5px); }
.markdown pre, .hint { background: var(--input-bg); }
.markdown a { color: var(--accent); }

/* Editorial typography and restrained geometry from the blog. */
body { font-feature-settings: 'ss01', 'cv11'; }
h1 { font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
h2, h3, .brand, .button, .nickname { font-weight: 600; }
.eyebrow, .caption, .badge, .task-number, .task-points, .rank,
.stats-grid strong, .app-footer, .table-labels, .status-line,
.markdown code, .markdown pre, .audit-row pre, .flag-form input {
  font-family: var(--font-mono);
}
.eyebrow { color: var(--ink-3); font-weight: 400; letter-spacing: .12em; }
.app-header { border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.page-heading { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.personal-card { border-top: 2px solid var(--accent); }
.avatar, .feature-icon, .badge { border-radius: 4px; }
.bottom-nav { border-radius: 8px; }
.bottom-nav a { border-radius: 4px; }
.button.primary:hover:not(:disabled) { background: #f45c6c; }
.button.secondary:hover:not(:disabled) { border-color: #59636e; }
.button.primary { font-weight: 600; }
.task-card:hover { border-color: var(--accent); }
.task-solved { border-color: #2b5b39; }
.task-solved .task-number, .task-solved .task-summary .caption { color: var(--success); }
.stats-grid strong, .task-points, .ranking-row > :last-child { font-variant-numeric: tabular-nums; }
.markdown pre { border: 1px solid var(--line); background: var(--code-bg); }
.markdown code { background: var(--code-bg); border-radius: 3px; padding: .1em .35em; }
.markdown pre code { background: transparent; padding: 0; }
.markdown blockquote { border-left: 3px solid var(--accent); color: var(--ink-2); margin-left: 0; padding-left: 16px; }
.markdown a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .18em; }
.markdown a:hover { color: var(--accent-text); }
.hint { border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.modal-panel { box-shadow: 0 24px 48px -16px #00000059; }
::selection { background: #63242e; color: var(--ink); }
/* Text accents stay readable on the charcoal and dark-red surfaces. */
.task-points, .ranking-row .nickname small,
.icon-button:hover, .admin-item:hover { color: var(--accent-text); }