/*
  Condo Atlas token override and shared chrome.

  The Broadsheet stylesheet in _ds/ is the source of truth for the system; this file carries only
  the project palette override reproduced verbatim from the prototype's <style> block, plus the
  page furniture every screen repeats. Link it AFTER the Broadsheet stylesheet.

  Do not add colours, fonts or spacing values that are not tokens.
*/

:root {
  --color-bg: #F4EFE4;
  --color-surface: #EAE2D2;
  --color-text: #183D35;
  --color-accent: #1F5647;
  --color-accent-2: #BC6D3C;
  --color-divider: color-mix(in srgb, #183D35 16%, transparent);

  --color-neutral-100: #FAF6EE;
  --color-neutral-200: #EFE8DA;
  --color-neutral-300: #DED4C0;
  --color-neutral-400: #C3B79F;
  --color-neutral-500: #A2977F;
  --color-neutral-600: #837A65;
  --color-neutral-700: #66604F;
  --color-neutral-800: #474337;
  --color-neutral-900: #2B2823;

  --color-accent-100: #E4F0EB;
  --color-accent-200: #C7E1D8;
  --color-accent-300: #9CC9BB;
  --color-accent-400: #6FAD9B;
  --color-accent-500: #4B8272;
  --color-accent-600: #2F6B5B;
  --color-accent-700: #1F5647;
  --color-accent-800: #163E34;
  --color-accent-900: #102B25;

  --color-accent-2-100: #FAEDE2;
  --color-accent-2-200: #F2D8C2;
  --color-accent-2-300: #E5B592;
  --color-accent-2-400: #D59263;
  --color-accent-2-500: #C77843;
  --color-accent-2-600: #BC6D3C;
  --color-accent-2-700: #984F26;
  --color-accent-2-800: #70391B;
  --color-accent-2-900: #4A2713;

  --color-process-yellow: #E0A93B;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-600); }

/* Accent text inside a paragraph takes the 700 step for contrast, never the base accent. */
p a,
.card-body a,
.prose a { color: var(--color-accent-700); }

/* Front-page furniture: the one place rules are allowed to structure a page. */
.page-header { position: sticky; top: 0; z-index: 40; background: var(--color-bg); }
.page-header .rule-thick { height: 3px; background: var(--color-text); }
.page-header .rule-hair { height: 1px; background: var(--color-divider); margin: 0 40px; }
.page-header .rule-rail { height: 2px; background: var(--color-text); margin: 0 40px; }

/* Uppercase at wide tracking reads smaller than its size suggests, so the rail carries 13px and
   75% ink. At the prototype's 10.5px and 55% it fell under the 4.5:1 contrast floor. */
.dateline {
  display: flex;
  justify-content: space-between;
  padding: 7px 40px 9px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* Interaction states are themed, never left to the browser. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

::selection {
  background: var(--color-accent-200);
  color: var(--color-accent-900);
}

[disabled],
.is-disabled { opacity: .45; }

/* Minimum touch target, per the accessibility requirement. */
.btn,
button,
[role="button"] { min-height: 44px; }