/* Ledger Design System — applied stylesheet for delvio-portal
 * Vendored from delviotax/delvio-design @ v1.2 (see design/ledger/PROVENANCE.md).
 * §-references below point at design/ledger/LEDGER_DESIGN_SYSTEM.md.
 *
 * Layer 1: the canonical :root tokens (mirror of design/ledger/tokens.css, §2/§9).
 * Layer 2: the §8 porting rules for the Django-templates + Tailwind stack
 *          (serif headings, small radii, eyebrow, focus ring, selection) plus
 *          a few component helpers used by the base template and About screen.
 *
 * The red/yellow/green data-entry state convention (§6) is NOT in this file and
 * is never restyled by it. This app has no such entry-state widgets today.
 *
 * Layer 3 (2026-09-03): the Slate v2.3 §2.2 amendments Ken asked every app to
 * carry — darker labels, darker boxes, and the app's own base color (Portal =
 * sky, --app-portal). The client surface keeps its simpler Ledger layout; only
 * those three things change here. Slate's tokens.css is NOT linked on client
 * pages (tests/test_slate.py pins that) — the aliases below are the portal's
 * own, named to match Slate so the two stacks read the same way.
 */

/* ── Layer 1 · canonical tokens (§2/§9) ───────────────────────────────── */
:root {
  /* Surfaces */
  --color-ink: #12100c;
  --color-paper: #f7f5f0;
  --color-paper-2: #fffdf8;
  --color-paper-3: #f2ede0;

  /* Gold accents */
  --color-gold: #a8842c;          /* chrome/accent only — not must-read text (§12.1) */
  --color-gold-dark: #8a6c24;     /* gold hover + small/must-read gold text (§12.1) */
  --color-gold-bright: #f5c542;   /* CTA fill (ink text) */
  --color-gold-bright-hover: #e7b93a;

  /* Text */
  --color-muted: #4b463c;         /* secondary body text */
  --color-muted-2: #7a7264;       /* supplementary >=12px, paper-2 only (§12.2) */

  /* Structure */
  --color-line: #e2ddd0;          /* hairline borders, dividers, row separators */

  /* Amounts / status (NOT the entry-field convention) */
  --color-pos: #2f7a4d;
  --color-pos-hover: #27663f;
  --color-neg: #b04a4a;
  --color-neg-hover: #9a3e3e;
  --color-neg-subtle: #f7ecec;

  /* Selection */
  --color-selection-bg: #f5c542;
  --color-selection-text: #12100c;

  /* Focus ring — gold @ 25% (§7, §11) */
  --focus-ring: rgba(168, 132, 44, 0.25);

  /* Type */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Radius (§5) */
  --radius: 4px;
  --radius-lg: 6px;

  /* ── Layer 3 · Slate v2.3 amendments (Ken, 2026-09-03; firm D-045) ────── */
  --app-portal: #0369a1;                      /* Slate §9 — Portal's base color (sky) */
  --accent: var(--app-portal);
  --accent-hover: color-mix(in srgb, var(--accent) 85%, #000);
  --text-label: var(--color-ink);             /* rule 1: labels are ink, medium weight */
  --border-emphasis: var(--color-muted);      /* rule 2: boxes are boxes (was Tailwind slate-300) */
  --surface-toolbar: color-mix(in srgb, var(--accent) 5%, #fff);   /* rule 3: table heads carry the app's color */
  --focus-ring-accent: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* ── Layer 2 · porting rules (§8) ─────────────────────────────────────── */

/* Paper surface + ink text, system sans body — no Google-Fonts dependency (§3). */
body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

/* Serif headings h1–h3, regular weight reads like print (§3). */
h1, h2, h3, .font-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-ink);
}

/* Small radii everywhere; circular elements stay circular (§5). */
.rounded, .rounded-md, .rounded-lg { border-radius: var(--radius) !important; }
.rounded-xl, .rounded-2xl { border-radius: var(--radius-lg) !important; }

/* Selection (§2). */
::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }

/* Amounts use tabular figures — always (§3). */
.tabular-nums, .amount { font-variant-numeric: tabular-nums; }

/* Eyebrow label — 11px uppercase gold; small gold text uses gold-dark (§3/§12.1). */
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-gold-dark);
  font-family: var(--font-sans);
}

/* Brand wordmark — serif bold, ink product name + gold suffix (§3). */
.wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-ink);
}
.wordmark .suffix { color: var(--accent); }   /* v2.3: the app's base color in the wordmark */

/* Gold focus ring, not a heavy border (§7/§11). */
.focus-ledger:focus,
.focus-ledger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-color: var(--color-gold-dark);
}

/* ── Component helpers (§4) ───────────────────────────────────────────── */

/* Primary button: ink bg, paper text; hover → pure black (§4). */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-sans); font-size: 14px;
  padding: 10px 18px; border-radius: var(--radius);
  border: 1px solid var(--color-ink); cursor: pointer;
}
.btn-primary:hover { background: #000; border-color: #000; }

/* CTA (gold) button: gold-bright bg, ink text, semibold (§4). */
.btn-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--color-gold-bright); color: var(--color-ink);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: var(--radius);
  border: 1px solid var(--color-gold-bright); cursor: pointer;
}
.btn-cta:hover { background: var(--color-gold-bright-hover); border-color: var(--color-gold-bright-hover); }

/* Secondary button: paper-2 bg, line border; hover → gold border (§4). */
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--color-paper-2); color: var(--color-ink);
  font-family: var(--font-sans); font-size: 14px;
  padding: 10px 18px; border-radius: var(--radius);
  border: 1px solid var(--color-line); cursor: pointer;
}
.btn-secondary:hover { border-color: var(--color-gold); }

/* Card: white bg, 1px line border, small radius (§4). */
.card {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: 22px;
}
.card-header { border-bottom: 1px solid var(--color-line); padding-bottom: 12px; margin-bottom: 16px; }

/* Text-input, Ledger-styled: paper-2 fill, line border, gold focus ring. */
.input-ledger {
  background: var(--color-paper-2); color: var(--color-ink);
  border: 1px solid var(--color-muted-2); border-radius: var(--radius);
  padding: 8px 10px; font-family: var(--font-sans); font-size: 14px;
}
.input-ledger:focus {
  outline: none; box-shadow: 0 0 0 2px var(--focus-ring);
  border-color: var(--color-gold-dark);
}

/* Avatar (§4): circular paper-3 fill, line border, gold serif initials. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9999px;
  background: var(--color-paper-3); border: 1px solid var(--color-line);
  color: var(--color-gold-dark); font-family: var(--font-serif);
  font-weight: 700; font-size: 13px;
}

/* ── Layer 3 · Slate v2.3 amendments, applied (Ken, 2026-09-03) ──────────── */

/* Rule 1 — labels are ink at medium weight. Templates carry `text-label
   font-medium`; this element rule is the backstop for any label without them. */
label { color: var(--text-label); font-weight: 500; }

/* Rule 2 — boxes are boxes: every text-entry control frames in the emphasis
   border. Templates carry `border-emphasis`; this is the backstop. */
input[type="text"], input[type="email"], input[type="search"], input[type="file"],
select, textarea {
  border-color: var(--border-emphasis);
}