/* GENERATED by scripts/design-system-import.py -- DO NOT EDIT.
   Source: docs/design-system/tokens/ (colors.css, typography.css, layout.css, email.css), export sha256 7448edcff1a9.
   Change a value in Claude Design, export, and re-import; a
   hand edit here fails `design-system-import.py --check`.
   Custom properties only: linking this file restyles nothing
   until a page uses var(--...). */

/* ==== from docs/design-system/tokens/colors.css ==== */

/* LeanBrokers color system.
   NOTE: the system is migrating completely to Bootstrap 5. Values commented
   "legacy" below belong to the Bootstrap 3 tier and exist to recreate or
   patch the screens that still render that way — do not use them in new UI.
   Every value below is lifted verbatim from the CRM codebase
   (css/dash2.css, css/custom-styles.css, css/crm.css, list.php,
   support/css/support.css, css/bootstrap.css). Base scale first,
   semantic aliases second. */

:root{
  /* --- Navy: the brand's structural color (nav, sidebar labels, ink) ---
     Primary navy is #09192A. The old #283c50 sat mid-ramp, so 800/700 were
     its darker steps; against the deeper primary they are LIGHTER, which is
     why press/hover now comes from --navy-950 below, not --navy-800. */
  --navy-950:#040d16;   /* primary press/hover, one step under the brand navy */
  --navy-900:#09192a;   /* #wrapper background — same value as the primary */
  --navy-800:#1b2b3a;   /* .btn-toolbar-mobile.active:hover */
  --navy-700:#225081;   /* legacy .active-menu / top-navbar hover */
  --navy-600:#09192A;   /* PRIMARY brand navy: navbar, buttons, body ink */
  --navy-400:#3d5468;   /* ghost button border on navy bars */
  --navy-100:#dbe4ee;   /* navbar link text on navy */

  /* --- Accent blue: actions, links, help --- */
  --blue-800:#11518f;   /* link hover */
  --blue-700:#1668b8;   /* LINK INK: dodger blue darkened to 5.7:1 on white */
  --blue-600:#1976d1;   /* accent hover; 4.6:1 with white text */
  --blue-500:#1e90ff;   /* PRIMARY accent (Logo 2.0 dodger blue): fills, icons, counters. 3.2:1 on white: not for small text */
  --blue-400:#4cb1cf;   /* legacy link/info blue (a, a:hover, .applinks) */
  --blue-300:#77c0fd;   /* legacy top-navbar link */
  --blue-200:#aad5ff;   /* accent outline-button border */
  --blue-050:#edf6ff;   /* open accordion tint */

  /* --- Green: agency surfaces, export, positive money --- */
  --green-700:#12220a;  /* text on solid green */
  --green-600:#5f9a16;  /* green hover — a visible step from 500; #12220a text still 4.9:1 */
  --green-500:#76bc1c;  /* PRIMARY green: agency banner, save, export */
  --green-400:#5cb85c;  /* bootstrap success / today's event badge.
                           FILL ONLY — never takes white text: reversed out it
                           measures 2.48:1. For white-on-green use
                           --status-active-fg (#3c763d, 6.4:1). */
  --green-300:#19a21e;  /* #snackbar success */
  --green-200:#c7e6a0;  /* green outline-button border */

  /* --- Purple: merge / agency-dashboard marker --- */
  --purple-600:#5a32a3;
  --purple-500:#6f42c1;
  --purple-400:#663399;  /* rebeccapurple, dashboard nav icon */
  --purple-300:#9b72c9;  /* Partners tile fill — light enough for navy ink */
  --purple-200:#d5c2ea;

  /* --- Red: destructive + disenrollment --- */
  --red-700:#962d21;
  --red-600:#c0392b;    /* PRIMARY danger */
  --red-500:#f0433d;    /* legacy .bg-color-red / .back-footer-red */
  --red-300:#ff8a94;    /* danger icon on navy bar */
  --red-200:#e3b0b0;
  --red-100:#5a2f38;    /* danger border on navy bar */

  /* --- Amber: pending, follow-up warnings, external links --- */
  --amber-700:#b35f00;  /* KB "opens the live CRM" link */
  --amber-500:#f0ad4e;  /* .bg-color-brown / .back-footer-brown */
  --amber-100:#fcf8e3;  /* bootstrap panel-warning heading */
  --amber-200:#faebcc;

  /* --- Neutrals --- */
  --white:#ffffff;
  --gray-025:#faf9f7;   /* views-modal footer */
  --gray-050:#f2f5f8;   /* icon-button hover */
  --gray-075:#f2f2f2;   /* zebra row */
  --gray-100:#eef1f4;   /* grid toolbar row 2 */
  --gray-125:#eef2f7;   /* inline <code> in KB articles */
  --gray-150:#e5ebf2;   /* #page-wrapper page background */
  --gray-200:#e7e4de;   /* warm hairline (modal borders) */
  --gray-250:#dddddd;   /* sidebar / table hairline */
  --gray-300:#d7dee6;   /* PRIMARY border */
  --gray-350:#c9d2da;   /* secondary button border */
  --gray-400:#a0b3b0;   /* legacy input border */
  --gray-500:#7a8794;   /* PRIMARY muted text */
  --gray-550:#5b6b7c;   /* KB muted text */
  --gray-600:#666666;   /* drawer menu item text */
  --gray-650:#647373;   /* note/textarea text */
  --gray-700:#555555;
  --gray-800:#222222;   /* drawer nav base text */

  /* ---------------- Semantic aliases ---------------- */
  --text-heading:var(--navy-600);
  --text-body:var(--navy-600);
  --text-muted:var(--gray-500);
  --text-muted-alt:var(--gray-550);
  --text-on-navy:var(--navy-100);
  --text-on-green:var(--green-700);
  --text-inverse:var(--white);

  /* The link aliases and the --action-link pair are the same ink; both resolve
     to --blue-700. --blue-500 stays the accent for fills, glyphs and charts. */
  --link:var(--action-link);
  --link-hover:var(--action-link-hover);
  --link-legacy:var(--blue-400);
  --link-external:var(--amber-700);

  --surface-page:var(--gray-150);
  --surface-card:var(--white);
  --surface-sunken:var(--gray-100);
  --surface-hover:var(--gray-050);
  --surface-selected:var(--blue-050);  /* selected grid row */
  --surface-zebra:var(--gray-075);
  --surface-chrome:var(--navy-600);
  --surface-chrome-deep:var(--navy-900);
  --surface-agency:var(--green-500);

  --border-default:var(--gray-300);
  --border-hairline:var(--gray-250);
  --border-warm:var(--gray-200);
  --border-strong:var(--navy-600);

  --action-primary:var(--navy-600);
  --action-primary-hover:var(--navy-950);
  --action-accent:var(--blue-500);
  --action-accent-hover:var(--blue-600);
  --action-accent-border:var(--blue-200);
  --action-accent-wash:rgba(30,144,255,.08);
  /* Link TEXT, on light surfaces only. Separate from --action-accent because
     that value came from icon and fill use, where it works, and measures
     2.68:1 on white as text -- lighter than --text-muted, which is itself
     already under the body minimum. This is the same hue darkened until it
     passes: 5.13:1 on white, 4.75:1 on --surface-sunken.

     Do NOT use it on the navy chrome. Darkening for white necessarily makes
     it worse on navy (2.90:1 there); links on navy keep --navy-100, the ink
     the navbar already uses, at 11.9:1. */
  --action-link:var(--blue-700);
  --action-link-hover:var(--blue-800);
  --action-link-on-navy:var(--navy-100);
  --action-positive:var(--green-500);
  --action-positive-hover:var(--green-600);
  --action-positive-border:var(--green-200);
  --action-positive-wash:rgba(118,188,28,.08);
  --action-merge:var(--purple-500);
  --action-merge-hover:var(--purple-600);
  --action-merge-border:var(--purple-200);
  --action-merge-wash:rgba(111,66,193,.08);
  --action-danger:var(--red-600);
  --action-danger-hover:var(--red-700);
  --action-danger-border:var(--red-200);
  --action-danger-wash:rgba(192,57,43,.08);
  --action-ghost-wash:rgba(9,25,42,.06);

  /* Record + policy status (bootstrap-3 contextual panels, as used on the
     lead record page: Active=success, Pending=warning, Canceled/Term'd=danger) */
  --status-active-bg:#dff0d8;
  --status-active-fg:#3c763d;
  --status-active-border:#d6e9c6;
  --status-pending-bg:var(--amber-100);
  --status-pending-fg:#8a6d3b;
  --status-pending-border:var(--amber-200);
  --status-canceled-bg:#f2dede;
  --status-canceled-fg:#a94442;
  --status-canceled-border:#ebccd1;
  --status-info-bg:#d9edf7;
  --status-info-fg:#31708f;
  --status-info-border:#bce8f1;

  /* Dashboard counter tiles. Four at a time, one per primary counter, each
     appearing only as the chip behind that tile's glyph. Follow Ups and
     Appointments moved to the secondary strip, which carries no colour, but
     their tokens stay: the legacy .noti-box recreation in
     ui_kits/agent-crm/ still renders all four.

     EVERY tile fill must be light enough for navy ink at 3:1 or better --
     StatTile draws its chip glyph in --navy-600 and does not vary. Partners
     uses --purple-300 rather than the darker --purple-400 nav-icon purple
     for exactly that reason: on #663399 navy measures 2.11:1 and the glyph
     disappears. */
  --tile-leads:var(--green-400);
  --tile-followups:var(--blue-400);
  --tile-appointments:var(--red-500);
  --tile-enrollments:var(--amber-500);
  --tile-campaigns:var(--blue-500);
  --tile-partners:var(--purple-300);
  /* The three strip-native counters. They need identity colours because the
     settings drawer lets an agent promote any counter to a card, so "it has
     no token" is not a state the product can be in. Tile-only hues, outside
     the six palette families on purpose: nothing else in the system uses
     them, so they cannot be mistaken for a status or an action. All three
     pass navy chip ink (5.8:1, 7.9:1, 6.8:1). */
  --tile-lists:#7f9bb3;
  --tile-rxprofiles:#5fc3b0;
  --tile-certs:#e08bb8;
  /* New Leads shares the Leads green family on purpose -- it is a subset of
     that list, and a colour from elsewhere would imply a separate pipeline.
     Not Interested takes a light red for the same reason it is not green: a
     rising number there is a dead end, not a result. Both clear navy chip
     ink (9.3:1, 7.5:1). */
  --tile-newleads:#8fd18f;
  --tile-notinterested:#d59a9a;
  /* One shared colour for every counter an agent creates from a saved grid
     view. Shared on purpose: the built-in tokens encode what a metric IS,
     and an agent-named view has no fixed meaning to encode -- a per-view hue
     would be decoration, and would eventually collide with a real one. Navy
     chip ink clears at 6.2:1. */
  --tile-savedview:#9fb0c4;

  /* Categorical series colours, for a share-of-total chart where the slices
     are carriers or lead sources rather than statuses. Six is the cap on
     purpose: past six slices a donut is unreadable and the chart should be
     grouping the remainder into "Other" (--series-6, the neutral). One per
     palette family, so adjacent slices differ in hue and not only in
     lightness; every label sits OUTSIDE the slice in a legend, so these
     carry no text-contrast requirement of their own. */
  --series-1:var(--navy-400);
  --series-2:var(--blue-500);
  --series-3:var(--green-500);
  --series-4:var(--amber-500);
  --series-5:var(--purple-300);
  --series-6:#7f9bb3;

  /* Calendar event types (calendar.php, config/calendar.php calendar_types()).
     Staging shipped raw hex per type; these map each type onto a palette
     family so a type colour can never be mistaken for a status. The colour
     only ever paints a 3px bar, a dot and a 14% wash under navy ink, so it
     carries no text-contrast requirement of its own. Appointment takes the
     accent because it is the event an agent most needs to find; Follow-Up
     takes amber, the system's "pending" family; Campaign takes the merge
     purple because campaign rows are read-only and owned elsewhere. */
  --cal-appointment:var(--blue-500);
  --cal-followup:var(--amber-500);
  --cal-email:var(--tile-rxprofiles);
  --cal-mail:var(--navy-400);
  --cal-booth:var(--green-500);
  --cal-seminar:var(--tile-certs);
  --cal-campaign:var(--purple-500);
  --cal-other:var(--gray-500);
}

/* ==== from docs/design-system/tokens/typography.css ==== */

/* LeanBrokers typography.
   ONE family, system-wide: 'Source Sans 3' (--font-sans), chosen 2026-09-14
   over the Bootstrap 5 system stack, IBM Plex Sans, Atkinson Hyperlegible
   and Figtree. See font-options.html for the comparison it came from.

   It replaces three coexisting stacks, which is the point: the codebase set
   body to the BS5 system stack on modern pages, 'Quicksand' on the legacy
   dashboard and login (css/dash2.css), and 'Open Sans' in
   css/custom-styles.css, with css/crm.css and the record page falling back
   to "Trebuchet MS" for tables and headings -- so a field table and the list
   beside it could render in different fonts on the same page.

   Why this one: it is the narrowest of the candidates, so the 13px grid --
   the densest text in the app and its main job -- fits the most columns per
   screen, and its 12px label rendering was the clearest of the set. The
   tradeoff accepted knowingly: it has no slashed zero, so 0/O in a Medicare
   number is still told apart by context rather than by letterform.

   --font-rounded (Quicksand), --font-humanist (Open Sans) and
   --font-legacy-ui (Trebuchet MS) remain ONLY for recreating or patching
   legacy screens, so a patch still matches its neighbours. Never in new work.

   The @import must stay above the @font-face rules: a browser ignores an
   @import that follows another rule. */

:root{
  /* --- Base families --- */
  /* THE system family. Everything new uses it, through --font-ui. */
  --font-sans:'Source Sans 3',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-system:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif;
  --font-rounded:'Quicksand',system-ui,sans-serif;          /* legacy dashboard + login body */
  --font-humanist:'Open Sans',sans-serif;                    /* custom-styles.css body */
  --font-legacy-ui:Trebuchet MS,Arial,Helvetica,sans-serif;/* list + record pages -- OS-installed font, no webfont */
  --font-icon:"Font Awesome 7 Free";

  /* --- Semantic families --- */
  --font-ui:var(--font-sans);         /* everything: UI, body, grids, records */
  --font-body:var(--font-sans);
  --font-display:var(--font-sans);    /* was Quicksand; the display split retired */
  --font-data:var(--font-sans);       /* DEPRECATED alias of --font-ui -- grids and
                                         record tables no longer differ. Kept so
                                         existing call sites keep working. */

  /* --- Size scale (as found in source) --- */
  --fs-10:10px;   /* KB external-link glyph */
  --fs-11:11px;   /* section eyebrow labels, drawer section label */
  --fs-12:12px;   /* record-table field labels */
  --fs-13:13px;   /* toolbar stat label, clear-selection link, breadcrumbs */
  --fs-14:14px;   /* default control + body-small */
  --fs-15:15px;   /* KB article body, notes, list titles */
  --fs-16:16px;   /* paragraph (custom-styles p), drawer menu item */
  --fs-17:17px;   /* snackbar */
  --fs-18:18px;   /* KB results heading, search input */
  --fs-20:20px;   /* login tab labels, .caption */
  --fs-22:22px;   /* legacy input font-size */
  --fs-24:24px;   /* toolbar record count */
  --fs-25:25px;   /* .main-text dashboard figure */
  --fs-28:28px;   /* record page H1 */
  --fs-30:30px;   /* navbar-brand */
  --fs-40:40px;   /* .noti-box icon, .text-temp */

  /* --- Weights --- */
  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* --- Line heights --- */
  --lh-tight:1.25; /* @kind other */
  --lh-snug:1.42857143; /* @kind other */
  --lh-body:1.65; /* @kind other */
  --lh-loose:25px; /* @kind other */

  /* --- Letter spacing --- */
  --ls-eyebrow:.05em; /* @kind other */
  --ls-label:.04em; /* @kind other */
  --ls-nav:.06em; /* @kind other */
  --ls-button:2px; /* @kind other */
  --ls-hero:.1em; /* @kind other */

  /* --- Recurring composed styles --- */
  --type-eyebrow:var(--fw-bold) var(--fs-11)/1.2 var(--font-ui); /* @kind font */
  --type-page-title:var(--fw-bold) var(--fs-16)/1.2 var(--font-ui); /* @kind font */
  --type-stat:var(--fw-bold) var(--fs-24)/1.1 var(--font-ui); /* @kind font */
  --type-record-h1:var(--fs-28)/28px var(--font-sans); /* @kind font */
  --type-record-h1-legacy:var(--fs-28)/28px var(--font-legacy-ui); /* @kind font */
}

/* ==== from docs/design-system/tokens/layout.css ==== */

/* LeanBrokers spacing, radii, shadows, motion, layout.
   Values are the ones actually used in listNEW2.php, support.css,
   dash2.css, crm.css and custom-styles.css -- not a synthetic scale. */

:root{
  /* --- Spacing (px values found in source; not a strict 4/8 grid) --- */
  --sp-2:2px;
  --sp-4:4px;
  --sp-5:5px;    /* legacy input/note padding */
  --sp-6:6px;    /* grid cell padding, small button y-padding */
  --sp-8:8px;
  --sp-10:10px;  /* panel body padding, #page-wrapper padding */
  --sp-12:12px;  /* toolbar row 2 y-padding, drawer nav gap */
  --sp-14:14px;  /* toolbar row 1 y-padding, button x-padding */
  --sp-15:15px;  /* bootstrap gutter, top-navbar link padding */
  --sp-16:16px;
  --sp-20:20px;  /* toolbar row x-padding, QVP section x-padding */
  --sp-24:24px;
  --sp-40:40px;

  /* --- Radii --- */
  --radius-2:2px;    /* snackbar, .applinks */
  --radius-3:3px;    /* legacy buttons, notes, textareas */
  --radius-4:4px;    /* login .form card, inline code */
  --radius-8:8px;    /* PRIMARY: modern buttons, inputs, grid corners */
  --radius-10:10px;  /* toolbar card, work card, dialog; legacy filter tab bottoms */
  --radius-16:16px;  /* mobile bottom-sheet top corners */
  --radius-pill:50px;/* .set-icon */
  --radius-circle:50%;

  /* --- Elevation --- */
  --shadow-card:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04); /* #listActionsBar */
  --shadow-sheet:0 -2px 8px rgba(0,0,0,.15);                          /* mobile action bar / QVP */
  --shadow-login:0 5px 15px 3px rgba(19,35,47,.2);                    /* .form (login card) */
  --shadow-modal:0 4px 10px 4px rgba(19,35,47,.3);                    /* .form in list pages */
  --shadow-popover:0 0 24px -1px rgba(56,56,56,1);                    /* .addlead, .standings */
  /* Dialogs and snackbars on the unified navy shell: deeper and cooler than
     --shadow-card, so an overlay reads as lifted off the navy field. Not from
     the legacy CSS — introduced with direction E. */
  --shadow-overlay:0 12px 32px rgba(9,25,42,.22);
  /* Dialog-scale lift: modals, the Quick Search palette and the Quick Links
     tray all sit on this one value, so the three read as the same surface. */
  --shadow-dialog:0 24px 64px rgba(9,25,42,.32); /* @kind shadow */

  /* --- Motion --- */
  --ease-standard:ease; /* @kind other */
  --ease-drawer:cubic-bezier(.19,1,.22,1); /* @kind other */
  --dur-fast:.22s; /* @kind other */
  --dur-base:.25s; /* @kind other */
  --dur-slow:.5s; /* @kind other */
  --dur-drawer:.6s; /* @kind other */
  --dur-fade:600ms; /* @kind other */
  --transition-link:color var(--dur-slow) var(--ease-standard); /* @kind other */
  --transition-button:all .2s ease-in-out; /* @kind other */
  --transition-panel:flex-basis var(--dur-fast) ease,width var(--dur-fast) ease; /* @kind other */

  /* --- Layout --- */
  --sidebar-width:12.5rem;     /* .lb-sidebar-static / .lb-offcanvas */
  --sidebar-width-shell:11.5rem;/* nav column inside the unified navy shell */
  --sidebar-width-rail:56px;   /* collapsed icon rail */
  --shell-gutter:10px;         /* navy margin around the floating work card */
  --navbar-height:52px;        /* sticky navbar; sidebar sticks below it */
  --drawer-width:16.5rem;      /* legacy .drawer-nav */
  --qvp-width:340px;           /* quick view panel, desktop */
  --qvp-peek-h:60px;           /* quick view panel peek row, mobile */
  --banner-height:50px;        /* legacy fixed .banner / .banner2 */
  --content-max:1440px;        /* #table max-width */
  --form-max:400px;            /* login card max-width */
  --search-max:560px;          /* .kb-search-form */
  --bp-mobile:760px; /* @kind other */
  --bp-lg:992px; /* @kind other */
  --z-nav:1030; /* @kind other */
  --z-qvp:1029; /* @kind other */
  --z-qvp-mobile:1029; /* @kind other */
  --z-qvp-scrim:1040; /* @kind other */
  --z-qvp-expanded:1041; /* @kind other */
  --z-mobile-actions:1042; /* @kind other */
  --z-alerts:1060; /* @kind other */
  --z-drawer:14; /* @kind other */
  --z-tips:1035; /* @kind other */
  --z-tips-nested:1050; /* @kind other */
  --z-offcanvas:1045; /* @kind other */
  --z-offcanvas-backdrop:1040; /* @kind other */
}

