/*
 * theme.css — Practice Log. Dense and fast, like Linear: a near-black
 * workbench with one warm amber accent (the colour of a "pending" verdict),
 * Geist for text and Geist Mono for problem numbers. Opens dark; the light
 * set is a warm paper version, not the dark one inverted.
 */

:root {
  color-scheme: dark;
  --canvas: #0d0f12;
  --surface: #15181d;
  --surface-2: #1c2026;
  --border: #262b33;
  --border-strong: #39404a;
  --ink: #e6e8eb;
  --muted: #929ba6;
  --accent: #f2a93b;
  --accent-hover: #f7bb5c;
  --accent-ink: #1b1300;
  --accent-text: #f2b04f;
  --accent-strong: #f6c46e;
  --accent-soft: #261e10;
  --accent-border: #5a4419;
  --success: #2fbf71;
  --success-ink: #04210f;
  --success-soft: #10241a;
  --success-strong: #6fd99d;
  --warning: #e3a92b;
  --warning-ink: #241a03;
  --warning-soft: #2a2110;
  --warning-strong: #f0c463;
  --danger: #c9353b;
  --danger-ink: #ffffff;
  --danger-soft: #2d1517;
  --danger-strong: #ff9a9c;
  --chart-1: #f2a93b;
  --chart-2: #2fbf71;
  --chart-3: #5b9cf5;
  --chart-4: #d96ad0;
  --chart-5: #3fc7c7;
  --chart-6: #e5484d;

  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.025em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 8px;
  --radius-card: 10px;
  --radius-input: 8px;
  --shadow-card: none;
  --card-pad: 1.25rem;
  --btn-weight: 550;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #f0eee9;
  --border: #e3e0d9;
  --border-strong: #c6c1b6;
  --ink: #16181c;
  --muted: #5a5f67;
  --accent: #9a5900;
  --accent-hover: #834b00;
  --accent-ink: #ffffff;
  --accent-text: #8f5300;
  --accent-strong: #6e3f00;
  --accent-soft: #fbefd9;
  --accent-border: #ebc98d;
  --success: #15783f;
  --success-ink: #ffffff;
  --success-soft: #dff2e6;
  --success-strong: #0f6236;
  --warning: #955a00;
  --warning-ink: #ffffff;
  --warning-soft: #fbecd3;
  --warning-strong: #7a4800;
  --danger: #c8312f;
  --danger-ink: #ffffff;
  --danger-soft: #fbe1df;
  --danger-strong: #9b211f;
  --chart-1: #9a5900;
  --chart-2: #15783f;
  --chart-3: #2f6fd1;
  --chart-4: #a3409b;
  --chart-5: #13878a;
  --chart-6: #c8312f;
}

/*
 * app.css — Practice Log's own pieces: the top bar's links, the problem rows,
 * the stat tiles, the progress meters and the result picker. Tokens only.
 */

.brand-mark {
  @apply grid size-7 place-items-center rounded-md bg-accent text-accent-ink;
}
.brand-mark .icon { @apply size-4; }

.topnav { scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }

.navlink {
  @apply inline-flex h-9 shrink-0 items-center gap-2 rounded-md px-3 text-sm font-medium text-muted transition-colors duration-150;
}
.navlink:hover { @apply bg-surface-2 text-ink no-underline; }
.navlink.is-active { @apply bg-accent-soft text-accent-strong; }
.navlink .icon { @apply size-4 shrink-0; }
@media (width < 48rem) {
  .navlink { @apply px-2.5; }
  .navlink span { @apply sr-only; }
}

.mono { font-family: var(--font-mono); }

.stat {
  @apply rounded-lg border border-border bg-surface px-4 py-3;
}
.stat-value { @apply font-display text-2xl font-semibold tabular-nums text-ink; }
.stat-label { @apply mt-0.5 text-xs text-muted; }

.problem-list > li + li { border-top: var(--border-w, 1px) solid var(--border); }
.problem-line { @apply flex items-center gap-3 py-3; }
.pid { @apply w-12 shrink-0 text-xs tabular-nums text-muted; font-family: var(--font-mono); }

.week-no {
  @apply grid h-8 w-10 shrink-0 place-items-center rounded-md bg-surface-2 text-xs font-medium text-ink;
  font-family: var(--font-mono);
}
.acc-item[open] .week-no { @apply bg-accent text-accent-ink; }

.meter {
  @apply block h-2 w-full overflow-hidden rounded-full border-0;
  appearance: none;
  background: var(--surface-2);
}
.meter::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.meter::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.meter::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.meter.is-good::-webkit-progress-value { background: var(--success); }
.meter.is-good::-moz-progress-bar { background: var(--success); }

.result-opt { @apply relative block cursor-pointer; }
.result-opt input { @apply sr-only; }
.result-opt span {
  @apply flex h-full flex-col items-center justify-center gap-1.5 rounded-lg border border-border-strong bg-surface px-2 py-3
    text-center text-xs font-medium text-muted transition-colors duration-150;
}
.result-opt:hover span { @apply border-ink text-ink; }
.result-opt input:checked + span { @apply border-accent bg-accent-soft text-accent-strong; }
.result-opt input:focus-visible + span { box-shadow: var(--ring); }