/* Little Brook Montessori — design tokens & base styles. See DESIGN-SYSTEM.md. */

@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Cabin:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  color-scheme: light;

  --lb-paper: #F7F4EC;
  --lb-surface: #FFFFFF;
  --lb-surface-sunk: #F0EBDE;
  --lb-ink: #42372C;
  --lb-ink-muted: #6B5D4F;
  --lb-ink-faint: #93867A;
  --lb-line: #E3DBCB;
  --lb-line-strong: #CFC3AC;

  --lb-brook: #6E97A3;
  --lb-brook-strong: #4A7480;
  --lb-brook-tint: #DEE9EB;
  --lb-brook-ring: #6E97A3;

  --lb-ok-text: #3F6B45;
  --lb-ok-fill: #5C8A5E;
  --lb-ok-tint: #E0EBDD;
  --lb-attention-text: #9A6414;
  --lb-attention-fill: #C2841C;
  --lb-attention-tint: #F4E7CE;
  --lb-overdue-text: #A8443A;
  --lb-overdue-fill: #BC5346;
  --lb-overdue-tint: #F2DAD3;

  --lb-area-practical: #7C93A6;
  --lb-area-sensorial: #C98C93;
  --lb-area-language: #B5605A;
  --lb-area-math: #6E9A6E;
  --lb-area-culture: #C79A54;
  --lb-area-art: #9C6FA6;
  --lb-area-science: #4F9AA6;

  --lb-r-sm: 6px;
  --lb-r-md: 10px;
  --lb-r-lg: 16px;
  --lb-r-pill: 999px;
  --lb-shadow-pop: 0 6px 24px -8px rgba(66, 55, 44, .28);
  --lb-ease: cubic-bezier(.2, .6, .2, 1);

  --lb-font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --lb-font-body: "Cabin", -apple-system, "Segoe UI", Roboto, sans-serif;
  --lb-font-data: "IBM Plex Mono", "SF Mono", "Roboto Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --lb-paper: #211C16;
    --lb-surface: #2B251D;
    --lb-surface-sunk: #191510;
    --lb-ink: #EDE6D8;
    --lb-ink-muted: #B7AC9B;
    --lb-ink-faint: #8A7E6C;
    --lb-line: #3C3428;
    --lb-line-strong: #524734;
    --lb-brook: #7FA9B4;
    --lb-brook-strong: #9BC1CA;
    --lb-brook-tint: #2E3A3C;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --lb-paper: #211C16;
  --lb-surface: #2B251D;
  --lb-surface-sunk: #191510;
  --lb-ink: #EDE6D8;
  --lb-ink-muted: #B7AC9B;
  --lb-ink-faint: #8A7E6C;
  --lb-line: #3C3428;
  --lb-line-strong: #524734;
  --lb-brook: #7FA9B4;
  --lb-brook-strong: #9BC1CA;
  --lb-brook-tint: #2E3A3C;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--lb-paper);
  color: var(--lb-ink);
  font: 400 14px/1.5 var(--lb-font-body);
}
h1, h2, h3 { font-family: var(--lb-font-display); font-weight: 400; text-wrap: balance; margin: 0 0 8px; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { max-width: 68ch; }
a { color: var(--lb-brook-strong); }
:focus-visible { outline: 2px solid var(--lb-brook-ring); outline-offset: 2px; }

.lb-tabular { font-family: var(--lb-font-data); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- shell ---- */
.lb-masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--lb-line);
  background: var(--lb-surface);
}
.lb-masthead__brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--lb-ink); }
.lb-masthead__brand strong { font-family: var(--lb-font-display); font-size: 20px; }
.lb-masthead__brand span { color: var(--lb-ink-faint); font-size: 12px; }
.lb-nav { display: flex; gap: 4px; }
.lb-nav a {
  display: inline-block; padding: 8px 14px; border-radius: var(--lb-r-pill);
  color: var(--lb-ink-muted); text-decoration: none; font-weight: 500;
}
.lb-nav a[aria-current="page"] { background: var(--lb-brook-tint); color: var(--lb-brook-strong); }
.lb-nav a:hover { background: var(--lb-surface-sunk); }
.lb-theme-toggle {
  border: 1px solid var(--lb-line-strong); background: var(--lb-surface); color: var(--lb-ink-muted);
  border-radius: var(--lb-r-pill); width: 36px; height: 36px; cursor: pointer; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lb-main { max-width: 1080px; margin: 0 auto; padding: 24px; }

/* ---- context bar (D20 / DESIGN-SYSTEM §5) ---- */
.lb-context {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 20px; background: var(--lb-surface-sunk);
  border-radius: var(--lb-r-md); font-size: 13px; color: var(--lb-ink-muted);
}
.lb-context a { color: var(--lb-ink-muted); }
.lb-context .lb-sep { color: var(--lb-ink-faint); }
.lb-context strong { color: var(--lb-ink); font-weight: 600; }

/* ---- buttons ---- */
.lb-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 500 14px var(--lb-font-body); padding: 8px 16px; border-radius: var(--lb-r-md);
  border: 1px solid transparent; min-height: 36px; text-decoration: none;
  transition: background 140ms var(--lb-ease), border-color 140ms var(--lb-ease);
}
.lb-btn--primary { background: var(--lb-brook); color: #fff; }
.lb-btn--primary:hover { background: var(--lb-brook-strong); }
.lb-btn--secondary { background: var(--lb-surface); border-color: var(--lb-line-strong); color: var(--lb-ink); }
.lb-btn--secondary:hover { background: var(--lb-surface-sunk); }
.lb-btn--ghost { background: transparent; color: var(--lb-brook-strong); padding-inline: 8px; }
.lb-btn--ghost:hover { background: var(--lb-brook-tint); }
.lb-btn--destructive { background: var(--lb-overdue-fill); color: #fff; }
.lb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- forms ---- */
.lb-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.lb-field label { font-size: 13px; font-weight: 600; color: var(--lb-ink-muted); }
.lb-field .lb-hint { font-size: 12px; color: var(--lb-ink-faint); }
.lb-field .lb-error { font-size: 12px; color: var(--lb-overdue-text); }
.lb-input, .lb-select, .lb-textarea {
  font: 400 14px var(--lb-font-body); padding: 8px 10px; min-height: 36px;
  border: 1px solid var(--lb-line-strong); border-radius: var(--lb-r-sm);
  background: var(--lb-surface); color: var(--lb-ink); width: 100%;
}
.lb-input:focus-visible, .lb-select:focus-visible, .lb-textarea:focus-visible {
  outline: 2px solid var(--lb-brook-ring); outline-offset: 2px;
}
.lb-field--invalid .lb-input { border-color: var(--lb-overdue-fill); }
.lb-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.lb-form-error {
  background: var(--lb-overdue-tint); color: var(--lb-overdue-text); border-radius: var(--lb-r-sm);
  padding: 10px 12px; margin-bottom: 16px; font-size: 13px;
}

/* ---- tables ---- */
.lb-table-wrap { overflow-x: auto; border: 1px solid var(--lb-line); border-radius: var(--lb-r-md); background: var(--lb-surface); }
table.lb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb-table thead th {
  background: var(--lb-surface-sunk); text-align: left; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--lb-ink-muted); padding: 10px 14px; white-space: nowrap;
}
.lb-table td { padding: 10px 14px; border-top: 1px solid var(--lb-line); vertical-align: top; }
.lb-table tbody tr:hover { background: var(--lb-brook-tint); }
.lb-table .lb-num { text-align: right; font-family: var(--lb-font-data); font-variant-numeric: tabular-nums; }
.lb-row-actions { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }

/* ---- confirm-in-place (archive/revive) ---- */
.lb-confirm { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lb-confirm span { color: var(--lb-ink-muted); }

/* ---- cards / lists ---- */
.lb-card { background: var(--lb-surface); border: 1px solid var(--lb-line); border-radius: var(--lb-r-md); padding: 16px; }
.lb-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lb-area-card {
  display: block; text-decoration: none; color: var(--lb-ink); background: var(--lb-surface);
  border: 1px solid var(--lb-line); border-left: 4px solid var(--lb-area-token, var(--lb-brook));
  border-radius: var(--lb-r-md); padding: 16px; transition: box-shadow 140ms var(--lb-ease);
}
.lb-area-card:hover { box-shadow: var(--lb-shadow-pop); }
.lb-area-card h3 { margin-bottom: 4px; }
.lb-area-card .lb-count { color: var(--lb-ink-muted); font-size: 13px; }
.lb-area-card .lb-empty-note { color: var(--lb-ink-faint); font-size: 13px; font-style: italic; }

.lb-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--lb-r-pill);
}
.lb-chip--attention { background: var(--lb-attention-tint); color: var(--lb-attention-text); }
.lb-chip--muted { background: var(--lb-surface-sunk); color: var(--lb-ink-muted); }

/* ---- empty state ---- */
.lb-empty { text-align: center; padding: 48px 24px; color: var(--lb-ink-muted); }
.lb-empty h2 { color: var(--lb-ink); }

/* ---- dialogs ---- */
dialog.lb-dialog {
  border: none; border-radius: var(--lb-r-lg); padding: 0; width: min(480px, 92vw);
  background: var(--lb-surface); color: var(--lb-ink); box-shadow: var(--lb-shadow-pop);
}
dialog.lb-dialog::backdrop { background: rgba(33, 28, 22, .45); }
.lb-dialog__body { padding: 24px; }
.lb-dialog__title { margin-bottom: 16px; }

/* ---- misc ---- */
.lb-meta-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 14px; margin: 0; }
.lb-meta-list dt { color: var(--lb-ink-muted); }
.lb-meta-list dd { margin: 0; }
.lb-photo { width: 40px; height: 40px; border-radius: var(--lb-r-pill); object-fit: cover; background: var(--lb-surface-sunk); }
.lb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.lb-export-link { font-size: 13px; }