/* ============================================================================
   THEME LAYER  —  the ONLY file you edit to rebrand the CRM.
   ----------------------------------------------------------------------------
   Change a colour, a font, the logo, corner rounding or spacing here and the
   whole application updates. No colours, fonts or logo paths are hard-coded
   anywhere else (not in styles.css, not in the HTML, not in the JS).

   When this later becomes Python/Jinja templates, this file stays exactly as
   is — the templates reference the same variables, so branding never leaks
   into application logic.
   ============================================================================ */

:root {

  /* --- Brand -------------------------------------------------------------
     The primary identity colour. Swap these five to re-skin instantly. */
  --brand:            #1f5c46;   /* primary brand (buttons, headers, active nav) */
  --brand-dark:       #143f30;   /* hover / pressed states */
  --brand-light:      #e7f0ec;   /* tints, selected rows, soft fills */
  --brand-contrast:   #ffffff;   /* text/icons that sit on top of --brand */
  --brand-ring:       rgba(31, 92, 70, .28); /* focus ring */

  /* --- Accent ------------------------------------------------------------
     Secondary highlight — links, small emphases, one status colour. */
  --accent:           #b07d24;
  --accent-light:     #f6edda;

  /* --- Surfaces & neutrals ---------------------------------------------- */
  --bg:               #f4f6f5;   /* page background */
  --surface:          #ffffff;   /* cards, panels, inputs */
  --surface-2:        #f9fbfa;   /* zebra rows, sub-panels */
  --border:           #dde2df;   /* hairline borders */
  --border-strong:    #c4ccc7;   /* input borders, dividers on hover */

  /* --- Text ------------------------------------------------------------- */
  --text:             #1b211e;   /* primary copy */
  --text-secondary:   #52605a;   /* labels, secondary copy */
  --text-muted:       #838f89;   /* hints, placeholders, meta */

  /* --- Feedback --------------------------------------------------------- */
  --danger:           #c0392b;
  --danger-light:     #fbeae8;
  --success:          #2e7d54;
  --success-light:    #e6f4ec;
  --warning:          #b07d24;
  --warning-light:    #f6edda;

  /* --- Deal pipeline status colours ------------------------------------- */
  --status-lead:        #6b7a86;
  --status-application: #3d7ea6;
  --status-submitted:   #b07d24;
  --status-approved:    #2e7d54;
  --status-funded:      #1f5c46;
  --status-declined:    #b0433a;

  /* --- Typography ------------------------------------------------------- */
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14.5px;
  --fs-md:   16px;
  --fs-lg:   19px;
  --fs-xl:   24px;
  --fs-2xl:  30px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   600;

  --lh-tight: 1.25;
  --lh-base:  1.55;

  /* --- Logo -------------------------------------------------------------
     Point --logo-url at your own SVG/PNG (drop it in /assets), or set
     --logo-height. The text monogram beside it uses --brand automatically. */
  --logo-url:    url('/logo.svg');
  --logo-height: 30px;
  --brand-name:  'Mortgage CRM';   /* shown next to the logo (set in HTML too) */

  /* --- Shape ------------------------------------------------------------ */
  --radius-sm: 5px;
  --radius:    9px;
  --radius-lg: 14px;
  --radius-pill: 999px;

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

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20,40,32,.05), 0 1px 3px rgba(20,40,32,.07);
  --shadow-md: 0 4px 14px rgba(20,40,32,.10);
  --shadow-lg: 0 12px 32px rgba(20,40,32,.14);

  /* --- Layout ----------------------------------------------------------- */
  --maxw:      1240px;
  --nav-width: 236px;
  --bar-height: 60px;
}