/* Operations frame theme: matches the white-labelled CRM (Howell Studios Vault,
 * portal.leadsuite.ai) so a Custom Page does not look out of place.
 *
 * Sources (2026-09-28):
 *   - 454 CSS variables read from portal.leadsuite.ai (GHL "HighRise", built on
 *     the Untitled UI scales). The scales below are copied verbatim.
 *   - Pixel samples from Joseph's screenshot of the Zünd America dashboard
 *     (Drive 1CU8fF7_pGEQSBLX-gnMAWauBBaSLkBsH, 1917x897, browser zoom looks
 *     like 125%, so screenshot px / 1.25 = CSS px; geometry is approximate).
 *
 * Our page fills only GHL's content area: GHL's own dark sidebar (#2d3748,
 * active #1a202c) and white top bar stay around it. Do not redraw them.
 * The sidebar values are kept only so a standalone preview can fake the chrome.
 */
:root {
  /* type: the in-app UI is Inter; the legacy login page is Roboto (ignore) */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-sm: 14px;          /* body, inputs, table cells */
  --text-xs: 12px;          /* captions, "(Status change)" */
  --text-md: 16px;          /* widget / card titles, weight 500-600 */

  /* greys (Untitled UI "gray") */
  --gray-25: #fcfcfd; --gray-50: #f9fafb; --gray-100: #f2f4f7; --gray-200: #eaecf0;
  --gray-300: #d0d5dd; --gray-400: #98a2b3; --gray-500: #667085; --gray-600: #475467;
  --gray-700: #344054; --gray-800: #1d2939; --gray-900: #101828;

  /* primary (HighRise primary / blue-dark) */
  --primary-25: #f5f8ff; --primary-50: #eff4ff; --primary-100: #d1e0ff; --primary-200: #b2ccff;
  --primary-300: #84adff; --primary-400: #528bff; --primary-500: #2970ff; --primary-600: #155eef;
  --primary-700: #004eeb; --primary-800: #0040c1; --primary-900: #00359e;

  /* status */
  --success-50: #ecfdf3; --success-600: #039855; --success-700: #027a48;
  --warning-50: #fffaeb; --warning-500: #f79009; --warning-700: #b54708;
  --error-50: #fef3f2;   --error-600: #d92d20;   --error-700: #b42318;
  --indigo-100: #e0eaff; --indigo-600: #444ce7;   /* empty-state icon disc + glyph */
  --blue-400: #53b1fd;                            /* chart accent (gauge dot) */

  /* semantic roles, measured on the dashboard */
  --page-bg: var(--gray-100);        /* #f2f4f7 behind the content card */
  --surface: #ffffff;                /* header bar, content card, widgets */
  --border: var(--gray-300);         /* widget + dropdown + button outlines */
  --divider: var(--gray-200);        /* widget header rule, table rows */
  --text-strong: var(--gray-900);    /* titles, values, dropdown text */
  --text: var(--gray-700);
  --text-muted: var(--gray-500);     /* "Won revenue", captions */
  --text-button-secondary: var(--gray-600);
  --link: var(--primary-600);        /* "+ New", "+ Quick filters" */
  --btn-primary-bg: var(--primary-600);
  --btn-primary-text: #ffffff;

  /* shape (approximate, from the 125% screenshot) */
  --radius-sm: 4px;                  /* dropdowns, buttons */
  --radius-md: 8px;                  /* widgets */
  --radius-lg: 12px;                 /* the big content card */
  --control-h: 32px;                 /* dropdowns and secondary buttons */
  --btn-h: 40px;                     /* header buttons ("Edit dashboard") */
  --gap: 16px;                       /* between widgets */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);

  /* CRM chrome (reference only; GHL draws it) */
  --chrome-sidebar: #2d3748; --chrome-sidebar-active: #1a202c;
  --chrome-sidebar-text: #c0c3c8; --chrome-sidebar-control: #4b5563;
}

body { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text); background: var(--page-bg); }