/* AbsDabs Studio — visual tokens
 *
 * Single source of truth for color, typography, and spacing tokens.
 * Mirrors Studio_Visual_System_v1.md §A-C verbatim.
 *
 * Imported once via _layout.html before any other stylesheet.
 * Per-surface CSS reads var(--token-name); no inline hex outside this file.
 */

:root {
  /* ── Forest (primary) ─────────────────────────── */
  --forest: #1E3917;
  --forest-deep: #142810;
  --forest-mid: #3D5A33;
  --forest-soft: #4A6B3F;

  /* ── White (form inputs, overlays) ──────────────── */
  --white: #fff;

  /* ── Cream (background) ───────────────────────── */
  --cream: #FAF7EF;
  --cream-deep: #F0EBDB;
  --cream-deeper: #E5DFC9;

  /* ── Gold (accent) ────────────────────────────── */
  --gold: #9C7C3C;
  --gold-light: #B89968;
  --gold-soft: #D4BB89;

  /* ── Text ─────────────────────────────────────── */
  --ink: #1F1F1A;
  --muted: #6B6A5C;

  /* ── Rules and borders ────────────────────────── */
  --rule: #D4CDB5;
  --rule-soft: #E2DCC8;

  /* ── Status (financial favorability + system state) */
  --green-ok: #3F6B4A;
  --green-bg: #E8EDDB;
  --red-flag: #8B4A3A;
  --red-bg: #F2DDD4;
  --amber: #B07C2E;
  --amber-bg: #F5E5C4;

  /* ── CoA mapping state colors ────────────────────── */
  --coa-complete: #B8945A;
  --coa-partial: #BA7517;
  --coa-none: #A32D2D;

  /* ── Engagement health chip colors (D.10 vocabulary) ─ */
  --chip-health-on-track-bg: #F0FDF4;
  --chip-health-on-track-fg: #166534;
  --chip-health-behind-bg: #FFFBEB;
  --chip-health-behind-fg: #92400E;
  --chip-health-at-risk-bg: #FEF2F2;
  --chip-health-at-risk-fg: #991B1B;
  --chip-health-first-cycle-bg: #F9FAFB;
  --chip-health-first-cycle-fg: #374151;

  /* ── Derived aliases (surfaces use these for semantic clarity) ─── */
  --green: var(--green-ok);
  --red: var(--red-flag);
  --blue: #1E6191;
  --purple: #6b4a9c;
  --cream-hover: var(--cream-deep);
  --green-subtle: var(--green-bg);
  --green-text: var(--green-ok);
  --amber-subtle: var(--amber-bg);
  --amber-text: var(--amber);
  --red-subtle: var(--red-bg);
  --blue-subtle: var(--blue-bg);
  --ink-secondary: var(--muted);
  --ink-tertiary: #9C9A8C;

  /* ── Eyebrow / dateline ─────────────────────────── */
  --eyebrow-muted: #8C7A52;

  /* ── Payment velocity band colors (D.9) ─────────── */
  --velocity-yellow-bg: #FEF3C7;
  --velocity-yellow-fg: #92400E;

  /* ── Type families ────────────────────────────── */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  /* Aliases preserved for surfaces wired before T1 */
  --serif: var(--font-serif);
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* ── Type scale (web) ─────────────────────────── */
  --size-display: 48px;
  --size-h1: 32px;
  --size-h2: 22px;
  --size-h3: 18px;
  --size-h4: 17px;
  --size-body: 14px;
  --size-body-small: 13px;
  --size-caption: 12px;
  --size-label: 11px;
  --size-label-small: 10px;
  --size-mono: 11px;
  --size-mono-large: 28px;

  /* ── Spacing scale (multiples of 4) ───────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Radius ───────────────────────────────────── */
  --radius-button: 4px;
  --radius-card: 6px;
  --radius-pill: 10px;

  /* ── Shadow ───────────────────────────────────── */
  --shadow-card-hover: 0 8px 24px -8px rgba(20, 40, 16, 0.12);

  /* ── Chip semantic palette (status chips, badges, pills) ─────────── */
  --chip-green-fg: #1b5e20;
  --chip-green-bg: #e8f5e9;
  --chip-green-border: #a5d6a7;
  --chip-green-tie-bg: #e6f4ea;
  --chip-amber-fg: #7c4a00;
  --chip-amber-bg: #fff8e1;
  --chip-red-fg: #7f0000;
  --chip-red-bg: #fdecea;
  --chip-grey-fg: #555;
  --chip-grey-bg: #f5f5f5;
  --chip-pass-fg: #237804;
  --chip-pass-bg: #f6ffed;
  --chip-pass-border: #b7eb8f;
  --chip-warning-fg: #856404;
  --chip-warning-bg: #fffbe6;
  --chip-warning-border: #d4b106;
  --chip-blue-fg: #0958d9;
  --chip-blue-bg: #e6f7ff;
  --chip-blue-border: #91caff;
  --chip-purple-fg: #531dab;
  --chip-purple-bg: #f9f0ff;
  --chip-purple-border: #d3adf7;
  --chip-propco-fg: #1565c0;
  --chip-propco-bg: #e3f2fd;
  --surface-subtle: #f9f9f9;
  --link: #1677ff;
}

