/* ============================================================
   DAY LAW — DESIGN TOKENS (dashboard-aligned)
   Source of truth: ~/Documents/Claude/Artifacts/law-all-day-dashboard/index.html
   Extracted by Bot A on 2026-05-12.

   The dashboard is a single light/parchment theme — no
   data-accent / data-theme / prefers-color-scheme branches.
   All tokens are declared on :root with no body-attribute
   wrapper. (Verified: grep'd the file for data-accent,
   data-theme, data-mode, prefers-color-scheme — zero hits.)
   ============================================================ */

:root {
  /* ---------- Parchment surfaces ---------- */
  --bg:            #fafaf7;   /* main app background — body + .main scroll region */
  --bg-subtle:     #f4f3ee;   /* hover wash, search-wrap idle, nav-item.active, user-pill */
  --surface:       #ffffff;   /* KPI cards, sidebar, topbar, primary cards */
  --surface-2:     #fbfaf6;   /* table thead, damages ledger inset, secondary card */
  --border:        #e8e5dd;   /* 1px borders around cards, kpi, sidebar dividers */
  --border-strong: #d6d3c8;   /* default .btn border, focused search-wrap border */
  --hairline:      #f0ede5;   /* page-head bottom rule, card-head separator, list-row divider */

  /* ---------- Ink (warm-tinted dark text) ---------- */
  --ink:           #1a1815;   /* primary body text, headings, .matter-name */
  --ink-2:         #3f3a33;   /* secondary text (nav-item idle, ledger when, btn.ghost) */
  --muted:         #7a736a;   /* labels, captions, .kpi .label, table headers, page-sub */
  --muted-2:       #a09a90;   /* placeholder text, nav-section eyebrow, .kpi .corner icon */

  /* ---------- Brand: oxblood + aged brass ---------- */
  --brand:         #6b1d2c;   /* OXBLOOD — .btn.primary bg, active nav rail, .amp wordmark dot, eyebrow on details */
  --brand-2:       #8a2a3d;   /* lighter oxblood — .btn.primary hover, gradient pair */
  --gold:          #a37b3a;   /* AGED BRASS — .eyebrow text, brand-rule gradient, damages-total accent */

  /* ---------- Status: positive / good ---------- */
  --good:          #15703f;   /* "DONE" phase text, KPI delta-up, matrix checkmark */
  --good-bg:       #e3f1e7;   /* .pill.good background, .phase.done background */
  --good-dot:      #16a34a;   /* dot-marker.good (list row left indicator) */

  /* ---------- Status: warning / amber ---------- */
  --warn:          #92551a;   /* "Pending" sidebar pill text, matrix .pending */
  --warn-bg:       #fcf0dd;   /* .pill.warn — sync pill bg, CourtListener offline banner */
  --warn-dot:      #d97706;   /* BACKEND OFFLINE pill / dot-marker.warn (bolder orange) */

  /* ---------- Status: urgent / red ---------- */
  --urgent:        #9b1c2e;   /* urgent pill text, KPI delta-down */
  --urgent-bg:     #fbe1e3;   /* .pill.urgent background */
  --urgent-dot:    #dc2626;   /* RED DOT — Urgent Deadlines markers, icon-btn notification dot */

  /* ---------- Status: info / blue ---------- */
  --info:          #1b4f8a;   /* info pill text */
  --info-bg:       #e0eaf6;   /* .pill.info background */
  --info-dot:      #2563eb;   /* dot-marker.info */

  /* ---------- Status: draft / violet (Attorney Review badges) ---------- */
  --draft:         #5e3aa3;   /* DRAFT badge text — Attorney Review Queue rows */
  --draft-bg:      #ece4f7;   /* DRAFT badge background */
  --draft-dot:     #7c3aed;   /* draft dot-marker */

  /* ---------- Shadows (subtle, warm-tinted) ---------- */
  --shadow-sm:     0 1px 2px rgba(20,15,10,0.04);                                       /* default kpi/card resting */
  --shadow-md:     0 1px 2px rgba(20,15,10,0.04), 0 6px 20px rgba(20,15,10,0.05);       /* kpi hover, quick-action focus */
  --shadow-lg:     0 1px 2px rgba(20,15,10,0.04), 0 10px 30px rgba(20,15,10,0.07);      /* elevated modals (not used heavily) */

  /* ---------- Radii ---------- */
  --radius-sm:     8px;      /* icon-btn, nav-item, btn corners */
  --radius:        12px;     /* KPI cards, primary cards, research result tiles */
  --radius-lg:     16px;     /* not heavily used — reserved for prominent panels */

  /* ---------- Typography families ---------- */
  --serif:         "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
                              /* wordmark, h1.page-title, .card-title, .kpi .value, .ledger-amt */
  --sans:          -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
                              /* default body, buttons, nav, table rows */
  --mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;
                              /* .kbd, .matter-id, .ledger-date, .feed-when, .list-row .when */

  /* ---------- Type scale (literal pixel values used in the dashboard) ---------- */
  --t-nav-eyebrow:    10px;   /* .nav-section ("WORKSPACE", "OPERATE") — letter-spacing 0.12em, uppercase, 600 */
  --t-mono-sm:        11px;   /* .kbd, .matter-id, .feed-when, .user-pill .who .role */
  --t-eyebrow:        11px;   /* .eyebrow on page-head ("MONDAY · MAY 11, 2026") — letter-spacing 0.16em, uppercase, 600, --gold */
  --t-kpi-label:      11px;   /* .kpi .label — letter-spacing 0.12em, uppercase, 600 */
  --t-pill:           11px;   /* .pill — 600 weight, rounded 999px */
  --t-body-sm:        12px;   /* .card-sub, .page-sub, table cells, deltas */
  --t-body:           13px;   /* default btn / page-sub baseline */
  --t-nav:            13.5px; /* .nav-item, .list-row .title */
  --t-base:           14px;   /* body baseline (font-size on <body>) */
  --t-card-title:     16px;   /* .card-title — serif, 500, tracking -0.005em */
  --t-ledger-amt:     16px;   /* .ledger-amt — serif, tabular-nums, 500 */
  --t-damages-total:  18px;   /* .dmg-row.total .num — serif */
  --t-brand-mark:     20px;   /* "Law All·Day" wordmark — serif italic 500, tracking -0.01em, line-height 1 */
  --t-h1:             30px;   /* h1.page-title — serif 500, tracking -0.01em */
  --t-kpi-value:      30px;   /* .kpi .value — serif 500, tracking -0.02em, tabular-nums */

  /* ---------- Line heights ---------- */
  --lh-tight:        1;       /* wordmark, KPI values */
  --lh-snug:         1.2;     /* .user-pill .who */
  --lh-body:         1.5;     /* body default */

  /* ---------- Letter spacing ---------- */
  --ls-tight:        -0.02em; /* KPI value */
  --ls-snug:         -0.01em; /* h1.page-title, brand-mark */
  --ls-card:         -0.005em;/* .card-title */
  --ls-eyebrow:      0.16em;  /* page-head .eyebrow (gold) */
  --ls-label:        0.12em;  /* nav-section, .kpi .label, dl.facts dt */
  --ls-avatar:       0.02em;  /* user-pill avatar initials */

  /* ---------- Layout ---------- */
  --topbar-h:        60px;    /* .topbar grid-template-rows */
  --sidebar-w:       240px;   /* .body grid-template-columns first track + .topbar */
  --main-pad-x:      32px;    /* .main horizontal padding */
  --main-pad-y:      28px;    /* .main top padding (60px bottom) */
  --max-content:     1200px;  /* [INFER] not in source — dashboard uses fluid grids, no max-width clamp */
  --max-prose:       62ch;    /* [INFER] not in source — best guess from Day Law convention */
  --hairline-width:  1px;     /* all 1px borders */
  --gap-card:        16px;    /* .grid-2 / .grid-3 gap, card-to-card spacing */
  --gap-kpi:         14px;    /* .kpi-row gap */

  /* ---------- Motion ---------- */
  --ease-out:        ease;    /* @keyframes fade uses bare "ease" — no custom cubic-bezier in source */
  --t-quick:         140ms;   /* .btn transition: 0.14s */
  --t-base:          160ms;   /* .kpi transition: 0.16s */
  --t-slow:          250ms;   /* .view fade-in: .25s ease */
  --t-search:        150ms;   /* .search-wrap transition: 0.15s */

  /* ---------- Brand-mark accents (the "Law All·Day" wordmark) ---------- */
  --brand-mark-dot:        var(--brand);
                              /* the middle "·" character (.amp span) is rendered in --brand
                                 oxblood at 600 weight — wrapped in italic serif from .brand-mark */
  --brand-rule-gradient:   linear-gradient(90deg, var(--gold), transparent);
                              /* 28×2px brass rule sitting under the wordmark */
  --avatar-gradient:       linear-gradient(135deg, #2c2622, #6b1d2c);
                              /* user-pill avatar — dark espresso → oxblood, white-cream text #fbfaf6 */

  /* ---------- "On brand" surface text (foreground used over --brand) ---------- */
  --on-brand:        #fbfaf6; /* .btn.primary text, avatar initials — slightly warm white, not pure #fff */
  --on-brand-nav:    #ffffff; /* sidebar nav-item badge text on --brand pill */

  /* ---------- Focus / outline ---------- */
  --focus-ring:      var(--brand);
                              /* research-bar input:focus uses 2px solid var(--brand), offset -1px */
  --focus-ring-w:    2px;

  /* ---------- Body font features ---------- */
  --font-features:   "ss01", "cv01", "cv11";
                              /* applied on <body> — stylistic set + character variants for Inter/system */
}

/* ============================================================
   No theme variants. The dashboard is a single parchment theme.
   If Day Law wants to retain a dark mode later, that's a Bot B/C
   decision — these tokens do not assume it.
   ============================================================ */
