/* Design tokens. Colors follow the website palette in DESIGN.md (built from BRAND.md); the estimator names below are aliases. */
/* Manrope is self-hosted (brand rule: never Google Fonts). Files and the OFL licence are in /fonts/ (shared with the website). */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("/fonts/manrope-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("/fonts/manrope-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("/fonts/manrope-latin-600.woff2") format("woff2"); }
:root {
  /* Website palette (DESIGN.md colors). brand is for rules, dots and large text only; brand-dark for buttons and links. */
  --charcoal: #231F20; --charcoal-raised: #2E2A2B; --white: #FFFFFF;
  --brand: #008DC1; --brand-dark: #006B94; --ink-soft: #59565A; --line: #D6D4D5; --wash: #F8F7F7; --tint: #EAF2FE; --danger: #B42318;
  /* Estimator names, mapped to the website palette. */
  --blue: var(--brand); --blue-text: var(--brand-dark); --blue-tint: var(--tint);
  --text-2: var(--ink-soft); --text-2-dark: var(--line); --border: var(--line); --surface-2: var(--wash);
  --charcoal-2: var(--charcoal-raised); --charcoal-line: rgb(255 255 255 / 0.1);
  /* Accent tiles: the website uses one tint for icon tiles, so every accent maps to it. */
  --plum-tint: var(--tint); --yellow-tint: var(--tint); --teal-tint: var(--tint); --green-tint: var(--tint);
  /* Microsoft product colors: only beside the product name. */
  --power-apps: #742774; --power-automate: #2764E7; --power-bi: #F6D751;
  --sharepoint: #036C70; --dataverse: #136C6C;
  --font: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Interface states (FEEDBACK.md 3c), DESIGN.md palette only. Always paired with words, never color alone. */
  --info-bg: var(--tint); --info-line: var(--brand-dark);
  --warn-bg: var(--wash); --warn-line: var(--charcoal);
  --error-bg: var(--wash); --error-line: var(--danger);
  --ok-bg: var(--tint); --ok-line: var(--brand-dark);
  /* The website header is sticky and 64px tall (h-16, scroll-padding-top 4rem); estimator sticky parts sit below it. */
  --header-h: 64px;
  --r-control: 6px; --r-card: 12px; --r-tile: 16px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px;
  --shadow-1: 0 1px 2px rgba(35, 31, 32, 0.06), 0 1px 1px rgba(35, 31, 32, 0.04);
  --shadow-2: 0 1px 2px rgba(35, 31, 32, 0.04), 0 12px 32px rgba(35, 31, 32, 0.08);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --t-fast: 140ms; --t-med: 280ms;
}