/* TDM Online — design tokens
   Flat dark UI. Greyscale only; colour is reserved for roofing-type tags and status tags. */

:root {
  /* surfaces */
  --bg:            #191919;   /* page */
  --surface:       #2b2b2b;   /* cards, panels, dialogs, toolbars */
  --stage:         #000000;   /* behind the 3D model and the map */
  --field:         #141414;   /* text inputs */
  --border:        #3a3a3a;   /* default 1px border; also secondary button fill */
  --border-strong: #4a4a4a;   /* secondary button border, strong dividers */
  --overlay:       rgba(43, 43, 43, 0.72);   /* floating toolbars + backdrop blur */
  --overlay-line:  rgba(255, 255, 255, 0.08);

  /* text + icons */
  --fg:            #f3f3f3;   /* body text */
  --fg-strong:     #fefefe;   /* titles, primary button fill */
  --icon:          #c0c6c9;   /* icons, callouts, photo markers */
  --muted:         #b6b7b7;   /* secondary text */
  --subtle:        #887f7a;   /* placeholders, fine print */
  --faint:         #696969;   /* dividers "/", disabled, grey button fill */
  --on-primary:    #191919;   /* text on a primary button */

  /* annotation defaults (user-editable in the app) */
  --measure:       #f3f3f3;
  --callout:       #c0c6c9;
  --callout-tint:  rgba(192, 198, 201, 0.12);
  --marker:        #c0c6c9;   /* photo-position dot */
  --marker-ring:   rgba(192, 198, 201, 0.25);

  /* roofing-type tags (from the Figma Tag component) */
  --tag-bg:        #454545; --tag-border: #323232; --tag-fg: #fefefe;
  --tag-metal-bg:  #510b24; --tag-metal-border: #c01048; --tag-metal-fg: #fda29b;
  --tag-shingles-bg: #293056; --tag-shingles-border: #004eeb; --tag-shingles-fg: #b2ccff;
  --tag-spf-bg:    #440906; --tag-spf-border: #9d1b0f; --tag-spf-fg: #f5b07c;

  /* status tags (icon + label on a tint, no border) */
  --st-pending-fg:   #ea9444; --st-pending-bg:   #2e241b;
  --st-progress-fg:  #3fa2f5; --st-progress-bg:  #142433;
  --st-submitted-fg: #9b6fff; --st-submitted-bg: #211c32;
  --st-review-fg:    #d6c93f; --st-review-bg:    #2a2718;
  --st-success-fg:   #3ecf6c; --st-success-bg:   #1a2a1f;
  --st-failed-fg:    #f0675c; --st-failed-bg:    #302020;
  --st-expired-fg:   #8c8c8c; --st-expired-bg:   #222222;

  /* type */
  --font:      Geist, -apple-system, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --text-title: 600 20px/28px var(--font);   /* page titles, letter-spacing -0.4px */
  --text-h2:    600 15px/20px var(--font);   /* dialog titles */
  --text-h3:    600 13px/18px var(--font);   /* card headings */
  --text-body:  400 13px/18px var(--font);
  --text-label: 500 13px/18px var(--font);
  --text-small: 400 12px/16px var(--font);
  --text-fine:  400 11px/14px var(--font);
  --text-tag:   500 11px/12px var(--font);
  --text-mono:  500 12px/16px var(--font-mono);   /* values, file names, coordinates, callouts */
  --text-dim:   500 10px/12px var(--font-mono);   /* dimension labels (S 9 / M 10 / L 11) */

  /* radius — 4px max */
  --radius:    4px;   /* controls, cards, dialogs, toolbars, thumbnails */
  --radius-sm: 2px;   /* tags, nested segmented items, switch knobs */

  /* sizing */
  --control:        32px;   /* buttons, inputs, toolbar items */
  --control-sm:     28px;   /* inspector fields, row actions */
  --control-xs:     24px;   /* inline row actions */
  --control-touch:  44px;   /* phone tap targets */
  --tag-h:          20px;
  --header-h:       48px;
  --footer-h:       32px;
  --sidebar-w:      360px;

  /* spacing (8pt grid) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;  --space-10: 40px;
  --page-x: 24px;  /* page margins */
  --panel-x: 16px; /* panel padding */
  --card-x: 12px;  /* card padding */

  /* elevation (floating elements only) */
  --shadow-float:  0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.5);
  --blur: blur(20px) saturate(180%);
}

html { background: var(--bg); color: var(--fg); font: var(--text-body); -webkit-font-smoothing: antialiased; }
body { margin: 0; }