/* ==== from docs/design-system/tokens/email.css ==== */

/* LeanBrokers transactional email system.
   Every value is lifted from the approved gallery (uploads/emailsystem.html --
   30 templates rendered from the shared lb_email_render() shell).

   The email palette is a NEAR-MISS of the app palette, not the same set:
   #E3E8ED borders (app: #d7dee6), #3C4A57 body text (app: #09192A),
   #7A8896 muted (app: #7a8794). Do not "correct" them to the app values --
   email clients render these and they are what shipped. */

:root{
  /* --- Email canvas + card --- */
  --email-canvas:#EEF1F4;        /* body background behind the card */
  --email-card:#FFFFFF;
  --email-border:#E3E8ED;        /* card border, rules, divider hairlines */
  --email-masthead:#09192A;      /* navy logo bar */
  --email-rule:#1E90FF;          /* 4px accent rule under the masthead */
  --email-callout:#F4F8FB;       /* offer/quote callout background */

  /* --- Email text --- */
  --email-eyebrow:#1E90FF;       /* uppercase kicker above the h1 */
  --email-heading:#09192A;
  --email-text:#3C4A57;          /* body copy */
  --email-muted:#7A8896;         /* fine print, footer, data labels */

  /* --- Email actions --- */
  --email-btn-bg:#1E90FF;
  --email-btn-fg:#FFFFFF;
  --email-btn-secondary-bg:#FFFFFF;
  --email-btn-secondary-fg:#09192A;
  --email-btn-secondary-border:#E3E8ED;

  /* --- Public form (data_request.php) ---
     The consumer-facing CCPA intake page: no login, no app chrome, and its
     own small palette layered on the email colors. */
  --public-form-width:560px;
  --public-form-radius:8px;
  --public-form-shadow:0 1px 3px rgba(0,0,0,.08);
  --public-btn-hover:#1976D1;          /* = --blue-600 */
  --public-error-bg:#FDEAEA;
  --public-error-border:#F3C4C4;
  --public-error-text:#9A3B3B;

  /* --- Email geometry --- */
  --email-width:600px;           /* card max-width */
  --email-image-width:520px;     /* full-bleed-in-card image width */
  --email-pad-x:40px;            /* desktop body padding; 24px under 620px */
  --email-pad-x-mobile:24px;
  --email-radius-card:6px;
  --email-radius-btn:4px;
  --email-step-size:28px;        /* numbered step circle */
  --email-breakpoint:620px;

  /* --- Email type (font shorthands, as authored inline) --- */
  --email-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --email-type-eyebrow:700 11px/16px var(--email-font);   /* + letter-spacing 1.6px, uppercase */
  --email-type-h1:800 28px/34px var(--email-font);        /* + letter-spacing -0.4px; 24px/30px mobile */
  --email-type-lede:18px/28px var(--email-font);
  --email-type-body:16px/26px var(--email-font);
  --email-type-fine:13px/21px var(--email-font);
  --email-type-footer:12px/20px var(--email-font);
  --email-type-data-label:700 11px/16px var(--email-font); /* + letter-spacing 1.2px, uppercase */
  --email-type-data-value:600 17px/24px var(--email-font);
  --email-type-btn:700 13px/16px var(--email-font);        /* + letter-spacing 1.5px, uppercase */
}