/* ── QBR / section-nav status chip palette ────────────────────────── */
:root {
  --chip-state-clean-bg: #C6F6D5;
  --chip-state-clean-fg: #276749;
  --chip-state-drift-bg: #FED7D7;
  --chip-state-drift-fg: #C53030;
  --chip-state-neutral-bg: #EDF2F7;
  --chip-state-neutral-fg: #718096;
  --chip-state-neutral-fg-dark: #4A5568;
  --chip-state-amber-bg: #FEFCBF;
  --chip-state-amber-fg: #744210;
  --chip-state-blue-bg: #BEE3F8;
  --chip-state-blue-fg: #2B6CB0;
  --chip-state-voice-bg: #FFFBEB;
  --chip-state-voice-border: #F6E05E;
  --chip-state-json-bg: #F7FAFC;
}

/* ── Outbound draft kind + status chip palette ─────────────────────── */
:root {
  --chip-od-vendor-bg: #dbeafe;
  --chip-od-vendor-fg: #1e40af;
  --chip-od-tenant-bg: #d1fae5;
  --chip-od-tenant-fg: #065f46;
  --chip-od-pending-bg: #fef9c3;
  --chip-od-pending-fg: #854d0e;
  --chip-od-hold-bg: #f1f5f9;
  --chip-od-hold-fg: #475569;
  --chip-od-blocked-bg: #fee2e2;
  --chip-od-blocked-fg: #991b1b;
  --chip-od-danger-accent: #f87171;
  --chip-od-danger-fg: #dc2626;
  --chip-od-error-bg: #fef2f2;
  --chip-od-error-fg: #7f1d1d;
}

/* ── NL QA confidence chip palette (dashboard propco) ──────────────── */
:root {
  --chip-conf-high-bg: #e8f3ec;
  --chip-conf-high-fg: #1e3917;
  --chip-conf-medium-bg: #fef3e2;
  --chip-conf-medium-fg: #7c4d00;
  --chip-conf-low-bg: #fce8e8;
  --chip-conf-low-fg: #7c1111;
  --chip-conf-throttle-border: #f5c842;
}

/* ── Vertical tag chips — provisional palette (Studio review pending) ── */
:root {
  --chip-v-dev-pipeline-bg: #e4f4f4;
  --chip-v-dev-pipeline-fg: #1a5c5c;
  --chip-v-commercial-bg: #f0f3f5;
  --chip-v-commercial-fg: #3d4f5c;
  --chip-v-residential-bg: #fffbeb;
  --chip-v-residential-fg: #854d0e;
  --chip-v-hospitality-bg: #f5f0ff;
  --chip-v-hospitality-fg: #5b21b6;
  --chip-v-opco-bg: #ecfdf5;
  --chip-v-opco-fg: #065f46;
  --chip-v-mixed-use-bg: #f5f0e8;
  --chip-v-mixed-use-fg: #6b4c2a;
  --chip-v-real-estate-bg: #f0f5eb;
  --chip-v-real-estate-fg: #3a5a2c;
}

/* ── Cash bucket chips ── */
:root {
  --chip-cash-operating-bg: #e4f4f4;
  --chip-cash-operating-fg: #1a5c5c;
  --chip-cash-sweep-bg: #f0f3f5;
  --chip-cash-sweep-fg: #3d4f5c;
  --chip-cash-reserve-bg: #fffbeb;
  --chip-cash-reserve-fg: #854d0e;
  --chip-cash-reserve-border: #fde68a;
}

/* ── Vacancy status chips ── */
:root {
  --chip-vr-occupied-bg: #e8f3e5;
  --chip-vr-occupied-fg: #2b6b24;
  --chip-vr-vacant-bg: #fdf3e4;
  --chip-vr-vacant-fg: #9c7c3c;
  --chip-vr-offline-bg: #f0ede8;
  --chip-vr-offline-fg: #7a7368;
  --chip-vr-renovation-bg: #eee8f5;
  --chip-vr-renovation-fg: #5c4b7a;
}

/* ── Surface neutrals (tables, cards, hover) ── */
:root {
  --chip-neutral-bg: #f0f0ee;
  --hover-bg: #fafaf8;
}

/* ── Import Inbox surface tokens ── */
:root {
  --import-zone-hover-bg: #f4f7f4;
  --import-m3-bg: #e8f0fe;
  --import-m3-fg: #1a56a8;
  --import-detected-bg: #edf2ff;
}

/* ── Calendar / document category chips ── */
:root {
  --chip-forest-tint-bg: #e8f4f0;
  --chip-draft-bg: #fff8e8;
  --chip-package-bg: #f0e8f8;
  --chip-package-fg: #6b2fa0;
  --chip-insurance-bg: #e8f0f8;
  --chip-insurance-fg: #2a5fa0;
  --chip-debt-bg: #f8e8e8;
}

