/**
 * BillGrid global design tokens (L1) - Warm Ledger brand.
 *
 * TOKEN CONVENTION
 * ----------------
 * CANONICAL: the raw Warm-Ledger tokens are the source of truth and match the
 *   mock design system (docs/mocks/app/assets/css/billgrid.css) name-for-name:
 *     - palette:  --gold*, --sand-*, --ink, --text*, --bg-*, --border*
 *     - radii:    --r-sm / --r-md / --r-lg / --r-pill
 *     - type:     --fs-xs / --fs-sm / --fs-ui / --fs-body / --fs-h2 / --fs-h1
 *     - status:   --*-bg / --*-fg (draft/sent/paid/overdue/partial)
 *
 * ALIASES: the --color-*, --radius-*, --space-*, --font-size-* families below
 *   are COMPATIBILITY aliases that bridge legacy app CSS. They resolve to the
 *   canonical tokens; do not treat them as a second design system.
 *
 * RULES
 *   - New rules use the CANONICAL names.
 *   - Existing files converge to canonical opportunistically ONLY when they are
 *     already being edited for parity. Do NOT do a global rename: both families
 *     have hundreds of intermixed references and a sweep is pure churn/risk.
 */
:root {
  /* Warm ledger brand palette */
  --gold: #9a7b43;
  --gold-deep: #765a30;
  --gold-bright: #b9974f;
  --gold-soft: #f3ead2;
  --cream: #faf6ea;
  --cream-line: #e8ddc4;

  --sand-25: #fdfcf9;
  --sand-50: #f8f5ee;
  --sand-100: #f1ece1;
  --sand-200: #e6dfd0;
  --sand-300: #d6cdb8;
  --sand-400: #b4a98e;
  --sand-500: #948a6f;
  --sand-600: #6d6452;
  --sand-700: #4a4337;
  --sand-800: #2d2920;
  --sand-900: #1d1a13;

  --ink: #28241c;
  --text: #2b2720;
  --text-muted: #6d6452;
  --text-soft: #9b9279;

  --bg-app: #f4f0e7;
  --bg-panel: #ffffff;
  --bg-hover: var(--sand-100);
  --border: var(--sand-200);
  --border-soft: var(--sand-100);

  --ring: var(--gold);
  --gold-wash: rgba(154, 123, 67, 0.09);
  --chip-bg: rgba(109, 100, 82, 0.12);
  --scrim: rgba(29, 26, 19, 0.42);
  --on-accent: #ffffff;

  --paid-bg: #e9efdd;
  --paid-fg: #4d6a2c;
  --sent-bg: #e3eef0;
  --sent-fg: #2c6a72;
  --draft-bg: #efe8d8;
  --draft-fg: #7a7156;
  --overdue-bg: #f8e6dc;
  --overdue-fg: #b1482a;
  --partial-bg: #f5ecd6;
  --partial-fg: #9a7b1f;
  /* estimate turned into an invoice: violet so it never reads as Paid (status chips) */
  --billed-bg: #ece8f3;
  --billed-fg: #62508f;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
    system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-ui: 13px;
  --fs-body: 14px;
  --fs-h2: 15px;
  --fs-h1: 22px;
  --lh: 1.5;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Compact inline control height: discount %/$ toggle + mini input, line-item
     cost/qty fields - anything meant to read as a single dense row of controls. */
  --field-h-sm: 28px;

  --shadow-sm: 0 1px 2px rgba(40, 32, 16, 0.05);
  --shadow-raise: 0 1px 2px rgba(40, 32, 16, 0.12);
  --shadow-pop: 0 6px 24px rgba(40, 32, 16, 0.12);
  --letterhead: linear-gradient(
    90deg,
    var(--gold-deep),
    var(--gold-bright) 60%,
    var(--gold)
  );

  --nav-w: 184px;
  --content-max: 1320px;
  --content-max-wide: 1560px;
  --gutter: clamp(20px, 3.5vw, 56px);

  --z-sticky: 30;
  --z-dropdown: 40;
  --z-bulkbar: 55;
  --z-rowmenu: 60;
  --z-scrim: 80;
  --z-drawer: 81;
  --z-dialog: 83;
  --z-popover: 90;

  color-scheme: light;

  /* Legacy semantic aliases (existing app CSS) */
  --color-brand: var(--gold);
  --color-brand-soft: var(--gold-soft);
  --color-brand-on: var(--on-accent);
  --color-accent: var(--gold-deep);
  --color-accent-soft: var(--gold-soft);
  --color-accent-strong: var(--gold-deep);
  --color-accent-gradient-start: var(--gold-bright);
  --color-accent-gradient-end: var(--gold);

  --color-bg-page: var(--bg-app);
  --color-bg-main: var(--sand-25);
  --color-bg-panel: var(--bg-panel);
  --color-bg-input: var(--sand-25);
  --color-bg-hover: var(--bg-hover);
  --color-bg-nav-hover: var(--gold-wash);

  --color-border-subtle: var(--border);
  --color-border-soft: var(--border-soft);
  --color-border: var(--border);
  --color-border-strong: var(--sand-300);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-text-soft: var(--text-soft);
  --color-text-legacy: var(--ink);

  --color-success: var(--paid-fg);
  --color-warning: var(--partial-fg);
  --color-danger: var(--overdue-fg);
  --color-info: var(--sent-fg);
  --color-upgrade: var(--overdue-fg);

  --font-family-sans: var(--font-sans);
  --font-size-xs: 10px;
  --font-size-sm: var(--fs-xs);
  --font-size-ui: var(--fs-ui);
  --font-size-body: var(--fs-body);
  --font-size-md: var(--fs-body);
  --font-size-lg: var(--fs-h2);
  --font-size-title: var(--fs-h1);
  --font-size-display: 21px;
  --line-height-body: var(--lh);
  --line-height-tight: 1.3;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  --radius-xs: 3px;
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-pill: var(--r-pill);

  --shadow-soft: var(--shadow-pop);
  --shadow-hover: var(--shadow-raise);
  --focus-ring: 0 0 0 3px var(--gold-soft);
  --focus-ring-brand: var(--focus-ring);

  --layout-max-width: var(--content-max);
  --layout-header-height: 52px;
  --layout-mobile-bar-height: 48px;
  --layout-page-padding-x: var(--gutter);
  --layout-page-padding-y: 18px;

  --duration-fast: 140ms;
  --duration-normal: 200ms;
  --ease-standard: ease;

  /* Primary actions are warm charcoal, the same as the public site; gold stays for brand touches
     and selection (logos, totals, checked controls). Inverts to cream in dark mode. */
  --btn-primary-bg: var(--ink);
  --btn-primary-border: var(--ink);
  --btn-primary-text: var(--bg-panel);
  --btn-primary-hover-bg: #3b352a;

  --status-draft: var(--draft-fg);
  --status-sent: var(--sent-fg);
  --status-viewed: var(--text-muted);
  --status-paid: var(--paid-fg);
  --status-overdue: var(--overdue-fg);
  --status-void: var(--text-soft);
  --status-success: var(--paid-fg);
  --status-danger: var(--overdue-fg);
  --status-info: var(--sent-fg);
}

