/* KTG TYPOGRAPHY SYSTEM V2
 * Technical enterprise type system for KTG Construction Management.
 * Display: IBM Plex Sans. UI/body: Inter.
 * Scope: operational modules, dialogs and app sidebar.
 * Does not change routing, permissions, business logic or layout structure.
 */

:root {
    --ktg-font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ktg-font-display: 'IBM Plex Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;

    --ktg-type-page-title: 34px;
    --ktg-type-section-title: 18px;
    --ktg-type-card-title: 16px;
    --ktg-type-body: 14px;
    --ktg-type-table: 13px;
    --ktg-type-caption: 12px;
    --ktg-type-label: 11px;

    --ktg-leading-title: 1.12;
    --ktg-leading-body: 1.55;
    --ktg-leading-compact: 1.4;
}

/* --------------------------------------------------------------------------
   Base module typography
   -------------------------------------------------------------------------- */

.triton-page,
.triton-page button,
.triton-page input,
.triton-page select,
.triton-page textarea,
.triton-page table,
dialog,
dialog button,
dialog input,
dialog select,
dialog textarea {
    font-family: var(--ktg-font-ui);
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

.triton-page {
    font-size: var(--ktg-type-body);
    line-height: var(--ktg-leading-body);
    font-weight: 400;
}

/* Display hierarchy: one consistent technical face for every module heading. */
.triton-page h1,
.triton-page h2,
.triton-page h3,
.triton-page .triton-section-title,
.triton-page .triton-kicker,
.triton-page .triton-label {
    font-family: var(--ktg-font-display);
}

.triton-page h1 {
    font-size: var(--ktg-type-page-title) !important;
    line-height: var(--ktg-leading-title) !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
}

/* Site Control had a stronger legacy selector; keep it on the same global scale. */
.triton-page:has(#create-site-constraint) > section:first-child h1 {
    font-size: var(--ktg-type-page-title) !important;
    line-height: var(--ktg-leading-title) !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
}

.triton-page h2,
.triton-page .triton-section-title {
    font-size: var(--ktg-type-section-title) !important;
    line-height: 1.28 !important;
    font-weight: 600 !important;
    letter-spacing: -0.018em !important;
}

.triton-page h3 {
    font-size: var(--ktg-type-card-title) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: -0.012em !important;
}

/* Supporting copy stays neutral and highly readable. */
.triton-page [class*="text-sm"] {
    line-height: 1.55;
}

.triton-page [class*="text-[9px]"] {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
}

.triton-page [class*="text-[10px]"] {
    font-size: 11px !important;
    line-height: 1.42 !important;
}

.triton-page [class*="text-[11px]"] {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.triton-page [class*="text-xs"] {
    font-size: var(--ktg-type-caption);
    line-height: 1.48;
}

/* Eyebrows, labels and micro headings: technical but not over-tracked. */
.triton-page .triton-label {
    font-size: var(--ktg-type-label) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
}

.triton-page .triton-kicker {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
}

/* Stop small UI text from becoming unnecessarily heavy. */
.triton-page [class*="text-[9px]"][class*="font-black"],
.triton-page [class*="text-[10px]"][class*="font-black"],
.triton-page [class*="text-[11px]"][class*="font-black"],
.triton-page [class*="text-xs"][class*="font-black"],
.triton-page [class*="text-sm"][class*="font-black"] {
    font-weight: 600 !important;
}

/* KPI / monetary values remain strong and scan well in dense dashboards. */
.triton-page p[class*="text-xl"][class*="font-black"],
.triton-page p[class*="text-2xl"][class*="font-black"],
.triton-page p[class*="text-3xl"][class*="font-black"],
.triton-page span[class*="text-[27px]"][class*="font-black"],
.triton-page span[class*="text-[30px]"][class*="font-black"],
.triton-page p[class*="text-[27px]"][class*="font-black"],
.triton-page p[class*="text-[30px]"][class*="font-black"] {
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   Forms and actions
   -------------------------------------------------------------------------- */

.triton-page .triton-field,
dialog .triton-field,
.triton-page input:not([type="checkbox"]):not([type="radio"]),
.triton-page select,
.triton-page textarea {
    font-size: var(--ktg-type-body) !important;
    line-height: 1.45 !important;
    font-weight: 500;
}

.triton-page .triton-btn-primary,
dialog .triton-btn-primary {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em;
}

.triton-page .triton-btn-secondary,
dialog .triton-btn-secondary {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.triton-page table {
    font-size: var(--ktg-type-table);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.triton-page table thead th {
    font-family: var(--ktg-font-display);
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: 0.045em !important;
}

.triton-page table tbody td {
    font-size: var(--ktg-type-table);
    line-height: 1.48;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Sidebar module hierarchy
   -------------------------------------------------------------------------- */

.triton-app-sidebar .triton-sidebar-link,
.triton-app-sidebar details > summary {
    font-family: var(--ktg-font-display);
    font-weight: 500 !important;
    letter-spacing: -0.01em;
}

.triton-app-sidebar .triton-sidebar-link-active,
.triton-app-sidebar details[open] > summary {
    font-weight: 600 !important;
}

.triton-app-sidebar details > div .triton-sidebar-link {
    font-family: var(--ktg-font-ui);
    font-weight: 500 !important;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Dialog typography
   -------------------------------------------------------------------------- */

dialog h1,
dialog h2,
dialog h3 {
    font-family: var(--ktg-font-display);
    font-weight: 700;
    letter-spacing: -0.018em;
}

dialog label,
dialog [data-flux-label] {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

/* Mobile: retain hierarchy without oversized headings. */
@media (max-width: 767px) {
    :root {
        --ktg-type-page-title: 28px;
        --ktg-type-section-title: 17px;
        --ktg-type-card-title: 15px;
    }

    .triton-page h1,
    .triton-page:has(#create-site-constraint) > section:first-child h1 {
        letter-spacing: -0.03em !important;
    }
}