/* ── UI neutral palette (cool-grey for light-mode tables/cards) ─────── */
:root {
  --rule-ui: #e5e5e5;
  --rule-faint: #f0f0f0;
  --surface-hover: #fafafa;
  --surface-warm-faint: #f7f7f4;
  --neutral-light: #eee;
  --neutral-mid: #ccc;
  --neutral-dark: #bbb;
}

/* ── Extended chip + semantic UI palette ─────────────────────────────── */
:root {
  --chip-red-soft-bg: #fff5f5;
  --chip-tie-green-border: #b2dfc3;
  --chip-tie-red-fg: #b71c1c;
  --chip-red-border: #f5b8b8;
  --chip-partial-fg: #d48806;
  --code-fg: #c41d7f;
  --chip-derived-bg: #fff3e0;
  --chip-derived-fg: #bf5200;
  --chip-caution-bg: #fff3cd;
  --chip-implausible-border: #fca5a5;
  --chip-orange-fg: #ad4e00;
  --chip-orange-border: #ffd591;
  --chip-orange-bg: #fff7e6;
  --chip-fail-fg: #cf1322;
  --chip-fail-border: #ffccc7;
  --chip-fail-bg: #fff2f0;
  --chip-warn-fg: #b45309;
  --chip-warn-bg: #fff7ed;
  --chip-warn-border: #f59e0b;
  --chip-amber-border: #ffca28;
  --chip-red-plausibility-border: #ef9a9a;
}

/* ── Mobile-first breakpoint tokens (G8 Mobile Responsive 2026-05-16) ── */
:root {
  --bp-tablet: 640px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;

  --touch-target-min: 44px;
  --touch-target-comfortable: 56px;

  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-top: env(safe-area-inset-top);
}

/* ── Sidebar-specific tokens (sidebar_redesign spec 2026-05-12) ──── */
:root {
  --sidebar-bg: #1E3917;
  --sidebar-text: #F4ECD8;
  --sidebar-accent: #B8945A;
  --sidebar-active-bg: rgba(184, 148, 90, 0.14);
  --sidebar-active-rule: 2px solid #B8945A;
  --sidebar-hair-divider: rgba(184, 148, 90, 0.18);
  --sidebar-text-muted: rgba(244, 236, 216, 0.65);
  --sidebar-text-footer: rgba(244, 236, 216, 0.60);
}

/* ────────────────────────────────────────────────
 * Status chip pattern (Visual System §D.7)
 *
 * Capsule pill, 10-11px text, 1.2px letter-spacing,
 * uppercase, weight 600, padding 2px 8px, radius 10px.
 * ──────────────────────────────────────────────── */

.status {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.status.favorable,
.status.on-plan {
  background: var(--green-bg);
  color: var(--green-ok);
}

.status.unfavorable,
.status.aged-60 {
  background: var(--red-bg);
  color: var(--red-flag);
}

.status.tracking,
.status.aged-30 {
  background: var(--amber-bg);
  color: var(--amber);
}

.status.under-review {
  background: var(--cream-deep);
  color: var(--gold);
}

/* ── Compatibility aliases — map legacy / shorthand token names to the
   canonical Studio vocabulary defined above. Keeps older templates
   rendering correctly while canonical refs migrate over time. ──────── */
:root {
  /* Text aliases */
  --text:          var(--ink);
  --text-muted:    var(--muted);
  --body:          var(--ink);
  --charcoal:      var(--ink);
  --fg:            var(--ink);
  --ink-muted:     var(--muted);
  --ink-soft:      var(--ink-tertiary);
  --bg-subtle:     var(--cream-deep);
  --surface:       var(--cream);
  --parchment:     var(--cream);

  /* Forest shades */
  --forest-light:  var(--forest-soft);
  --forest-muted:  var(--forest-mid);

  /* Amber shades */
  --amber-light:   var(--amber-bg);
  --amber-dark:    var(--amber);

  /* Red shades */
  --red-light:     var(--red-bg);
  --red-flag-light: var(--red-bg);

  /* Green shades */
  --green-ok-light: var(--green-bg);

  /* Accent aliases (HBB surfaces) */
  --accent:        var(--gold);
  --accent-subtle: var(--gold-soft);

  /* Cream shades */
  --cream-light:   var(--cream);

  /* Gray scale (lender package surface) */
  --gray-50:       var(--cream);
  --gray-100:      var(--cream-deep);

  /* Blue */
  --blue-bg:       var(--chip-blue-bg);

  /* Misc */
  --rust:          var(--red-flag);
  --ink-dark:      var(--ink);
  --ink-mid:       var(--muted);
  --ink-faint:     var(--ink-tertiary);

  /* Type */
  --size-mono-small: 10px;

  /* Chip health — watch state (benchmarks surface) */
  --chip-health-watch-bg: var(--amber-bg);
  --chip-health-watch-fg: var(--amber);
}