/*
 * TDM SIGNATURE — Foundations 1.1
 * Executive + Digital + Human
 *
 * Esta capa define contratos semánticos nuevos y mantiene alias para las
 * vistas existentes. No contiene composición de módulos ni colores locales.
 */

@font-face {
    font-family: "Geist";
    src: url("../fonts/tdm-signature/geist-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/tdm-signature/plus-jakarta-sans-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    color-scheme: dark;

    /* Brand and module orientation. The Laravel inline brand value remains
       the source for --primary and is consumed here without duplicating it. */
    --color-brand-primary: var(--primary, #7567f8);
    --color-brand-secondary: #24a7a1;
    --color-brand-accent: #ec8b45;
    --color-module-accent: var(--accent, var(--color-brand-primary));
    --color-on-brand: var(--on-brand, #ffffff);
    --brand-primary: var(--color-brand-primary);
    --brand-secondary: var(--secondary, var(--color-brand-secondary));
    --brand-accent: var(--accent, var(--color-brand-accent));

    /* Surface 0–4 */
    --surface-canvas: #0b0e14;
    --surface-section: #10151d;
    --surface-card: #151b25;
    --surface-elevated: #1a2230;
    --surface-overlay: #1d2634;
    --surface-interactive: #202a39;
    --surface-selected: color-mix(in srgb, var(--color-brand-primary) 14%, var(--surface-card));
    /* BrandSurface is deliberately darker than the raw organization color.
       This keeps white foregrounds AA-safe even when an administrator selects
       a very bright brand color. Raw --color-brand-primary remains available
       for controls, focus and small accents. */
    --surface-brand: color-mix(in srgb, var(--color-brand-primary) 28%, #121827);
    --surface-brand-strong: linear-gradient(118deg, #121827 0%, color-mix(in srgb, var(--color-brand-primary) 22%, #1b2234) 58%, color-mix(in srgb, var(--color-brand-primary) 38%, #17152a) 100%);
    --surface-inverse: #f5f7fb;
    --surface-muted: var(--surface-section);
    --overlay-backdrop: rgba(3, 7, 14, .72);

    /* Floating UI contract. Menus and overlays own their foreground instead
       of inheriting it from a hero, header or module container. */
    --menu-surface: var(--surface-overlay);
    --menu-foreground: var(--text-primary);
    --menu-muted: var(--text-muted);
    --menu-border: var(--border-default);
    --menu-shadow: var(--shadow-overlay);
    --menu-item-surface: transparent;
    --menu-item-foreground: var(--text-secondary);
    --menu-item-hover-surface: var(--surface-interactive);
    --menu-item-hover-foreground: var(--text-primary);
    --menu-item-active-surface: var(--surface-selected);
    --menu-item-active-foreground: var(--text-primary);
    --menu-item-disabled-foreground: var(--text-disabled);
    --menu-separator: var(--border-subtle);
    --overlay-surface: var(--surface-overlay);
    --overlay-foreground: var(--text-primary);
    --overlay-muted: var(--text-muted);
    --overlay-border: var(--border-default);
    --overlay-shadow: var(--shadow-overlay);

    /* Content */
    --text-primary: #f5f7fb;
    --text-secondary: #bdc6d4;
    --text-muted: #8b98aa;
    --text-disabled: #626f81;
    --text-inverse: #111722;
    --text-link: #a99fff;

    /* Interactive controls own their text and disabled surfaces. This avoids
       inheriting a pale label from a dark module when the page is light. */
    --control-surface: var(--surface-interactive);
    --control-foreground: var(--text-primary);
    --control-muted: var(--text-secondary);
    --control-disabled-surface: var(--surface-section);
    --control-disabled-foreground: var(--text-secondary);

    /* Every semantic surface owns its foreground. Components must consume the
       matching pair instead of inferring text color from the global theme. */
    --on-canvas: var(--text-primary);
    --on-card: var(--text-primary);
    --on-elevated: var(--text-primary);
    --on-overlay: var(--text-primary);
    --on-brand: #f8fafc;
    --on-brand-muted: #d5dbea;
    --on-brand-subtle: #b8c2d4;
    --brand-border: color-mix(in srgb, var(--color-brand-primary) 42%, #71809a);
    --on-inverse: #111722;
    --on-inverse-muted: #49586b;
    --on-muted: var(--text-secondary);

    /* Borders */
    --border-subtle: #263140;
    --border-default: #344154;
    --border-strong: #526176;
    --border-focus: color-mix(in srgb, var(--color-brand-primary) 72%, white);

    /* Status */
    --status-success: #42c994;
    --status-success-soft: color-mix(in srgb, var(--status-success) 14%, transparent);
    --status-warning: #e9b44c;
    --status-warning-soft: color-mix(in srgb, var(--status-warning) 15%, transparent);
    --status-danger: #ed6b7b;
    --status-danger-soft: color-mix(in srgb, var(--status-danger) 14%, transparent);
    --status-info: #65aaf6;
    --status-info-soft: color-mix(in srgb, var(--status-info) 14%, transparent);
    --status-neutral: #9aa7b8;
    --status-neutral-soft: color-mix(in srgb, var(--status-neutral) 13%, transparent);
    --on-success: #071d15;
    --on-warning: #211704;
    --on-danger: #ffffff;
    --on-info: #07172a;
    --surface-success: color-mix(in srgb, var(--status-success) 15%, var(--surface-card));
    --surface-warning: color-mix(in srgb, var(--status-warning) 15%, var(--surface-card));
    --surface-danger: color-mix(in srgb, var(--status-danger) 15%, var(--surface-card));
    --surface-info: color-mix(in srgb, var(--status-info) 15%, var(--surface-card));
    --on-success-surface: #9be8c9;
    --on-warning-surface: #f3cf7a;
    --on-danger-surface: #f3a0ab;
    --on-info-surface: #9bc8fa;

    /* Button contract. Intense action surfaces always own a stable, AA-safe
       foreground; it never follows the page theme or an editable brand text. */
    --button-primary-background: color-mix(in srgb, var(--color-brand-primary) 78%, #111827);
    --button-primary-background-hover: color-mix(in srgb, var(--color-brand-primary) 70%, #0b1020);
    --button-primary-background-active: color-mix(in srgb, var(--color-brand-primary) 62%, #070b14);
    --button-primary-foreground: #ffffff;
    --button-primary-border: color-mix(in srgb, var(--color-brand-primary) 72%, #263244);
    --button-secondary-background: var(--surface-interactive);
    --button-secondary-background-hover: var(--surface-elevated);
    --button-secondary-foreground: var(--text-primary);
    --button-secondary-border: var(--border-default);
    --button-danger-background: #b4233a;
    --button-danger-background-hover: #991b31;
    --button-danger-background-active: #7f1628;
    --button-danger-foreground: #ffffff;
    --button-danger-border: #c8324b;
    --button-disabled-background: var(--control-disabled-surface);
    --button-disabled-foreground: var(--control-disabled-foreground);
    --button-font-family: var(--font-family-ui);
    --button-font-weight: 750;
    --button-line-height: 1.15;
    --button-radius: .75rem;
    --button-height-sm: 2rem;
    --button-height-md: 2.625rem;
    --button-height-lg: 2.875rem;
    --button-font-size-sm: .71875rem;
    --button-font-size-md: .8125rem;
    --button-font-size-lg: .875rem;
    --button-padding-sm: .45rem .7rem;
    --button-padding-md: .68rem .95rem;
    --button-padding-lg: .78rem 1.125rem;
    --button-icon-size: 1rem;
    --button-icon-gap: .5rem;

    /* Shared step state contract. */
    --step-surface: var(--surface-section);
    --step-foreground: var(--text-secondary);
    --step-muted: var(--text-muted);
    --step-border: var(--border-subtle);
    --step-active-surface: var(--surface-selected);
    --step-active-foreground: var(--text-primary);
    --step-active-muted: var(--text-secondary);
    --step-active-marker-surface: var(--surface-brand);
    --step-active-marker-foreground: var(--on-brand);
    --step-complete-surface: color-mix(in srgb, var(--status-success) 12%, var(--surface-card));
    --step-complete-foreground: var(--text-primary);
    --step-complete-muted: var(--text-secondary);
    --step-complete-marker-surface: var(--status-success);
    --step-complete-marker-foreground: #071d15;
    --step-disabled-surface: var(--surface-section);
    --step-disabled-foreground: var(--text-disabled);

    /* Typography */
    --font-family-ui: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-family-display: "Plus Jakarta Sans", "Geist", "Segoe UI", system-ui, sans-serif;
    --font-size-metadata: .75rem;
    --font-size-label: .8125rem;
    --font-size-ui: .875rem;
    --font-size-emphasis: 1rem;
    --font-size-section: clamp(1.125rem, 1.05rem + .25vw, 1.25rem);
    --font-size-title: clamp(1.5rem, 1.28rem + .7vw, 2rem);
    --font-size-display: clamp(2rem, 1.72rem + 1vw, 2.5rem);
    /* Semantic type roles. These names are the public contract for new
       components; the numeric scale above remains available internally. */
    --font-size-caption: var(--font-size-metadata);
    --font-size-small: var(--font-size-label);
    --font-size-body: var(--font-size-ui);
    --font-size-h4: var(--font-size-emphasis);
    --font-size-h3: var(--font-size-section);
    --font-size-h2: var(--font-size-title);
    --font-size-h1: var(--font-size-title);
    --line-height-tight: 1.18;
    --line-height-heading: 1.28;
    --line-height-ui: 1.45;
    --line-height-copy: 1.62;
    --letter-spacing-tight: -.025em;
    --letter-spacing-ui: -.008em;
    --letter-spacing-label: .015em;

    /* Spacing: 4px base */
    --spacing-0: 0;
    --spacing-1: .25rem;
    --spacing-2: .5rem;
    --spacing-3: .75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    /* Named spacing roles requested by the product language. New components
       use these roles instead of inventing intermediate literal values. */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-2xl: var(--spacing-12);

    /* Shape and elevation */
    --radius-xs: .375rem;
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.375rem;
    --radius-round: 999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, .23);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .32);
    --shadow-overlay: 0 30px 90px rgba(0, 0, 0, .42);
    --shadow-card: var(--shadow-sm);
    --shadow-dropdown: var(--shadow-md);
    --shadow-modal: var(--shadow-overlay);

    /* Motion */
    --motion-micro: 140ms;
    --motion-fast: 180ms;
    --motion-normal: 220ms;
    --motion-slow: 280ms;
    --motion-ease-standard: cubic-bezier(.2, 0, 0, 1);
    --motion-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-exit: cubic-bezier(.4, 0, 1, 1);

    /* Controls and layout */
    --control-height-sm: 2.25rem;
    --control-height-md: 2.625rem;
    --control-height-lg: 3rem;
    --touch-target: 2.75rem;
    --content-reading: 72ch;
    --content-wide: 96rem;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--border-focus) 38%, transparent);

    /* Product-facing semantic aliases. The more precise surface/text/status
       tokens remain canonical; these aliases make the requested design
       language explicit without creating a second palette. */
    --color-primary: var(--color-brand-primary);
    --color-secondary: var(--color-brand-secondary);
    --color-background: var(--surface-canvas);
    --color-surface: var(--surface-card);
    --color-surface-muted: var(--surface-muted);
    --color-border: var(--border-default);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-success: var(--status-success);
    --color-warning: var(--status-warning);
    --color-danger: var(--status-danger);
    --color-info: var(--status-info);

    /* Compatibility aliases. Remove only after the consumer audit reaches 0. */
    --app-bg: var(--surface-canvas);
    --surface-1: var(--surface-card);
    --surface-2: var(--surface-section);
    --surface-3: var(--surface-elevated);
    --surface-hover: var(--surface-interactive);
    --sidebar-bg: var(--surface-section);
    --topbar-bg: color-mix(in srgb, var(--surface-section) 90%, transparent);
    --bg: var(--surface-canvas);
    --surface: var(--surface-card);
    --panel: var(--surface-card);
    --panel2: var(--surface-section);
    --soft: var(--surface-section);
    --line: var(--border-subtle);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --success: var(--status-success);
    --warning: var(--status-warning);
    --danger: var(--status-danger);
    --info: var(--status-info);
    --overlay: var(--overlay-backdrop);
    --shadow: var(--shadow-md);
    --accent-soft: color-mix(in srgb, var(--color-module-accent) 14%, transparent);
    --primary-soft: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
    --space-1: var(--spacing-1);
    --space-2: var(--spacing-2);
    --space-3: var(--spacing-3);
    --space-4: var(--spacing-4);
    --space-5: var(--spacing-5);
    --space-6: var(--spacing-6);
    --space-8: var(--spacing-8);
    --duration-fast: var(--motion-micro);
    --duration-base: var(--motion-fast);
    --duration-slow: var(--motion-normal);
    --ease-standard: var(--motion-ease-standard);
    --ease-enter: var(--motion-ease-enter);
    --ease-exit: var(--motion-ease-exit);
    --control-height: var(--control-height-md);
}

body.theme-light {
    color-scheme: light;
    --surface-canvas: #f4f6f9;
    --surface-section: #eef2f6;
    --surface-card: #ffffff;
    --surface-elevated: #ffffff;
    --surface-overlay: #ffffff;
    --surface-interactive: #e8edf3;
    --surface-selected: color-mix(in srgb, var(--color-brand-primary) 10%, white);
    --overlay-backdrop: rgba(24, 32, 45, .48);
    --text-primary: #182131;
    --text-secondary: #49586b;
    --text-muted: #68778a;
    --text-disabled: #96a2b1;
    --text-inverse: #f8fafc;
    --text-link: color-mix(in srgb, var(--color-brand-primary) 82%, #27324a);
    --surface-inverse: #111722;
    --on-inverse: #f8fafc;
    --on-inverse-muted: #bdc6d4;
    --border-subtle: #dfe5ec;
    --border-default: #cdd6e0;
    --border-strong: #a8b5c5;
    --shadow-sm: 0 1px 2px rgba(30, 42, 60, .06);
    --shadow-md: 0 12px 30px rgba(30, 42, 60, .09);
    --shadow-lg: 0 24px 64px rgba(30, 42, 60, .14);
    --shadow-overlay: 0 30px 90px rgba(30, 42, 60, .2);
    --on-success-surface: #064735;
    --on-warning-surface: #5b3b00;
    --on-danger-surface: #7d1628;
    --on-info-surface: #123f73;
    --surface-success: color-mix(in srgb, var(--status-success) 15%, #ffffff);
    --surface-warning: color-mix(in srgb, var(--status-warning) 15%, #ffffff);
    --surface-danger: color-mix(in srgb, var(--status-danger) 15%, #ffffff);
    --surface-info: color-mix(in srgb, var(--status-info) 15%, #ffffff);
}

/* Surface/foreground primitives. These classes are intentionally composable
   and remain valid in light, dark and organization-brand themes. */
.tdm-surface-canvas { background: var(--surface-canvas); color: var(--on-canvas); }
.tdm-surface-card { background: var(--surface-card); color: var(--on-card); }
.tdm-surface-elevated { background: var(--surface-elevated); color: var(--on-elevated); }
.tdm-surface-overlay { background: var(--surface-overlay); color: var(--on-overlay); }
.tdm-surface-muted { background: var(--surface-muted); color: var(--on-muted); }
.tdm-surface-inverse { background: var(--surface-inverse); color: var(--on-inverse); }
.tdm-brand-surface.tdm-brand-surface {
    border-color: var(--brand-border);
    background-color: var(--surface-brand);
    background-image: var(--surface-brand-strong);
    color: var(--on-brand);
}
.tdm-brand-surface .tdm-brand-title,
.tdm-brand-surface .tdm-brand-foreground { color: var(--on-brand); }
.tdm-brand-surface .tdm-brand-copy,
.tdm-brand-surface .tdm-brand-muted { color: var(--on-brand-muted); }
.tdm-brand-surface .tdm-brand-subtle { color: var(--on-brand-subtle); }
.tdm-brand-surface .tdm-brand-panel {
    border-color: color-mix(in srgb, var(--on-brand) 22%, transparent);
    background: color-mix(in srgb, var(--on-brand) 10%, transparent);
    color: var(--on-brand);
}
.tdm-surface-success { border-color: color-mix(in srgb, var(--status-success) 34%, var(--border-default)); background: var(--surface-success); color: var(--on-success-surface); }
.tdm-surface-warning { border-color: color-mix(in srgb, var(--status-warning) 34%, var(--border-default)); background: var(--surface-warning); color: var(--on-warning-surface); }
.tdm-surface-danger { border-color: color-mix(in srgb, var(--status-danger) 34%, var(--border-default)); background: var(--surface-danger); color: var(--on-danger-surface); }
.tdm-surface-info { border-color: color-mix(in srgb, var(--status-info) 34%, var(--border-default)); background: var(--surface-info); color: var(--on-info-surface); }

.tdm-step {
    border-color: var(--step-border);
    background: var(--step-surface);
    color: var(--step-foreground);
}
.tdm-step :where(small) { color: var(--step-muted); }
.tdm-step:is(.active, .is-active),
.ui-step.is-active {
    border-color: color-mix(in srgb, var(--surface-brand) 48%, var(--step-border));
    background: var(--step-active-surface);
    color: var(--step-active-foreground);
}
.tdm-step.tdm-step:is(.active, .is-active) > .tdm-step-marker,
.ui-step.is-active::before {
    border-color: var(--step-active-marker-surface);
    background: var(--step-active-marker-surface);
    color: var(--step-active-marker-foreground);
}
.tdm-step:is(.complete, .is-complete),
.ui-step.is-complete { background: var(--step-complete-surface); color: var(--step-complete-foreground); }
.tdm-step.tdm-step:is(.complete, .is-complete) > .tdm-step-marker,
.ui-step.is-complete::before {
    border-color: var(--step-complete-marker-surface);
    background: var(--step-complete-marker-surface);
    color: var(--step-complete-marker-foreground);
}
.tdm-step:disabled,
.tdm-step.is-disabled,
.ui-step.is-disabled { background: var(--step-disabled-surface); color: var(--step-disabled-foreground); cursor: not-allowed; }
.ui-step.is-disabled::before { border-color: var(--step-border); background: var(--step-disabled-surface); color: var(--step-disabled-foreground); }

.tdm-showcase-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-5);
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-xl);
}
.tdm-showcase-hero h2 { margin: .25rem 0; }
.tdm-showcase-hero p { margin: 0; }
.tdm-showcase-hero > span { padding: .75rem 1rem; border-radius: var(--radius-md); font-weight: 750; white-space: nowrap; }
.tdm-surface-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--spacing-3); }
.tdm-surface-matrix article { display: grid; gap: .45rem; min-height: 12rem; align-content: start; padding: var(--spacing-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.tdm-surface-matrix article > :is(strong,p,small) { margin: 0; color: inherit; }
.tdm-surface-matrix article > small { opacity: .78; }
.tdm-surface-matrix article > svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; }
.tdm-surface-matrix article > :is(.btn,.ui-button,.badge) {
    border-color: color-mix(in srgb, currentColor 34%, transparent);
    background: transparent;
    box-shadow: none;
    color: inherit;
}
.tdm-surface-matrix article > :is(.btn,.ui-button) { width: max-content; margin-top: auto; }
@media (max-width: 40rem) { .tdm-showcase-hero { align-items: flex-start; flex-direction: column; } }

/* Future theme split contracts. They are inert until the shell sets them. */
body[data-navigation-theme="dark"] .sidebar,
body[data-navigation-theme="brand"] .sidebar {
    color-scheme: dark;
    --surface-card: #151b25;
    --surface-section: #10151d;
    --surface-interactive: #202a39;
    --text-primary: #f5f7fb;
    --text-secondary: #bdc6d4;
    --text-muted: #8b98aa;
    --border-subtle: #263140;
}

body[data-navigation-theme="brand"] .sidebar {
    --surface-section: color-mix(in srgb, var(--color-brand-primary) 25%, #0e121a);
    --surface-card: color-mix(in srgb, var(--color-brand-primary) 18%, #151b25);
}

body[data-navigation-theme="light"] .sidebar {
    color-scheme: light;
    --surface-card: #ffffff;
    --surface-section: #f7f9fb;
    --surface-interactive: #e8edf3;
    --text-primary: #182131;
    --text-secondary: #49586b;
    --text-muted: #68778a;
    --border-subtle: #dfe5ec;
}

body[data-header-theme="dark"] .topbar,
body[data-header-theme="brand"] .topbar {
    color-scheme: dark;
    --topbar-bg: rgba(16, 21, 29, .94);
    --text-primary: #f5f7fb;
    --text-secondary: #bdc6d4;
    --text-muted: #8b98aa;
    --border-subtle: #263140;
}

body[data-header-theme="brand"] .topbar {
    --topbar-bg: color-mix(in srgb, var(--color-brand-primary) 32%, #10151d);
}

body[data-header-theme="light"] .topbar {
    color-scheme: light;
    --topbar-bg: rgba(255, 255, 255, .94);
    --text-primary: #182131;
    --text-secondary: #49586b;
    --text-muted: #68778a;
    --border-subtle: #dfe5ec;
}

html {
    font-family: var(--font-family-ui);
    font-synthesis: none;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-family-ui);
    letter-spacing: var(--letter-spacing-ui);
}

body {
    font-size: var(--font-size-ui);
    line-height: var(--line-height-ui);
    /* Rebind aliases at body scope so theme overrides are resolved after
       `.theme-light` / accessibility classes, not frozen on :root. */
    --surface-muted: var(--surface-section);
    --on-canvas: var(--text-primary);
    --on-card: var(--text-primary);
    --on-elevated: var(--text-primary);
    --on-overlay: var(--text-primary);
    --on-muted: var(--text-secondary);
    --step-surface: var(--surface-section);
    --step-foreground: var(--text-secondary);
    --step-muted: var(--text-muted);
    --step-border: var(--border-subtle);
    --step-active-surface: var(--surface-selected);
    --step-active-foreground: var(--text-primary);
    --step-active-muted: var(--text-secondary);
    --step-active-marker-surface: var(--surface-brand);
    --step-active-marker-foreground: var(--on-brand);
    --step-complete-surface: color-mix(in srgb, var(--status-success) 12%, var(--surface-card));
    --step-complete-foreground: var(--text-primary);
    --step-complete-muted: var(--text-secondary);
    --step-disabled-surface: var(--surface-section);
    --step-disabled-foreground: var(--text-disabled);
    --menu-surface: var(--surface-overlay);
    --menu-foreground: var(--text-primary);
    --menu-muted: var(--text-muted);
    --menu-border: var(--border-default);
    --menu-shadow: var(--shadow-overlay);
    --menu-item-surface: transparent;
    --menu-item-foreground: var(--text-secondary);
    --menu-item-hover-surface: var(--surface-interactive);
    --menu-item-hover-foreground: var(--text-primary);
    --menu-item-active-surface: var(--surface-selected);
    --menu-item-active-foreground: var(--text-primary);
    --menu-item-disabled-foreground: var(--text-disabled);
    --menu-separator: var(--border-subtle);
    --overlay-surface: var(--surface-overlay);
    --overlay-foreground: var(--text-primary);
    --overlay-muted: var(--text-muted);
    --overlay-border: var(--border-default);
    --overlay-shadow: var(--shadow-overlay);
    --control-surface: var(--surface-interactive);
    --control-foreground: var(--text-primary);
    --control-muted: var(--text-secondary);
    --control-disabled-surface: var(--surface-section);
    --control-disabled-foreground: var(--text-secondary);
}

:where(h1, h2, h3, h4, h5, h6) {
    color: var(--text-primary);
    text-wrap: balance;
}

:where(.tdm-display, .page-head h1, .auth-story h1, .tdm-role-identity h1) {
    font-family: var(--font-family-display);
    font-weight: 720;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

:where(p, li, dd) { text-wrap: pretty; }
:where(small, .metadata, .eyebrow) { font-size: var(--font-size-metadata); }
:where(label, .field-label) { font-size: var(--font-size-label); letter-spacing: var(--letter-spacing-label); }

/* Explicit type roles for reusable Blade components. They avoid broad
   element overrides, so legacy screens keep their current proportions. */
.tdm-type-display,
.tdm-type-h1,
.tdm-type-h2,
.tdm-type-h3,
.tdm-type-h4 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-family-display);
    letter-spacing: var(--letter-spacing-tight);
    text-wrap: balance;
}

.tdm-type-display { font-size: var(--font-size-display); font-weight: 740; line-height: var(--line-height-tight); }
.tdm-type-h1 { font-size: var(--font-size-h1); font-weight: 720; line-height: var(--line-height-tight); }
.tdm-type-h2 { font-size: var(--font-size-h2); font-weight: 700; line-height: var(--line-height-heading); }
.tdm-type-h3 { font-size: var(--font-size-h3); font-weight: 690; line-height: var(--line-height-heading); }
.tdm-type-h4 { font-size: var(--font-size-h4); font-weight: 680; line-height: var(--line-height-heading); }
.tdm-type-body { margin: 0; color: var(--text-primary); font: 400 var(--font-size-body)/var(--line-height-copy) var(--font-family-ui); text-wrap: pretty; }
.tdm-type-small { margin: 0; color: var(--text-secondary); font: 400 var(--font-size-small)/var(--line-height-ui) var(--font-family-ui); }
.tdm-type-caption { margin: 0; color: var(--text-muted); font: 500 var(--font-size-caption)/var(--line-height-ui) var(--font-family-ui); }
.tdm-type-label { color: var(--text-secondary); font: 650 var(--font-size-label)/var(--line-height-ui) var(--font-family-ui); letter-spacing: var(--letter-spacing-label); }
.tdm-type-helper { margin: 0; color: var(--text-muted); font: 400 var(--font-size-caption)/var(--line-height-ui) var(--font-family-ui); }

/* Density contracts. Balanced is the target default for TDM SIGNATURE. */
body.density-compact {
    --control-height-md: 2.25rem;
    --touch-target: 2.5rem;
    --component-padding-inline: var(--spacing-3);
    --component-padding-block: var(--spacing-2);
}

body.density-balanced,
body:not(.density-compact):not(.density-comfortable) {
    --control-height-md: 2.625rem;
    --touch-target: 2.75rem;
    --component-padding-inline: var(--spacing-4);
    --component-padding-block: var(--spacing-3);
}

body.density-comfortable {
    --control-height-md: 2.875rem;
    --touch-target: 3rem;
    --component-padding-inline: var(--spacing-5);
    --component-padding-block: var(--spacing-4);
}

/* Surface primitives for new and migrated views. */
.tdm-surface {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
}

.tdm-surface[data-level="0"] { border-color: transparent; background: var(--surface-canvas); }
.tdm-surface[data-level="1"] { background: var(--surface-section); }
.tdm-surface[data-level="2"] { background: var(--surface-card); box-shadow: var(--shadow-sm); }
.tdm-surface[data-level="3"] { background: var(--surface-elevated); box-shadow: var(--shadow-md); }
.tdm-surface[data-level="4"] { background: var(--surface-overlay); box-shadow: var(--shadow-overlay); }

.tdm-stack { display: grid; gap: var(--tdm-stack-gap, var(--spacing-4)); }
.tdm-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tdm-cluster-gap, var(--spacing-3)); }
.tdm-section { padding: clamp(var(--spacing-4), 2vw, var(--spacing-6)); }
.tdm-reading-width { max-width: var(--content-reading); }
.tdm-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdm-muted { color: var(--text-muted); }
.tdm-secondary { color: var(--text-secondary); }

/* Semantic feedback contracts. State is never represented by color alone. */
.tdm-state {
    display: inline-flex;
    min-height: 1.625rem;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
    border: 1px solid var(--state-border, var(--border-default));
    border-radius: var(--radius-round);
    background: var(--state-bg, var(--status-neutral-soft));
    color: var(--state-color, var(--text-secondary));
    font-size: var(--font-size-metadata);
    font-weight: 650;
    line-height: 1.2;
}

.tdm-state::before {
    width: .4375rem;
    height: .4375rem;
    flex: 0 0 .4375rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.tdm-state[data-tone="success"] { --state-bg: var(--status-success-soft); --state-color: var(--status-success); --state-border: color-mix(in srgb, var(--status-success) 32%, transparent); }
.tdm-state[data-tone="warning"] { --state-bg: var(--status-warning-soft); --state-color: var(--status-warning); --state-border: color-mix(in srgb, var(--status-warning) 34%, transparent); }
.tdm-state[data-tone="danger"] { --state-bg: var(--status-danger-soft); --state-color: var(--status-danger); --state-border: color-mix(in srgb, var(--status-danger) 32%, transparent); }
.tdm-state[data-tone="info"] { --state-bg: var(--status-info-soft); --state-color: var(--status-info); --state-border: color-mix(in srgb, var(--status-info) 32%, transparent); }

/* Accessibility baseline. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

:where(button, [role="button"], input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--color-brand-primary);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.high-contrast {
    --border-subtle: var(--border-default);
    --border-default: var(--border-strong);
    --text-muted: var(--text-secondary);
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 2px solid CanvasText;
        box-shadow: none;
    }

    .tdm-state::before { forced-color-adjust: none; }
}

@media (max-width: 47.99rem) {
    :where(button, .btn, .ui-icon-button, input, select, textarea) {
        min-height: var(--touch-target);
    }
}