/**
 * Generated by PF COLOR SYSTEM - positivefeedback.ai
 * USER CSS — fonts, colors, applied styles, UI components, sizes
 * DO NOT EDIT - regenerated when colors are changed in Color System.
 */

/* ── FONT LOADING — uploaded custom fonts ── */
@font-face { font-family: 'Approach Mono Medium'; src: url('../../../290c5204/static/fonts/Approach_Mono_Medium.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Europa Grotesk SH Bold'; src: url('../../../290c5204/static/fonts/europa-grotesk-sh-bold.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'PFC 02'; src: url('../../../290c5204/static/fonts/PFC-02.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Roboto Mono'; src: url('../../../290c5204/static/fonts/Roboto-Mono.ttf') format('truetype'); font-display: swap; }

/******************************************************************************
 * IMAGE CATALOG
 * NOTE: Variable definitions only. Do not use directly.
 * Image variables are assembled in the Brand Identity section.
 ******************************************************************************/
:root {
/* Technology-tier images (system-owned) — relativized to THIS brand sheet */
--img-technology-01-logo_stacked-dark: url('../../../290c5204/static/images/DA-M_D2758425E580_2CC2.png');
--img-technology-01-logo_horizontal-dark: url('../../../290c5204/static/images/DA-M_D626D26CDD4D_7E7A.png');
--img-technology-01-background-dark: url('../../../290c5204/static/images/DA-M_B361A400202C_C7C5.png');
--img-technology-01-moodboard-dark: url('../../../290c5204/static/images/DA-M_73521A3548B6_3F96.png');
--img-technology-01-hero-dark: url('../../../290c5204/static/images/DA-M_3F9881CADD88_FCD1.png');
--img-technology-01-logo_mark-dark: url('../../../290c5204/static/images/DA-M_4EC57C0622CC_00F7.png');
--img-technology-01-logo_stacked-light: url('../../../290c5204/static/images/DA-M_F8A94B5DB2A8_83E4.png');
--img-technology-01-logo_horizontal-light: url('../../../290c5204/static/images/DA-M_F0947207A1C4_41AF.png');
--img-technology-01-background-light: url('../../../290c5204/static/images/DA-M_B3A61275E405_C4BC.png');
--img-technology-01-moodboard-light: url('../../../290c5204/static/images/DA-M_F12351A5A4CA_4E73.png');
--img-technology-01-hero-light: url('../../../290c5204/static/images/DA-M_0971C7B1313B_B0F1.png');
--img-technology-01-logo_mark-light: url('../../../290c5204/static/images/DA-M_329F37D7E2CC_7EF6.png');
--img-technology-02-logo_stacked-dark: url('../../../00018390/static/images/DA-M_C4DAE00F3CB2_A83D.png');
--img-technology-02-logo_horizontal-dark: url('../../../00018390/static/images/DA-M_BCB3249C2829_D9F7.png');
--img-technology-02-background-dark: url('../../../00018390/static/images/DA-M_5F1396183978_35D8.png');
--img-technology-02-moodboard-dark: url('../../../00018390/static/images/DA-M_7B3C8FAEFE4B_C698.png');
--img-technology-02-hero-dark: url('../../../00018390/static/images/DA-M_6F0CEBF9EC02_4890.png');
--img-technology-02-logo_mark-dark: url('../../../00018390/static/images/DA-M_33156C5AF49B_354D.png');
--img-technology-02-logo_stacked-light: url('../../../00018390/static/images/DA-M_1973E9E6E86C_A7B7.png');
--img-technology-02-logo_horizontal-light: url('../../../00018390/static/images/DA-M_D0315EB98B8F_0185.png');
--img-technology-02-background-light: url('../../../00018390/static/images/DA-M_A65744A1C934_0429.png');
--img-technology-02-moodboard-light: url('../../../00018390/static/images/DA-M_9EFBBCFBB417_E0AA.png');
--img-technology-02-hero-light: url('../../../00018390/static/images/DA-M_32954F14584D_3C6C.png');
--img-technology-02-logo_mark-light: url('../../../00018390/static/images/DA-M_1FE46791B5F3_5860.png');
--img-technology-03-logo_stacked-dark: url('../images/DA-M_9E19EC396174_2A32.png');
--img-technology-03-logo_horizontal-dark: url('../images/DA-M_8EB5E4894888_B1F5.png');
--img-technology-03-background-dark: url('../images/DA-M_0048F6E03272_9E78.png');
--img-technology-03-moodboard-dark: url('../images/DA-M_81EDC167FDD6_6B14.png');
--img-technology-03-hero-dark: url('../images/DA-M_E23FF466E459_B84C.png');
--img-technology-03-logo_mark-dark: url('../images/DA-M_130BB7AE41C0_0EBC.png');
--img-technology-03-logo_stacked-light: url('../images/DA-M_60B5F3BE081C_F487.png');
--img-technology-03-logo_horizontal-light: url('../images/DA-M_A708508FCE39_EB8E.png');
--img-technology-03-background-light: url('../images/DA-M_BC5E94592EAE_C522.png');
--img-technology-03-moodboard-light: url('../images/DA-M_9C28FD4368EF_F486.png');
--img-technology-03-hero-light: url('../images/DA-M_5008A116372B_56FC.png');
--img-technology-03-logo_mark-light: url('../images/DA-M_ABCF8ED7DD97_F51D.png');

}

/******************************************************************************
 * FONT CATALOG
 * NOTE: Variable definitions only. Do not use directly.
 * Font variables are assembled in the Brand Identity section.
 ******************************************************************************/
:root {
--font-global-01: 'PFC 02', sans-serif;
--font-global-02: 'Europa Grotesk SH Bold', sans-serif;
--font-global-03: Helvetica, "Helvetica Neue", Arial, sans-serif;
--font-global-04: 'Approach Mono Medium', 'Roboto Mono', monospace;
--font-global-05: 'Roboto Mono', monospace;

--font-heading: var(--font-global-02);
--font-heading-wt: 900;
--font-heading-tt: uppercase;
--font-heading-ls: 1.5px;
--font-title: var(--font-global-02);
--font-title-wt: 900;
--font-title-tt: uppercase;
--font-title-ls: 1.5px;
--font-subtitle: var(--font-global-02);
--font-subtitle-wt: 900;
--font-subtitle-tt: uppercase;
--font-subtitle-ls: 1.5px;
--font-body: var(--font-global-03);
--font-body-wt: 300;
--font-body-tt: none;
--font-body-ls: normal;
--font-caption: var(--font-global-01);
--font-caption-wt: 600;
--font-caption-tt: uppercase;
--font-caption-ls: 1.5px;
--font-link: var(--font-global-01);
--font-link-wt: 500;
--font-link-tt: none;
--font-link-ls: normal;
--font-callout: var(--font-global-04);
--font-callout-wt: 500;
--font-callout-tt: uppercase;
--font-callout-ls: normal;
--font-notes: var(--font-global-05);
--font-notes-wt: 500;
--font-notes-tt: uppercase;
--font-notes-ls: normal;
--font-subnav: var(--font-global-01);
--font-subnav-wt: 400;
--font-subnav-tt: uppercase;
--font-subnav-ls: normal;
--font-label: var(--font-global-03);
--font-label-wt: 500;
--font-label-tt: uppercase;
--font-label-ls: normal;
--font-nav: var(--font-global-01);
--font-nav-wt: 400;
--font-nav-tt: uppercase;
--font-nav-ls: normal;
--font-annotation: var(--font-global-03);
--font-annotation-wt: 300;
--font-annotation-tt: uppercase;
--font-annotation-ls: normal;
}

/******************************************************************************
 * COLOR CATALOG
 * NOTE: Variable definitions only. Do not use directly.
 * Color variables are assembled in the Brand Identity section.
 ******************************************************************************/
:root {
}

/******************************************************************************
 * LIVE ASSEMBLER
 * Maps --active-* variables based on two data attributes on <html>:
 *   data-brilliance-hierarchy="technology-01"
 *   data-theme="dark"
 *
 * SSE hot swap: change these two attributes and everything swaps instantly.
 *   document.documentElement.setAttribute("data-brilliance-hierarchy", "technology-02");
 *   document.documentElement.setAttribute("data-theme", "light");
 ******************************************************************************/

:root {
--active-color-01: #000000;
--active-color-02: #333333;
--active-color-03: #666666;
--active-color-04: #0066cc;
--active-color-05: #004499;
--active-color-06: #999999;
--active-color-07: #333333;
--active-color-08: #666666;
--active-color-09: #ffffff;
--active-color-10: #f5f5f5;
--active-color-11: #eeeeee;
--active-color-12: transparent;
--active-color-13: transparent;
--active-color-14: transparent;
--active-color-15: transparent;
--active-color-16: transparent;
--active-color-17: transparent;
--active-color-18: transparent;
--active-color-19: transparent;
--active-color-20: transparent;
--active-color-21: transparent;
--active-color-22: transparent;
--active-color-23: transparent;
--active-color-24: transparent;
--active-color-25: transparent;
--active-color-26: transparent;
--active-color-27: transparent;
--active-color-28: transparent;
--active-color-29: transparent;
--active-color-30: transparent;
--active-color-31: transparent;
--active-color-32: transparent;
--active-color-33: transparent;
--active-color-34: transparent;
--active-color-35: transparent;
--active-color-36: transparent;
--active-color-37: transparent;
--active-color-38: transparent;
--active-color-39: transparent;
--active-color-40: transparent;
--active-color-41: transparent;
--active-color-42: transparent;
--active-color-43: transparent;
--active-color-44: transparent;
--active-color-45: transparent;
--active-color-46: transparent;
--active-color-47: transparent;
--active-color-48: transparent;
--active-color-49: transparent;
--active-color-50: transparent;
--active-color-51: transparent;
--active-color-52: transparent;
--active-color-53: transparent;
--active-color-54: transparent;
--active-color-55: transparent;
--active-color-56: transparent;
--active-color-57: transparent;
--active-color-58: transparent;
--active-color-59: transparent;
--active-color-60: transparent;
--active-color-61: transparent;
--active-color-62: transparent;
--active-color-63: transparent;
--active-color-64: transparent;
--active-logo_stacked: none;
--active-logo_horizontal: none;
--active-background: none;
--active-moodboard: none;
--active-hero: none;
--active-logo_mark: none;
}

.layout--nav__link {
  text-decoration: none;
  color: var(--ui-subnav-text);
  font-family: var(--font-subnav);
  font-size: var(--font-subnav-sz);
  font-weight: var(--font-subnav-wt);
  text-transform: var(--font-subnav-tt);
  letter-spacing: var(--font-subnav-ls);
}
.layout--nav__link:hover {
  color: var(--active-color-05);
}

/******************************************************************************
 * APPLIED STYLES — uses --active-* variables from the Live Assembler
 *
 * These classes never change. The Live Assembler swaps the variables.
 *
 * EXAMPLE:
 *   <h1 class="heading size--xxxl line-height--small">Frost Security</h1>
 *   <p class="body size--m line-height--medium">Body text here.</p>
 *   <a class="link size--s" href="#">Click here</a>
 *   <div class="surface-outer"><div class="surface-inner">Content</div></div>
 *   <div class="logo-stacked"></div>
 *   <div class="notes size--xs">LARRY says hello</div>
 ******************************************************************************/

.heading { font-family: var(--font-heading); font-weight: var(--font-heading-wt); font-size: var(--font-heading-sz); line-height: var(--font-heading-lh); text-transform: var(--font-heading-tt); text-decoration: var(--font-heading-td); font-style: var(--font-heading-fi); letter-spacing: var(--font-heading-ls); color: var(--active-color-01); }
.title { font-family: var(--font-title); font-weight: var(--font-title-wt); font-size: var(--font-title-sz); line-height: var(--font-title-lh); text-transform: var(--font-title-tt); text-decoration: var(--font-title-td); font-style: var(--font-title-fi); letter-spacing: var(--font-title-ls); color: var(--active-color-01); }
.subtitle { font-family: var(--font-subtitle); font-weight: var(--font-subtitle-wt); font-size: var(--font-subtitle-sz); line-height: var(--font-subtitle-lh); text-transform: var(--font-subtitle-tt); text-decoration: var(--font-subtitle-td); font-style: var(--font-subtitle-fi); letter-spacing: var(--font-subtitle-ls); color: var(--active-color-02); }
.body { font-family: var(--font-body); font-weight: var(--font-body-wt); font-size: var(--font-body-sz); line-height: var(--font-body-lh); text-transform: var(--font-body-tt); text-decoration: var(--font-body-td); font-style: var(--font-body-fi); letter-spacing: var(--font-body-ls); color: var(--active-color-02); }
.caption { font-family: var(--font-caption); font-weight: var(--font-caption-wt); font-size: var(--font-caption-sz); line-height: var(--font-caption-lh); text-transform: var(--font-caption-tt); text-decoration: var(--font-caption-td); font-style: var(--font-caption-fi); letter-spacing: var(--font-caption-ls); color: var(--active-color-03); }
.nav { font-family: var(--font-nav); font-weight: var(--font-nav-wt); font-size: var(--font-nav-sz); line-height: var(--font-nav-lh); text-transform: var(--font-nav-tt); text-decoration: var(--font-nav-td); font-style: var(--font-nav-fi); letter-spacing: var(--font-nav-ls); color: var(--active-color-04); }
.link { font-family: var(--font-link); font-weight: var(--font-link-wt); font-size: var(--font-link-sz); line-height: var(--font-link-lh); text-transform: var(--font-link-tt); text-decoration: var(--font-link-td); font-style: var(--font-link-fi); letter-spacing: var(--font-link-ls); color: var(--active-color-04); }
.callout { font-family: var(--font-callout); font-weight: var(--font-callout-wt); font-size: var(--font-callout-sz); line-height: var(--font-callout-lh); text-transform: var(--font-callout-tt); text-decoration: var(--font-callout-td); font-style: var(--font-callout-fi); letter-spacing: var(--font-callout-ls); color: var(--active-color-06); }
.emphasis { font-family: var(--font-callout); font-weight: var(--font-callout-wt); font-size: var(--font-callout-sz); line-height: var(--font-callout-lh); text-transform: var(--font-callout-tt); text-decoration: var(--font-callout-td); font-style: var(--font-callout-fi); letter-spacing: var(--font-callout-ls); color: var(--active-color-07); }
.notes { font-family: var(--font-notes); font-weight: var(--font-notes-wt); font-size: var(--font-notes-sz); line-height: var(--font-notes-lh); text-transform: var(--font-notes-tt); text-decoration: var(--font-notes-td); font-style: var(--font-notes-fi); letter-spacing: var(--font-notes-ls); color: var(--active-color-08); }
.annotation { font-family: var(--font-annotation); font-weight: var(--font-annotation-wt); font-size: var(--font-annotation-sz); line-height: var(--font-annotation-lh); text-transform: var(--font-annotation-tt); text-decoration: var(--font-annotation-td); font-style: var(--font-annotation-fi); letter-spacing: var(--font-annotation-ls); color: var(--active-color-08); }
.subnav { font-family: var(--font-subnav); font-weight: var(--font-subnav-wt); font-size: var(--font-subnav-sz); line-height: var(--font-subnav-lh); text-transform: var(--font-subnav-tt); text-decoration: var(--font-subnav-td); font-style: var(--font-subnav-fi); letter-spacing: var(--font-subnav-ls); color: var(--active-color-04); }
.label { font-family: var(--font-label); font-weight: var(--font-label-wt); font-size: var(--font-label-sz); line-height: var(--font-label-lh); text-transform: var(--font-label-tt); text-decoration: var(--font-label-td); font-style: var(--font-label-fi); letter-spacing: var(--font-label-ls); color: var(--active-color-03); }
.link:hover { color: var(--active-color-05); }
.nav:hover { color: var(--active-color-05); }
.subnav:hover { color: var(--active-color-05); }
a { color: var(--active-color-04); text-decoration: none; }
a:hover { color: var(--active-color-05); }

body { background-color: var(--active-color-09); background-image: var(--active-background); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; background-attachment: fixed; color: var(--active-color-01); font-family: var(--font-body); font-weight: var(--font-body-wt); }
.surface { background-color: var(--active-color-09); }
.sub-contacts-header, .sub-invoices-header, .sub-locations-header, .sub-operations-header { font-family: var(--font-subtitle); font-weight: var(--font-subtitle-wt); font-size: var(--font-subtitle-sz); text-transform: var(--font-subtitle-tt); color: var(--active-color-01); }
.sub-contact-name, .sub-invoice-name, .sub-location-name, .sub-operation-name { font-family: var(--font-label); font-weight: var(--font-label-wt); font-size: var(--font-label-sz); }
.sub-contact-secondary, .sub-invoice-secondary, .sub-location-secondary, .sub-operation-secondary { font-family: var(--font-annotation); font-weight: var(--font-annotation-wt); font-size: var(--font-annotation-sz); }
.sub-contact-address, .sub-invoice-address, .sub-location-address { font-family: var(--font-body); font-weight: var(--font-body-wt); font-size: var(--font-body-sz); }
.sub-button { font-family: var(--font-caption); font-weight: var(--font-caption-wt); font-size: var(--font-caption-sz); text-transform: var(--font-caption-tt); letter-spacing: var(--font-caption-ls); }
.sub-card-input { font-family: var(--font-body); font-weight: var(--font-body-wt); font-size: var(--font-body-sz); }
.sub-contacts-header, .sub-invoices-header, .sub-locations-header, .sub-operations-header { padding: 0 0 20px 0; margin-top: 0; color: var(--color-technology-01-01-light); }
.sub-contacts-header > div:first-child, .sub-invoices-header > div:first-child, .sub-locations-header > div:first-child, .sub-operations-header > div:first-child { font-family: var(--font-title); font-weight: var(--font-title-wt); font-size: var(--font-title-sz); text-transform: var(--font-title-tt); letter-spacing: var(--font-title-ls); }
.sub-contacts-header > div:nth-child(2), .sub-invoices-header > div:nth-child(2), .sub-locations-header > div:nth-child(2), .sub-operations-header > div:nth-child(2) { font-family: var(--font-caption); font-weight: var(--font-caption-wt); font-size: var(--font-caption-sz); text-transform: var(--font-caption-tt); letter-spacing: var(--font-caption-ls); color: var(--color-technology-01-07-light); margin-top: 4px; }
.sub-section-heading { font-family: var(--font-subtitle); font-weight: var(--font-subtitle-wt); font-size: var(--font-subtitle-sz); text-transform: var(--font-subtitle-tt); letter-spacing: var(--font-subtitle-ls); background: none; padding: 8px 0; border-bottom: 1px solid var(--color-technology-01-07-light); color: var(--color-technology-01-01-light); }
.page-content .main-container { background: var(--color-technology-01-11-light); padding: 30px; border-radius: 8px; border: 2px solid var(--color-technology-01-07-light); margin-top: 20px; color: var(--color-technology-01-01-light); }
.page-content .main-container > style + * { margin-top: 0; }
.sub-contacts-table, .sub-invoices-table, .sub-locations-table, .sub-operations-table { color: var(--color-technology-01-01-light); }
.sub-contacts-table a, .sub-invoices-table a, .sub-locations-table a, .sub-operations-table a { color: var(--color-technology-01-07-light); }
.sub-contacts-table a:hover, .sub-invoices-table a:hover, .sub-locations-table a:hover, .sub-operations-table a:hover { color: var(--color-technology-01-04-light); }
.sub-contacts-table-row, .sub-invoices-table-row, .sub-locations-table-row, .sub-operations-table-row { border-bottom: 1px solid var(--color-technology-01-07-light) !important; }
.sub-contact-row { border-bottom: 1px solid var(--color-technology-01-07-light); }
.sub-search-input { border-color: var(--color-technology-01-07-light); color: var(--color-technology-01-01-light); background: var(--color-technology-01-01-light); }
.sub-sort-btn { border-color: var(--color-technology-01-07-light); color: var(--color-technology-01-01-light); }
.sub-search-input { font-family: var(--font-body); font-weight: var(--font-body-wt); font-size: var(--font-body-sz); background: transparent; color: var(--active-color-01); }
.sub-search-button { font-family: var(--font-caption); font-weight: var(--font-caption-wt); font-size: var(--font-caption-sz); color: var(--active-color-01); cursor: pointer; }
.sub-sort-btn { font-family: var(--font-caption); font-weight: var(--font-caption-wt); }
.surface-outer { background-color: var(--active-color-10); }
.surface-inner { background-color: var(--active-color-11); }

.logo-stacked { background-image: var(--active-logo_stacked); background-size: contain; background-repeat: no-repeat; }
.logo-horizontal { background-image: var(--active-logo_horizontal); background-size: contain; background-repeat: no-repeat; }
.hero { background-image: var(--active-hero); background-size: cover; background-position: center; }
.moodboard { background-image: var(--active-moodboard); background-size: cover; background-position: center; }
.featured-mark { background-image: var(--active-logo_mark); background-size: contain; background-repeat: no-repeat; background-position: center; }

.video-safe-type { color: var(--active-color-01); text-shadow: 0 2px 22px var(--active-color-09), 0 0 40px var(--active-color-09), 0 0 12px var(--active-color-09), 0 0 4px var(--active-color-09); }
.book-demo-video-section .layout--action__content, .book-demo-video-section .layout--action__content .heading, .book-demo-video-section .layout--action__content .caption { color: var(--active-color-01); text-shadow: 0 2px 22px var(--active-color-09), 0 0 40px var(--active-color-09), 0 0 12px var(--active-color-09), 0 0 4px var(--active-color-09); }
.book-demo-video-section .main-button, .book-demo-video-section .main-button:hover, .book-demo-video-section .main-button-container a { text-shadow: none; }
.book-demo-scrim { background: transparent; }
.marquee { color: var(--active-marquee, var(--active-color-07)); }
.dynamic-status, .larry-agent__role--shimmer { background: linear-gradient(90deg, currentColor 0%, currentColor 40%, color-mix(in srgb, var(--active-color-11) 90%, transparent) 50%, currentColor 60%, currentColor 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: dynamicStatusShimmer 2.5s ease-in-out infinite; }
@keyframes dynamicStatusShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

:root {
--ui-announce-bg: var(--active-color-12);
--ui-announce-text: var(--active-color-13);
--ui-nav-bg: transparent;
--ui-nav-text: var(--active-color-15);
--ui-nav-border: transparent;
--ui-subnav-text: var(--active-color-17);
--ui-subnav-active: var(--active-color-18);
--ui-subnav-indicator: var(--active-color-19);
--ui-tools-bg: var(--active-color-20);
--ui-tools-text: var(--active-color-21);
--ui-tools-border: var(--active-color-22);
--ui-tools-hover: var(--active-color-23);
--ui-btn-text: var(--active-color-24);
--ui-btn-bg: var(--active-color-25);
--ui-btn-active-text: var(--active-color-26);
--ui-btn-active-bg: var(--active-color-27);
--ui-btn-hover-bg: var(--active-color-28);
--ui-body-bg: var(--active-color-29);
--ui-input-bg: var(--active-color-30);
--ui-input-border: var(--active-color-31);
--ui-input-focus: var(--active-color-32);
--ui-placeholder: var(--active-color-33);
--ui-card-bg: var(--active-color-34);
--ui-card-border: var(--active-color-35);
--ui-row-divider: var(--active-color-36);
--ui-section-divider: var(--active-color-37);
--ui-tag-text: var(--active-color-38);
--ui-tag-bg: var(--active-color-39);
--ui-tag-border: var(--active-color-40);
--ui-sm-btn-text: var(--active-color-41);
--ui-sm-btn-bg: var(--active-color-42);
--ui-sm-btn-border: var(--active-color-43);
--ui-surface-outer: var(--active-color-44);
--ui-surface-inner: var(--active-color-45);
--ui-success-text: var(--active-color-46);
--ui-success-bg: var(--active-color-47);
--ui-warn-text: var(--active-color-48);
--ui-warn-bg: var(--active-color-49);
--ui-error-text: var(--active-color-50);
--ui-error-bg: var(--active-color-51);
--ui-toast-text: var(--active-color-52);
--ui-toast-bg: var(--active-color-53);
--ui-gradient-start: var(--active-color-54);
--ui-gradient-end: var(--active-color-55);
--ui-gradient-text: var(--active-color-56);
--ui-focus-ring: var(--active-color-57);
--ui-progress-track: var(--active-color-58);
--ui-progress-fill: var(--active-color-59);
--ui-overlay: var(--active-color-60);
--ui-footer-bg: transparent;
--ui-footer-text: var(--active-color-62);
--ui-footer-border: transparent;
--ui-footer-link: var(--active-color-64);
--ui-btn-padding-y: 18px;
--ui-btn-padding-x: 15px;
--ui-btn-border-width: 1px;
--ui-btn-border-radius: 0px;
--ui-btn-transition: 0.3s;
--ui-btn-easing: ease;
--ui-btn-hover-shadow: 30px;
--ui-btn-hover-opacity: 0.9;
--ui-btn-hover-lift: -2px;
}

/* ── UI COMPONENT CLASSES — use --ui-* variables from slots 12-64 ── */

/* Buttons */
.ui-btn { color: var(--ui-btn-text); background: var(--ui-btn-bg); border: none; cursor: pointer; }
.ui-btn:hover { background: var(--ui-btn-hover-bg); }
.ui-btn--active { color: var(--ui-btn-active-text); background: var(--ui-btn-active-bg); }
.ui-btn--sm { color: var(--ui-sm-btn-text); background: var(--ui-sm-btn-bg); border: 1px solid var(--ui-sm-btn-border); }

/* Inputs */
.ui-input { background: var(--ui-input-bg); border: 1px solid var(--ui-input-border); color: var(--active-color-01); }
.ui-input:focus { border-color: var(--ui-input-focus); outline: 2px solid var(--ui-focus-ring); outline-offset: 1px; }
.ui-input::placeholder { color: var(--ui-placeholder); }

/* Cards */
.ui-card { background: var(--ui-card-bg); border: 1px solid var(--ui-card-border); }

/* Tags / Chips */
.ui-tag { color: var(--ui-tag-text); background: var(--ui-tag-bg); border: 1px solid var(--ui-tag-border); }

/* Dividers */
.ui-divider { border-top: 1px solid var(--ui-row-divider); }
.ui-divider--section { border-top: 1px solid var(--ui-section-divider); }
.admin-bullet { color: var(--active-color-04); }

/* Status */
.ui-success { color: var(--ui-success-text); background: var(--ui-success-bg); }
.ui-warning { color: var(--ui-warn-text); background: var(--ui-warn-bg); }
.ui-error { color: var(--ui-error-text); background: var(--ui-error-bg); }

/* Toast / Notification */
.ui-toast { color: var(--ui-toast-text); background: var(--ui-toast-bg); }

/* Progress */
.ui-progress-track { background: var(--ui-progress-track); }
.ui-progress-fill { background: var(--ui-progress-fill); }

/* Overlay */
.ui-overlay { background: var(--ui-overlay); }

/* Footer */
.ui-footer { background: var(--ui-footer-bg); color: var(--ui-footer-text); border-top: 1px solid var(--ui-footer-border); }
.ui-footer a { color: var(--ui-footer-link); }

/* Tools Panel */
.ui-tools { background: var(--ui-tools-bg); color: var(--ui-tools-text); border: 1px solid var(--ui-tools-border); }
.ui-tools:hover { background: var(--ui-tools-hover); }

/* ── LAYOUT WIRING — connects layout--* classes from core.css to --ui-* slots ── */

/* Tools section wiring */
.tools-section { background: var(--ui-tools-bg); color: var(--ui-tools-text); }
.tools-card { border: 1px solid var(--ui-tools-border); color: var(--ui-tools-text); }
.tools-card:hover { background: var(--ui-tools-hover); }

/* Nav wiring */
/* Main module buttons (Contacts, Invoices, etc.) — glow on hover */
.main-button { color: var(--ui-btn-bg); background: transparent; border: var(--ui-btn-border-width) solid var(--ui-btn-bg); border-radius: var(--ui-btn-border-radius); font-family: var(--font-subnav); font-weight: var(--font-subnav-wt); font-size: var(--font-subnav-sz); text-transform: var(--font-subnav-tt); letter-spacing: var(--font-subnav-ls); padding: var(--ui-btn-padding-y) var(--ui-btn-padding-x); transition: all var(--ui-btn-transition) var(--ui-btn-easing); }
.main-button:hover { background: var(--ui-btn-bg); color: var(--active-color-09); box-shadow: 0 0 var(--ui-btn-hover-shadow) color-mix(in srgb, var(--ui-btn-bg) calc(var(--ui-btn-hover-opacity) * 100%), transparent); transform: translateY(var(--ui-btn-hover-lift)); }
.main-button.active { color: var(--ui-btn-active-text); background: var(--ui-btn-active-bg); border-color: var(--ui-btn-active-bg); }

/* Button wiring — sub-card-button is the real app button class */
.sub-card-button { color: var(--ui-btn-text); background: var(--ui-btn-bg); }
.sub-card-button:hover { background: var(--ui-btn-hover-bg); }
.sub-card-button--primary { color: var(--ui-btn-text); background: var(--ui-btn-bg); }
.sub-card-button--small { color: var(--ui-sm-btn-text); background: var(--ui-sm-btn-bg); border: 1px solid var(--ui-sm-btn-border); }

/* Input wiring — sub-card-input is the real app input class */
.sub-card-input { background: var(--ui-input-bg); border: 1px solid var(--ui-input-border); color: var(--active-color-01); }
.sub-card-input:focus { border-color: var(--ui-input-focus); outline: 2px solid var(--ui-focus-ring); outline-offset: 1px; }
.sub-card-input::placeholder { color: var(--ui-placeholder); }
.sub-card-hint { color: var(--ui-placeholder); }
.sub-card-select { background: var(--ui-input-bg); border: 1px solid var(--ui-input-border); color: var(--active-color-01); }
.sub-card-textarea { background: var(--ui-input-bg); border: 1px solid var(--ui-input-border); color: var(--active-color-01); }

/* Card wiring — sub-card-container is the real app card class */
.sub-card-container { background: var(--ui-card-bg); border: 1px solid var(--ui-card-border); }
.sub-card-header { border-bottom: 1px solid var(--ui-section-divider); }
.sub-card-section { border-bottom: 1px solid var(--ui-row-divider); }

/* Contact row wiring */
.sub-contact-row { border-bottom: 1px solid var(--ui-row-divider); }

/* Tag wiring */
.sub-tag { color: var(--ui-tag-text); background: var(--ui-tag-bg); border: 1px solid var(--ui-tag-border); }

/* Status wiring */
.sub-success { color: var(--ui-success-text); background: var(--ui-success-bg); }
.sub-warning { color: var(--ui-warn-text); background: var(--ui-warn-bg); }
.sub-error { color: var(--ui-error-text); background: var(--ui-error-bg); }

/* Footer wiring */
.layout--footer { background: var(--ui-footer-bg); color: var(--ui-footer-text); }
.layout--footer__separator { background: var(--ui-footer-border); }
.layout--footer__nav-link { color: var(--ui-footer-link); }
.layout--footer__legal-link { color: var(--ui-footer-link); }
.layout--footer__nav-link:hover { color: var(--ui-footer-link); }

/******************************************************************************
 * SIZES + LINE HEIGHTS — system utility classes
 *
 * STEP 1: Pick a class from Applied Styles
 *   .heading  .title  .subtitle  .body  .caption  .link  .callout  .emphasis  .notes
 *
 * STEP 2: Add a size class
 *   .size--xxxs (0.6rem) .size--xxs (0.7rem) .size--xs (0.8rem)  .size--s (0.9rem)  .size--m (1.1rem)
 *   .size--l (1.5rem)    .size--xl (2rem)    .size--xxl (3rem)  .size--xxxl (4.5rem)
 *   .size--xxxxl (8rem)
 *
 * STEP 3: Add a line-height class (optional)
 *   .line-height--small (1.2) — headings, captions, tight text
 *   .line-height--medium (2.2) — body text, paragraphs, readable text
 *
 * EXAMPLE:
 *   <h1 class="heading size--xxxl line-height--small">Page Title</h1>
 *   <p class="body size--m line-height--medium">Paragraph text.</p>
 *   <a class="link size--s" href="/about">Learn more</a>
 *
 ******************************************************************************/
.size--xxxs { font-size: 0.6rem; }
.size--xxs { font-size: 0.7rem; }
.size--xs { font-size: 0.8rem; }
.size--s { font-size: 0.9rem; }
.size--m { font-size: 1.1rem; }
.size--l { font-size: 1.5rem; }
.size--xl { font-size: 2rem; }
.size--xxl { font-size: 3rem; }
.size--xxxl { font-size: 4.5rem; }
.size--xxxxl { font-size: 8rem; }
.line-height--small  { line-height: 1.2; }
.line-height--medium { line-height: 2.2; }