[data-theme="dark"] {
  --btn-primary-hover-bg: #fffaf0;
  --gold: #c79a52;
  --gold-deep: #d9b36a;
  --gold-bright: #e4c585;
  --gold-soft: #352a18;
  --cream: #1b1710;
  --cream-line: #332a1b;

  --sand-25: #1a1610;
  --sand-50: #231e15;
  --sand-100: #2b2417;
  --sand-200: #392f1f;
  --sand-300: #473b28;
  --sand-400: #6f6450;
  --sand-500: #8d8268;
  --sand-600: #ada284;
  --sand-700: #cabfa6;
  --sand-800: #e3dac7;
  --sand-900: #f4eede;

  --ink: #f1ebdb;
  --text: #e8e1d0;
  --text-muted: #a99f84;
  --text-soft: #7c7360;

  --bg-app: #131009;
  --bg-panel: #211c14;
  --bg-hover: #2b2417;
  --border: #352c1d;
  --border-soft: #272015;

  --gold-wash: rgba(199, 154, 82, 0.13);
  --chip-bg: rgba(202, 191, 166, 0.14);
  --scrim: rgba(0, 0, 0, 0.6);
  --on-accent: #1b1710;

  --paid-bg: #22311a;
  --paid-fg: #a6cb78;
  --sent-bg: #163139;
  --sent-fg: #74c3d1;
  --draft-bg: #2c2618;
  --draft-fg: #cabd92;
  --overdue-bg: #3a2318;
  --overdue-fg: #ea9c79;
  --partial-bg: #352b14;
  --partial-fg: #d8b659;
  --billed-bg: #2a2438;
  --billed-fg: #b9a8e6;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}