/* Blackline brand kit. Generated from the Blackline Design System tokens.
 * Load this one file on every Blackline page: <link rel="stylesheet" href="brand.css">
 * Dark (Jet Black) is the default. Add data-theme="concrete" on <html> or any section for the light theme.
 * Default accent: Mandarin. Monstera and Moonbeam mostly for charts, maps and bars; use judgment and keep it restrained. */

@font-face{font-family:'Switzer';src:url('fonts/Switzer-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-VariableItalic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

:root, [data-theme="dark"] {
  --jet-black: #000000;
  --concrete: #dbdad1;
  --monstera: #7fae70;
  --moonbeam: #a594f9;
  --mandarin: #f55d3e;
  --monstera-tint-75: #9fc294;
  --monstera-tint-50: #c0d7b7;
  --monstera-tint-25: #dfeadc;
  --moonbeam-tint-75: #bbaffb;
  --moonbeam-tint-50: #d2c9fc;
  --moonbeam-tint-25: #e9e4fd;
  --mandarin-tint-75: #f7856e;
  --mandarin-tint-50: #faae9e;
  --mandarin-tint-25: #fdd7ce;
  --concrete-tint-75: #e4e3dd;
  --concrete-tint-50: #edede8;
  --concrete-tint-25: #f6f6f3;
  --monstera-shade-75: #5f8255;
  --monstera-shade-50: #405738;
  --monstera-shade-25: #1f2c1d;
  --moonbeam-shade-75: #7c6fbb;
  --moonbeam-shade-50: #524a7d;
  --moonbeam-shade-25: #29253e;
  --concrete-shade-75: #a4a39d;
  --concrete-shade-50: #6e6d69;
  --concrete-shade-25: #373734;
  --surface: var(--jet-black);
  --surface-alt: var(--concrete-shade-25);
  --ink: var(--concrete);
  --ink-muted: var(--concrete-shade-75);
  --line: var(--concrete-shade-25);
  --line-strong: var(--concrete-shade-50);
  --action: var(--mandarin);
  --on-action: var(--jet-black);
  --accent-ink: var(--mandarin);
  --signal: var(--mandarin);
  --focus-ring: var(--mandarin);
  --data-sale: var(--monstera);
  --data-lease: var(--moonbeam);
  --data-listing: var(--mandarin);
  --data-blackline: var(--concrete);
}

[data-theme="concrete"] {
  --surface: var(--concrete);
  --surface-alt: var(--concrete-tint-50);
  --ink: var(--jet-black);
  --ink-muted: var(--concrete-shade-25);
  --line: var(--concrete-shade-75);
  --line-strong: var(--jet-black);
  --action: var(--mandarin);
  --on-action: var(--jet-black);
  --accent-ink: var(--jet-black);
  --signal: var(--mandarin);
  --focus-ring: var(--jet-black);
  --data-sale: var(--monstera);
  --data-lease: var(--moonbeam);
  --data-listing: var(--mandarin);
  --data-blackline: var(--jet-black);
}

:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --radius-none: 0px;
  --grid-columns: 12;
  --grid-gutter: 8px;
  --grid-margin: 48px;
  --rule-1: 1px;
  --rule-4: 4px;
  --rule-8: 8px;
  --rule-16: 16px;
  --rule-32: 32px;
  --font-sans: Switzer, Inter, system-ui, sans-serif;
}

/* Type scale */
.display-128 { font-size: 128px; line-height: 1; font-weight: 400; letter-spacing: -0.064em; }
.display-96 { font-size: 96px; line-height: 1; font-weight: 400; letter-spacing: -0.048em; }
.display-64 { font-size: 64px; line-height: 1; font-weight: 400; letter-spacing: -0.032em; }
.heading-48 { font-size: 48px; line-height: 1.08; font-weight: 400; letter-spacing: -0.024em; }
.heading-40 { font-size: 40px; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; }
.heading-32 { font-size: 32px; line-height: 1.125; font-weight: 400; letter-spacing: -0.016em; }
.heading-24 { font-size: 24px; line-height: 1.25; font-weight: 400; letter-spacing: -0.012em; }
.title-20 { font-size: 20px; line-height: 1.4; font-weight: 400; letter-spacing: -0.01em; }
.body-16 { font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0em; }
.label-12 { font-size: 12px; line-height: 1.33; font-weight: 500; letter-spacing: 0em; }
.micro-8 { font-size: 8px; line-height: 1.5; font-weight: 400; letter-spacing: 0em; }

/* Components: square corners, lines not shadows */
body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.bl-pad { padding: var(--space-3); }
.bl-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Theme-aware logo: Concrete file on dark, black file on Concrete */
.bl-logo-light { display: block; }
.bl-logo-dark { display: none; }
[data-theme="concrete"] .bl-logo-light { display: none; }
[data-theme="concrete"] .bl-logo-dark { display: block; }

/* Button */
.bl-btn { font: inherit; font-size: 12px; line-height: 16px; font-weight: 500; display: inline-flex; align-items: center; gap: var(--space-1); padding: 8px 12px; border-radius: var(--radius-none); border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.bl-btn--primary { background: var(--action); color: var(--on-action); }
.bl-btn--alt { background: transparent; color: var(--ink); border-color: var(--line-strong); } /* retired: same as quiet */
.bl-btn--quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.bl-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Header bar */
.bl-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); font-size: 12px; line-height: 16px; }
.bl-header img { height: 12px; width: auto; }
.bl-header__crumb { color: var(--ink); }
.bl-header__crumb span { color: var(--ink-muted); padding: 0 var(--space-1); }
.bl-header__end { margin-left: auto; color: var(--ink-muted); }

