/* tokens.css - every color, font, size and spacing decision for Backbone Jobs
   lives here. Restyling the whole app = editing this file. Nothing else may
   hard-code a color.

   Two palettes:
   1. :root  - the WORKSPACE that JD uses every day: a clean light UI with
      Backbone's black-and-chrome accents (buttons, the wordmark, the rail).
   2. .brand-dark - the CUSTOMER-FACING pieces (estimate page, PDF, emails):
      the website's look, copied from J:\Backbone Construction\styles\tokens.css.
      Black iron, steel plate, chrome. Chrome is the only accent. */

:root {
  /* ---- workspace colors ---- */
  --bg:        #F4F5F7;   /* page background: cool paper */
  --surface:   #FFFFFF;   /* cards, tables, forms */
  --surface-2: #F8F9FA;   /* table headers, hover rows, subtle wells */
  --ink:       #111214;   /* body text */
  --ink-2:     #3C4046;   /* secondary text */
  --muted:     #6B7078;   /* captions, labels (AA on surface) */
  --line:      #E3E5E8;   /* hairline borders */
  --line-strong: #C9CCD1; /* field borders, outlined buttons */

  /* the Backbone accent: iron + chrome, straight from the logo */
  --iron:      #0A0A0A;   /* primary buttons, active nav, the rail */
  --iron-2:    #1F2124;   /* primary hover */
  --on-iron:   #FFFFFF;
  --chrome-hi:  #FFFFFF;
  --chrome-mid: #B9BDC3;
  --chrome-lo:  #6E7278;
  --chrome: linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome-mid) 55%, var(--chrome-lo) 100%);
  --chrome-solid: #C4C8CD;
  --accent-wash: #EEF0F3;  /* selected rows, focus wells */
  --focus: #2E6BE6;        /* focus ring only */

  /* meaning colors (status chips, budget bars, banners) */
  --good:      #1D8A4E;  --good-wash: #E6F5EC;
  --warn:      #B7791F;  --warn-wash: #FBF3E3;
  --bad:       #C93B3B;  --bad-wash:  #FCE9E9;
  --info:      #2E6BE6;  --info-wash: #E8EFFD;
  --support:   #7A3FB3;  --support-wash: #F1E9FA;   /* the "viewing as JD" banner */

  /* cost buckets (charts and chips - each one distinct, all muted) */
  --bucket-labor:     #3B6FD6;
  --bucket-materials: #C48A1E;
  --bucket-subs:      #7A3FB3;
  --bucket-equipment: #2A9D8F;
  --bucket-trips:     #D9663D;
  --bucket-other:     #8A8F98;
  --bucket-budget:    #D5D8DD;   /* the budget bar behind the actual bar */

  /* ---- type ---- */
  --font-display: "Cinzel", "Times New Roman", Georgia, serif;             /* the wordmark only */
  --font-condensed: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; /* eyebrows, buttons, tabs */
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;          /* numbers in tables */
  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.2rem;
  --t-xl: 1.6rem;
  --t-2xl: 2.1rem;
  --leading: 1.5;

  /* ---- spacing ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 24px;  --s6: 32px;  --s7: 48px;

  /* ---- shapes ---- */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(17, 18, 20, 0.06), 0 1px 3px rgba(17, 18, 20, 0.04);
  --shadow-lg: 0 12px 32px rgba(17, 18, 20, 0.18);

  /* ---- layout ---- */
  --rail-w: 224px;        /* the left navigation rail */
  --topbar-h: 56px;
  --content-max: 1280px;
  --sheet-max: 900px;     /* estimate builder / forms */
  --gutter: 16px;         /* never less, even on phones */
  --z-modal: 100;
  --z-toast: 110;
}

/* The customer-facing look: the website's tokens, verbatim in spirit. */
.brand-dark {
  --iron:      #0A0A0A;
  --plate:     #141414;
  --plate-2:   #1A1A1A;
  --ink:       #F2F2F2;
  --muted:     #A9ADB3;
  --line:      rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.22);
  --chrome-hi:  #FFFFFF;
  --chrome-mid: #B9BDC3;
  --chrome-lo:  #6E7278;
  --chrome: linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome-mid) 55%, var(--chrome-lo) 100%);
  --chrome-solid: #C4C8CD;
  --on-chrome: #0A0A0A;
  --good: #7FDCA4;
  --bad:  #FF7B70;
  --radius: 6px;
  --radius-small: 3px;
  --size-body: 1.0625rem;
  --measure: 62ch;
}