/* Techforma UI foundations. Semantic tokens follow the shadcn convention;
   controls remain server-rendered HTML, with no React or icon runtime. */
:root {
    --background: #fff;
    --foreground: #003b40;
    --card: #fff;
    --card-foreground: var(--foreground);
    --primary: #003b40;
    --primary-foreground: #fff;
    --secondary: #e8f7f1;
    --secondary-foreground: #003b40;
    --muted: #f4f8f7;
    --muted-foreground: #526d76;
    --accent: #ffda46;
    --accent-foreground: #003b40;
    --border: #dce8e7;
    --input: #bfd7d3;
    --ring: #008b99;
    --destructive: #a52237;
    --success: #087660;
    --warning: #956900;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --control-sm: 40px;
    --control-md: 48px;
    --control-lg: 56px;
    --page-gutter: var(--space-12);
}

/* Fixed viewBox, weight and optical sizes across every Lucide icon. Artwork,
   the Techforma mark and service illustrations deliberately remain separate. */
body.tf-site .ui-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.tf-site .ui-icon-sm { width: 16px; height: 16px; flex-basis: 16px; }
body.tf-site .ui-icon-lg { width: 24px; height: 24px; flex-basis: 24px; }
body.tf-site :is(.ui-disclosure-icon,.ui-menu-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

/* Shared primitives. Existing page classes keep their layout responsibilities;
   new controls can use these names without introducing another local variant. */
body.tf-site .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: var(--control-md);
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--primary-foreground);
    font: 600 14px/1.4 var(--tf-font-sans, Arial, sans-serif);
    text-decoration: none;
    cursor: pointer;
}
body.tf-site .ui-button--outline { background: transparent; color: var(--foreground); border-color: var(--input); }
body.tf-site .ui-button--secondary { background: var(--secondary); color: var(--secondary-foreground); }
body.tf-site .ui-button--ghost { background: transparent; color: var(--foreground); }
body.tf-site .ui-button--accent { background: var(--accent); color: var(--accent-foreground); }
body.tf-site .ui-button--sm { min-height: var(--control-sm); padding: var(--space-2) var(--space-4); gap: var(--space-2); font-size: 13px; }
body.tf-site .ui-button--lg { min-height: var(--control-lg); padding: var(--space-3) var(--space-6); font-size: 16px; }
body.tf-site .ui-button--icon { width: var(--control-md); padding: var(--space-3); }
body.tf-site .ui-button:not(:disabled,[aria-disabled="true"]):hover { filter: brightness(.94); }
.ui-card { padding: var(--space-6); background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ui-field { display: grid; gap: var(--space-2); }
.ui-label { font-size: 14px; line-height: 1.4; font-weight: 600; }
.ui-input {
    width: 100%; min-width: 0; min-height: var(--control-md);
    padding: var(--space-2) var(--space-4); border: 1px solid var(--input);
    border-radius: var(--radius-md); background: var(--background); color: var(--foreground);
    font: 400 16px/1.5 var(--tf-font-sans, Arial, sans-serif);
}
.ui-hint { color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
.ui-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: 12px; font-weight: 600; line-height: 1.5; }
.ui-badge--success { background: var(--secondary); color: var(--success); border-color: transparent; }
.ui-badge--warning { background: #fff5ce; color: var(--warning); border-color: transparent; }
.ui-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--muted-foreground); background: var(--muted); font-size: 14px; line-height: 1.5; }
.ui-alert--error { background: #fff5f5; border-color: #e7b9bf; color: var(--destructive); }
.ui-accordion { border-block-start: 1px solid var(--border); }
.ui-accordion:last-child { border-block-end: 1px solid var(--border); }
.ui-accordion > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: var(--control-lg); padding: var(--space-4) 0; font-weight: 600; cursor: pointer; list-style: none; }
.ui-accordion > summary::-webkit-details-marker { display: none; }
.ui-accordion > :not(summary) { padding: 0 0 var(--space-6); color: var(--muted-foreground); line-height: 1.6; }

/* One keyboard focus treatment, including controls returned through HTMX. */
body.tf-site :is(a,button,input,select,textarea,summary,[role="tab"],[tabindex]):focus-visible {
    outline: 2px solid var(--ring) !important;
    outline-offset: 4px !important;
}
body.tf-site :is(input,select,textarea):focus-visible { outline-offset: 2px !important; border-color: var(--ring) !important; box-shadow: none; }
body.tf-site :is(input,select,textarea):is([aria-invalid="true"],.invalid) { border-color: var(--destructive) !important; }
body.tf-site :is(input,select,textarea):is([aria-invalid="true"],.invalid):focus-visible { outline-color: var(--destructive) !important; }
body.tf-site :is(input,textarea)::placeholder { color: var(--muted-foreground); opacity: .82; }
body.tf-site :is(button,input,select,textarea):disabled,
body.tf-site [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
body.tf-site :is(button,[type="submit"])[aria-busy="true"],
body.tf-site form[aria-busy="true"] [type="submit"] { cursor: progress; }
body.tf-site :is(.field-error,.tf-field-feedback-error,.ui-error) { color: var(--destructive); }
body.tf-site :is(.tf-report-tool,.tf-report-rescan,.tf-text-link,.hm-link) { display: inline-flex; align-items: center; gap: var(--space-2); }
body.tf-site :is(.tf-report-tool,.tf-report-rescan) .ui-icon { width: 16px; height: 16px; flex-basis: 16px; }

@media (max-width: 1199px) { :root { --page-gutter: var(--space-8); } }
@media (max-width: 767px) {
    :root { --page-gutter: var(--space-5); }
    .ui-card { padding: var(--space-5); }
    /* Compact desktop tools retain a comfortable touch target on phones. */
    body.tf-site :is(.tf-report-tool,.tf-report-rescan,.ui-button--sm) { min-height: 44px; }
}
@media (forced-colors: active) {
    body.tf-site :is(button,.ui-button,.ui-badge,.ui-card) { border: 1px solid ButtonText; }
    body.tf-site :focus-visible { outline-color: Highlight; }
}