/* Card shell */
.bl-card { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.bl-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border-bottom: 1px solid var(--line); }
.bl-card__head img { height: 20px; width: auto; }
.bl-card__title { font-size: 16px; line-height: 20px; }
.bl-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }

/* Transaction card */
.bl-deal { display: grid; grid-template-columns: 1fr 120px; width: 360px; }
.bl-deal__photo { min-height: 200px; background: var(--surface-alt); display: flex; align-items: flex-end; padding: var(--space-1); }
.bl-deal__meta { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.bl-deal__meta dl { margin: 0; padding: var(--space-2); flex: 1; }
.bl-deal__meta dt { font-size: 12px; line-height: 16px; color: var(--ink-muted); margin-top: var(--space-2); }
.bl-deal__meta dt:first-child { margin-top: 0; }
.bl-deal__meta dd { margin: 0; font-size: 12px; line-height: 16px; }
.bl-deal__meta .bl-btn { justify-content: space-between; }

/* Stat tile: always on Concrete */
.bl-stat { background: var(--concrete); color: var(--jet-black); width: 280px; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.bl-stat__label { font-size: 12px; line-height: 16px; font-weight: 500; }
.bl-stat__figure { font-size: 64px; line-height: 1; letter-spacing: -0.032em; }
.bl-stat__rule { height: var(--rule-8); background: var(--jet-black); }
.bl-stat img { height: 12px; width: auto; margin-top: var(--space-6); align-self: flex-start; }

/* Quote */
.bl-quote { width: 320px; }
.bl-quote blockquote { margin: 0; padding: var(--space-3) var(--space-2); font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; border-bottom: 1px solid var(--line); }
.bl-quote em { font-style: normal; color: var(--accent-ink); }
[data-theme="concrete"] .bl-quote em, [data-theme="concrete"] .bl-accent { text-decoration: underline; text-decoration-color: var(--mandarin); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bl-accent { color: var(--accent-ink); }
.bl-quote figcaption { padding: var(--space-2); font-size: 12px; line-height: 16px; }
.bl-quote figcaption span { display: block; color: var(--ink-muted); }

/* Rules */
.bl-rule { background: var(--ink); width: 100%; }
.bl-rule--1 { height: var(--rule-1); } .bl-rule--4 { height: var(--rule-4); } .bl-rule--8 { height: var(--rule-8); } .bl-rule--16 { height: var(--rule-16); } .bl-rule--32 { height: var(--rule-32); }

/* Contact block */
.bl-contact { font-size: 16px; line-height: 24px; border-top: 1px solid var(--line); padding-top: var(--space-2); }
.bl-contact strong { font-weight: 500; display: block; }
.bl-contact span { display: block; color: var(--ink-muted); }
.bl-contact a { color: var(--ink); text-decoration: none; display: block; }

/* Data key */
.bl-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: 12px; line-height: 16px; }
.bl-key li { display: flex; align-items: center; gap: var(--space-1); list-style: none; }
.bl-key ul, ul.bl-key { margin: 0; padding: 0; }
.bl-swatch { width: 12px; height: 12px; display: inline-block; }
[data-theme="concrete"] .bl-swatch { outline: 1px solid var(--jet-black); }
.bl-swatch--sale { background: var(--data-sale); } .bl-swatch--lease { background: var(--data-lease); }
.bl-swatch--listing { background: var(--data-listing); } .bl-swatch--blackline { background: var(--data-blackline); }


/* Footer */
.bl-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-3); border-top: 1px solid var(--line); }
.bl-footer img { height: 48px; width: auto; }
@media (min-width: 768px) { .bl-header, .bl-footer { padding-left: var(--grid-margin); padding-right: var(--grid-margin); } }
.bl-header a { color: inherit; text-decoration: none; }
.bl-footer .bl-contact { border-top: 0; padding-top: 0; }