/* Bott & Co — compensation forms design tokens
   Values sampled from the Figma "Bott & Co Compensation Forms" exports. */
:root {
  /* Brand */
  --bc-navy: #19255b;        /* headings, body text, info banners */
  --bc-green: #1c7a55;       /* success: ticks, eligible pills */
  --bc-teal: #007ba2;        /* primary action, links, selected state */
  --bc-teal-600: #006a8c;    /* primary hover */
  --bc-teal-050: #f2f8fa;    /* rating bar, disabled primary fill */
  --bc-teal-200: #c1dfe8;    /* disabled primary text */
  --bc-coral: #ec6550;       /* original brand orange, retained by user preference */
  --bc-coral-600: #d9533e;   /* commit hover */
  --bc-coral-050: #fdefed;   /* status pills, disabled commit fill */
  --bc-coral-200: #f6c1b8;   /* disabled commit text */

  /* Neutrals (blue-biased to sit with the navy) */
  --bc-white: #ffffff;
  --bc-ink: #0b0f1f;         /* typed input values */
  --bc-panel: #f1f4f8;       /* question card fill, desktop aside */
  --bc-line: #aabace;        /* input and option borders */
  --bc-line-soft: #d1d9e4;   /* dividers inside summary cards */
  --bc-muted: #5d7090;       /* readable placeholders, table headers and icons on white/panel fills */
  --bc-muted-ink: #5d7090;   /* secondary text that must pass AA */

  /* Semantic */
  --bc-error: #d43420;
  --bc-warn: #b86200;        /* soft warnings (email check) */
  --bc-warn-050: #fff4e5;
  --bc-warn-ink: #6b3a00;
  --bc-brand-taupe: #7b676b; /* logo wordmark */
  --bc-focus: #007ba2;

  /* Type */
  --bc-font: "proxima-nova", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --bc-fs-xs: 0.8125rem;   /* 13 – labels, helper, legal */
  --bc-fs-sm: 0.875rem;    /* 14 */
  --bc-fs-md: 1rem;        /* 16 – inputs, options */
  --bc-fs-lg: 1.125rem;    /* 18 – card questions */
  --bc-fs-xl: 1.375rem;    /* 22 – aside headline (desktop) */
  --bc-fs-2xl: 2.125rem;   /* 34 – hero */
  --bc-fw-regular: 400;
  --bc-fw-medium: 500;
  --bc-fw-semibold: 600;
  --bc-fw-bold: 700;

  /* Space (4px grid) */
  --bc-s1: 4px;  --bc-s2: 8px;  --bc-s3: 12px; --bc-s4: 16px;
  --bc-s5: 20px; --bc-s6: 24px; --bc-s8: 32px; --bc-s10: 40px; --bc-s12: 48px;

  /* Shape */
  --bc-radius-sm: 4px;       /* inputs, options */
  --bc-radius: 6px;          /* cards, buttons */
  --bc-control-h: 48px;
  --bc-button-h: 52px;

  /* Layout */
  --bc-card-max: 686px;      /* desktop question card */
  --bc-field-max: 480px;     /* desktop input width */
  --bc-aside-w: 400px;       /* desktop brand panel */
  --bc-wrap: 1240px;         /* desktop page container (content + aside), centred on wide screens */
}