@layer mindz.foundation, mindz.legacy, mindz.shell, mindz.module, mindz.compatibility, mindz.components, mindz.structure, mindz.page, mindz.data, mindz.tables, mindz.responsive, mindz.theme, mindz.interactions, mindz.utilities, mindz.final;

@layer mindz.foundation {
/*
 * MindZ Design System — Foundations v1
 * Fonte única para tokens, reset, tipografia e acessibilidade.
 * Componentes básicos pertencem a mindz_components.css.
 */

:root {
    color-scheme: light;

    /*
     * Contratos de custom properties.
     * Estes valores garantem um estado inicial previsível; componentes e scripts
     * podem sobrescrevê-los no próprio escopo sem criar variáveis implícitas.
     */
    --stack-gap: var(--space-4);
    --cluster-gap: var(--space-3);
    --icon-size: var(--icon-size-md);
    --actions-popover-arrow-left: 22px;
    --acoes-menu-top: 0px;
    --acoes-menu-left: 0px;
    --acoes-menu-width: 224px;
    --mention-left: 0px;
    --mention-top: 100%;
    --mention-popover-left: 0px;
    --mention-popover-top: 0px;
    --bar-pct: 0%;
    --tn-bar-width: 0%;
    --box-color: var(--primary);
    --theme-swatch: var(--primary);
    --shadow-color: var(--title-color);

    /* Contratos semânticos de compatibilidade em migração. */
    --shell-primary-strong: var(--primary-dark);
    --shell-text-main: var(--text);
    --shell-soft-surface: var(--surface-alt);
    --shell-border-strong: var(--border-strong);
    --ph-home-accent: var(--primary);
    --ph-home-red: var(--danger);
    --ph-home-line: var(--border);
    --mindz-popup-bg: var(--surface-elevated);
    --mindz-popup-border: var(--border);
    --mindz-popup-border-soft: var(--border-soft);
    --mindz-popup-muted: var(--text-muted);
    --mindz-text-strong: var(--title-color);
    --mindz-table-body-font-size: 13px;
    --mindz-table-body-font-weight: 500;
    --mindz-table-caption-font-size: 12px;
    --mindz-modal-max-width: 1120px;

    /* Família tipográfica */
    --font-family-base: "Inter", "Roboto", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
    --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Escala tipográfica */
    --font-size-2xs: 10px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: -0.005em;
    --letter-spacing-wide: 0.08em;

    /* Escala de espaçamento — múltiplos de 4 */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Raios */
    --radius-none: 0;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
    --radius-round: 50%;

    /* Dimensões de controles */
    --control-height-xs: 32px;
    --control-height-sm: 36px;
    --control-height-md: 40px;
    --control-height-lg: 44px;
    --field-height: var(--control-height-lg);
    --button-height: var(--control-height-md);
    --touch-target-min: 44px;
    --control-padding-inline: var(--space-4);
    --control-font-size: var(--font-size-md);
    --control-radius: var(--radius-md);
    --field-radius: var(--radius-lg);
    --field-padding-inline: var(--space-4);
    --field-label-size: 13px;
    --field-label-weight: var(--font-weight-medium);
    --textarea-min-height: 112px;
    --button-font-weight: var(--font-weight-semibold);
    --control-disabled-opacity: 0.58;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;
    --avatar-size-sm: 28px;
    --avatar-size-md: 36px;
    --avatar-size-lg: 44px;
    --avatar-size-xl: 56px;
    --avatar-background: var(--primary-soft);
    --avatar-foreground: var(--primary-dark);

    /* Movimento */
    --duration-instant: 80ms;
    --duration-fast: 140ms;
    --duration-normal: 200ms;
    --duration-slow: 280ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-interactive: color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);

    /* Camadas oficiais */
    --z-base: 0;
    --z-content: 10;
    --z-sticky: 1000;
    --z-sidebar: 2000;
    --z-header: 3000;
    --z-dropdown: 4000;
    --z-flyout: 70000;
    --z-tooltip: 80000;
    --z-backdrop: 100000;
    --z-modal: 100100;
    --z-toast: 100200;
    --z-global-help: 100300;
    --z-guide-tooltip: 100310;
    --z-critical: 2147483000;

    /* Layout e breakpoints documentais */
    --page-max-width: 1480px;
    --page-compact-width: 1120px;
    --page-reading-width: 820px;
    --page-gap: var(--space-6);
    --table-min-width: 1080px;
    --shell-header-height: 64px;
    --sidebar-brand-height: 64px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1440px;

    /* Paleta e superfícies — tema claro */
    --bg: #F6F7FC;
    --app-bg: #F6F7FC;
    --app-bg-soft: #FAFAFE;
    --surface: #FFFFFF;
    --surface-alt: #F8F8FD;
    --surface-soft: #EEF0F8;
    --surface-elevated: #FFFFFF;
    --card: #FFFFFF;
    --card-bg: #FFFFFF;
    --card-border: #DEE1ED;
    --card-hover-bg: #FAFAFE;

    --text: #485168;
    --text-soft: #626B83;
    --text-muted: #667085;
    --muted: #667085;
    --muted-2: #7C8598;
    --title-color: #343D55;
    --subtitle-color: #667085;
    --placeholder: #6B7280;

    --primary: #626DA8;
    --primary-hover: #56639F;
    --primary-dark: #465188;
    --primary-soft: #E9EBF8;
    --primary-subtle: #F4F5FC;
    --primary-contrast: #FFFFFF;
    --accent: #9EA8D3;
    --accent-soft: #EEEFF9;

    --success: #15803D;
    --success-strong: color-mix(in srgb, var(--success) 82%, var(--color-black));
    --success-soft: #ECFDF5;
    --warning: #D97706;
    --warning-strong: color-mix(in srgb, var(--warning) 78%, var(--color-black));
    --warning-soft: #FFFBEB;
    --danger: #DC2626;
    --danger-strong: color-mix(in srgb, var(--danger) 82%, var(--color-black));
    --danger-soft: #FEF2F2;
    --neutral: #64748B;
    --neutral-soft: #F1F5F9;
    --info: #3B82F6;
    --info-strong: color-mix(in srgb, var(--info) 78%, var(--color-black));
    --info-soft: #EFF6FF;
    --info-bg: #E8EAF7;
    --info-text: #59649E;
    --highlight: #FFF3B0;

    --border: #DEE1EC;
    --border-soft: #ECEEF5;
    --border-strong: #C8CDDE;
    --focus-ring-color: #626DA8;
    --focus-ring: 0 0 0 3px rgba(98, 109, 168, 0.24);

    --input-bg: #FFFFFF;
    --input-border: #DDE0EB;
    --input-text: #4B536B;
    --button-primary-bg: #626DA8;
    --button-primary-bg-hover: #56639F;
    --button-primary-text: #FFFFFF;
    --button-secondary-bg: #FFFFFF;
    --button-secondary-bg-hover: #EEEFF8;
    --button-secondary-border: #DDE0EB;
    --button-secondary-text: #596079;
    --button-disabled-bg: #F0F0F5;
    --button-disabled-border: #E3E4EB;
    --button-disabled-text: #A6AABC;

    --table-bg: #FCFCFF;
    --table-text: #4B536B;
    --table-record-text: #697089;
    --table-record-font-weight: 450;
    --table-border: #E0E2EC;
    --table-header-bg: #F4F4FA;
    --table-header-text: #4A526A;
    --table-row-bg: #FCFCFF;
    --table-row-hover: #F5F5FB;
    --table-row-border: #ECECF3;

    --header-bg: #F8F8FC;
    --header-border: #E2E3EC;
    --header-title: #384158;
    --header-subtitle: #858BA0;
    --topbar-bg: #F5F5FB;
    --topbar-border: #E2E3EC;
    --topbar-text: #384158;
    --topbar-text-muted: #858BA0;
    --sidebar-bg: #FAFAFD;
    --sidebar-border: #E2E3EC;
    --sidebar-text: #626A82;
    --sidebar-hover: #EEEFF8;
    --sidebar-active-bg: #E7E9F6;
    --sidebar-active-color: #59649E;
    --sidebar-section-title: var(--primary);
    --sidebar-section-divider: var(--border-soft);

    --badge-bg: rgba(98, 109, 168, 0.11);
    --badge-border: rgba(98, 109, 168, 0.26);
    --badge-text: #59649E;
    --empty-bg: #FCFCFF;
    --empty-text: #7B8198;
    --tooltip-bg: #454D68;
    --tooltip-text: #FFFFFF;

    --color-white: #FFFFFF;
    --color-black: #000000;
    --on-primary: var(--button-primary-text);
    --overlay-soft: rgba(15, 23, 42, 0.08);
    --overlay-medium: rgba(15, 23, 42, 0.46);
    --overlay-strong: rgba(8, 13, 28, 0.78);
    --modal-backdrop: rgba(8, 13, 28, 0.58);
    --surface-glass: rgba(255, 255, 255, 0.82);
    --surface-glass-soft: rgba(255, 255, 255, 0.46);
    --surface-highlight: rgba(255, 255, 255, 0.7);

    --chart-blue: #3B82F6;
    --chart-cyan: #0EA5E9;
    --chart-purple: #7C3AED;
    --chart-orange: #F97316;
    --chart-amber: #F59E0B;
    --chart-green: #16A34A;

    /* Paleta analítica oficial — ordem estável em todos os temas. */
    --chart-series-1: var(--primary);
    --chart-series-2: var(--chart-green);
    --chart-series-3: var(--chart-amber);
    --chart-series-4: var(--danger);
    --chart-series-5: var(--chart-purple);
    --chart-series-6: var(--chart-cyan);
    --chart-series-7: var(--chart-orange);
    --chart-series-8: var(--neutral);
    --chart-grid: color-mix(in srgb, var(--neutral) 24%, transparent);
    --chart-axis: color-mix(in srgb, var(--neutral) 34%, transparent);
    --chart-label: var(--text-muted);
    --chart-surface: var(--surface);
    --chart-focus-ring: var(--focus-ring-color);

    /* Contratos semânticos de contraste e estados. */
    --surface-inverse: #0F172A;
    --surface-inverse-text: #FFFFFF;
    --state-success-bg: var(--success-soft);
    --state-success-text: var(--success-strong);
    --state-success-border: var(--success-border);
    --state-warning-bg: var(--warning-soft);
    --state-warning-text: var(--warning-strong);
    --state-warning-border: var(--warning-border);
    --state-danger-bg: var(--danger-soft);
    --state-danger-text: var(--danger-strong);
    --state-danger-border: var(--danger-border);
    --state-info-bg: var(--info-soft);
    --state-info-text: var(--info-strong);
    --state-info-border: var(--info-border);

    /* =========================================================
       Contrato semântico público — Sessão 1 / release 2660
       Os tokens históricos permanecem como implementação interna.
       Novos componentes devem consumir preferencialmente este contrato.
       ========================================================= */
    --color-brand-primary: var(--primary);
    --color-brand-hover: var(--primary-hover);
    --color-brand-active: var(--primary-dark);
    --color-brand-soft: var(--primary-soft);
    --color-brand-subtle: var(--primary-subtle);
    --color-brand-translucent: color-mix(in srgb, var(--primary) 14%, transparent);
    --color-brand-accent: var(--accent);
    --color-brand-focus: var(--focus-ring-color);
    --color-brand-z: var(--accent);

    --color-surface-page: var(--app-bg);
    --color-surface-page-soft: var(--app-bg-soft);
    --color-surface-default: var(--surface);
    --color-surface-subtle: var(--surface-alt);
    --color-surface-muted: var(--surface-soft);
    --color-surface-elevated: var(--surface-elevated);
    --color-surface-field: var(--input-bg);
    --color-surface-hover: var(--primary-subtle);
    --color-surface-selected: var(--primary-soft);
    --color-surface-overlay: var(--modal-backdrop);

    --color-text-primary: var(--title-color);
    --color-text-body: var(--text);
    --color-text-secondary: var(--text-soft);
    --color-text-tertiary: var(--text-muted);
    --color-text-disabled: var(--button-disabled-text);
    --color-text-inverse: var(--surface-inverse-text);
    --color-text-on-brand: var(--primary-contrast);
    --color-text-link: var(--primary);

    --color-border-default: var(--border);
    --color-border-subtle: var(--border-soft);
    --color-border-strong: var(--border-strong);
    --color-border-field: var(--input-border);
    --color-border-focus: var(--focus-ring-color);
    --color-border-divider: var(--border-soft);

    --color-feedback-success: var(--success);
    --color-feedback-success-bg: var(--state-success-bg);
    --color-feedback-success-border: var(--state-success-border);
    --color-feedback-success-text: var(--state-success-text);
    --color-feedback-warning: var(--warning);
    --color-feedback-warning-bg: var(--state-warning-bg);
    --color-feedback-warning-border: var(--state-warning-border);
    --color-feedback-warning-text: var(--state-warning-text);
    --color-feedback-danger: var(--danger);
    --color-feedback-danger-bg: var(--state-danger-bg);
    --color-feedback-danger-border: var(--state-danger-border);
    --color-feedback-danger-text: var(--state-danger-text);
    --color-feedback-info: var(--info);
    --color-feedback-info-bg: var(--state-info-bg);
    --color-feedback-info-border: var(--state-info-border);
    --color-feedback-info-text: var(--state-info-text);
    --color-feedback-neutral: var(--neutral);
    --color-feedback-neutral-bg: var(--neutral-soft);
    --color-feedback-neutral-border: var(--border);
    --color-feedback-neutral-text: var(--text-soft);

    --font-size-body: var(--font-size-md);
    --font-size-helper: var(--font-size-sm);
    --font-size-label: var(--field-label-size);
    --font-size-card-title: var(--font-size-lg);
    --font-size-section-title: var(--font-size-xl);
    --font-size-page-title: var(--font-size-3xl);
    --font-size-metric: var(--font-size-4xl);

    --control-height-compact: var(--control-height-sm);
    --control-height-standard: var(--control-height-md);
    --control-height-comfortable: var(--control-height-lg);
    --button-loading-indicator: var(--primary);

    --motion-fast: var(--duration-fast);
    --motion-standard: var(--duration-normal);
    --motion-slow: var(--duration-slow);
    --ease-enter: var(--ease-emphasized);
    --ease-exit: var(--ease-standard);

    --z-overlay: var(--z-backdrop);
    --layout-header-height: var(--shell-header-height);
    --layout-sidebar-width: 272px;
    --layout-sidebar-collapsed-width: 84px;

    --shadow-xs: 0 1px 2px rgba(48, 56, 85, 0.035);
    --shadow-sm: 0 8px 24px rgba(48, 56, 85, 0.055);
    --shadow-md: 0 18px 44px rgba(48, 56, 85, 0.08);
    --shadow-lg: 0 28px 68px rgba(48, 56, 85, 0.11);
    --shadow-xl: 0 36px 88px rgba(48, 56, 85, 0.14);
    --shadow-modal: 0 32px 90px rgba(22, 30, 55, 0.20);
    --shadow-inset: inset 0 0 0 1px var(--border-soft);
    --shadow-active: inset 3px 0 0 var(--primary);
    --text-shadow-highlight: 0 1px 0 color-mix(in srgb, var(--color-white) 32%, transparent);
    --drop-shadow-sm: 0 18px 22px color-mix(in srgb, var(--title-color) 14%, transparent);
    --drop-shadow-md: 0 18px 38px color-mix(in srgb, var(--title-color) 16%, transparent);

    --success-border: color-mix(in srgb, var(--success) 32%, var(--border));
    --warning-border: color-mix(in srgb, var(--warning) 34%, var(--border));
    --danger-border: color-mix(in srgb, var(--danger) 32%, var(--border));
    --info-border: color-mix(in srgb, var(--info) 28%, var(--border));

    /* Aliases de compatibilidade. Novos componentes devem usar os tokens semânticos acima. */
    --font-xs: var(--font-size-xs);
    --font-sm: var(--font-size-sm);
    --font-md: var(--font-size-md);
    --font-lg: var(--font-size-lg);
    --font-xl: var(--font-size-xl);
    --font-title: var(--font-size-3xl);
    --primary-color: var(--primary);
    --primary-strong: var(--primary-dark);
    --primary-700: var(--primary-dark);
    --primary-border: color-mix(in srgb, var(--primary) 32%, var(--border));
    --primary-soft-border: color-mix(in srgb, var(--primary) 20%, var(--border));
    --color-primary: var(--primary);
    --color-primary-soft: var(--primary-soft);
    --border-color: var(--border);
    --border-subtle: var(--border-soft);
    --border-light: var(--border-soft);
    --border-focus: var(--focus-ring-color);
    --text-primary: var(--title-color);
    --text-secondary: var(--text-soft);
    --text-color: var(--text);
    --text-strong: var(--title-color);
    --text-inverse: var(--primary-contrast);
    --muted-text: var(--text-muted);
    --muted-color: var(--text-muted);
    --surface-muted: var(--surface-alt);
    --surface-card: var(--surface);
    --surface-subtle: var(--surface-soft);
    --surface-2: var(--surface-alt);
    --bg-card: var(--surface);
    --bg-soft: var(--app-bg-soft);
    --bg-page: var(--app-bg);
    --page-bg: var(--app-bg);
    --popover-bg: var(--surface-elevated);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --success-color: var(--success);
    --shadow-soft: var(--shadow-sm);
    --shadow-medium: var(--shadow-md);
    --table-head-weight: var(--font-weight-semibold);

    /* Compatibilidade com a camada Fluent enquanto os módulos são migrados. */
    --ph-font: var(--font-family-base);
    --ph-bg-canvas: var(--app-bg);
    --ph-bg-canvas-2: var(--app-bg-soft);
    --ph-bg-surface: var(--surface-glass);
    --ph-bg-surface-solid: var(--surface);
    --ph-bg-subtle: var(--surface-alt);
    --ph-bg-muted: var(--surface-soft);
    --ph-bg-elevated: var(--surface-elevated);
    --ph-bg-overlay: var(--modal-backdrop);
    --ph-text-primary: var(--title-color);
    --ph-text-secondary: var(--text-soft);
    --ph-text-muted: var(--text-muted);
    --ph-text-inverse: var(--primary-contrast);
    --ph-primary: var(--primary);
    --ph-primary-hover: var(--primary-hover);
    --ph-primary-active: var(--primary-dark);
    --ph-primary-soft: var(--primary-soft);
    --ph-primary-softer: var(--primary-subtle);
    --ph-success: var(--success);
    --ph-success-hover: color-mix(in srgb, var(--success) 84%, var(--color-black));
    --ph-success-soft: var(--success-soft);
    --ph-success-border: var(--success-border);
    --ph-warning: var(--warning);
    --ph-warning-soft: var(--warning-soft);
    --ph-warning-border: var(--warning-border);
    --ph-danger: var(--danger);
    --ph-danger-hover: color-mix(in srgb, var(--danger) 84%, var(--color-black));
    --ph-danger-soft: var(--danger-soft);
    --ph-danger-border: var(--danger-border);
    --ph-info: var(--info);
    --ph-info-soft: var(--info-soft);
    --ph-info-border: var(--info-border);
    --ph-border-subtle: var(--border-soft);
    --ph-border: var(--border);
    --ph-border-strong: var(--border-strong);
    --ph-focus: var(--focus-ring);
    --ph-shadow-xs: var(--shadow-xs);
    --ph-shadow-sm: var(--shadow-sm);
    --ph-shadow-md: var(--shadow-md);
    --ph-shadow-lg: var(--shadow-lg);
    --ph-shadow-modal: var(--shadow-modal);
    --ph-radius-xs: var(--radius-xs);
    --ph-radius-sm: var(--radius-sm);
    --ph-radius-md: var(--radius-md);
    --ph-radius-lg: var(--radius-lg);
    --ph-radius-xl: var(--radius-xl);
    --ph-radius-2xl: var(--radius-2xl);
    --ph-radius-pill: var(--radius-pill);
    --ph-space-1: var(--space-1);
    --ph-space-2: var(--space-2);
    --ph-space-3: var(--space-3);
    --ph-space-4: var(--space-4);
    --ph-space-5: var(--space-5);
    --ph-space-6: var(--space-6);
    --ph-space-7: var(--space-8);
    --ph-space-8: var(--space-10);
    --ph-input-height: var(--field-height);
    --ph-button-height: var(--button-height);
    --ph-topbar-height: 76px;
    --ph-row-height: 58px;
    --ph-transition: var(--duration-fast) var(--ease-emphasized);

    --mindz-bg: var(--app-bg);
    --mindz-surface: var(--surface);
    --mindz-surface-2: var(--surface-alt);
    --mindz-surface-3: var(--surface-soft);
    --mindz-border: var(--border);
    --mindz-border-soft: var(--border-soft);
    --mindz-text: var(--title-color);
    --mindz-text-body: var(--text);
    --mindz-text-muted: var(--text-muted);
    --mindz-primary: var(--primary);
    --mindz-primary-soft: var(--primary-soft);

    /* Alias legado preservado até a migração do shell na Sessão 3. */
    --shell-sidebar-flyout-z: var(--z-flyout);
}

:root:is([data-theme="ocean"], [data-theme="verde"], [data-theme="violet"], [data-theme="graphite"], [data-theme="nossoporto"]) {
    color-scheme: light;
    --surface: #FFFFFF;
    --surface-alt: #F8FAFC;
    --surface-soft: #EEF2F6;
    --surface-elevated: #FFFFFF;
    --card: #FFFFFF;
    --card-bg: #FFFFFF;
    --card-hover-bg: var(--primary-subtle);
    --text: #475569;
    --text-soft: #64748B;
    --text-muted: #667085;
    --muted: #667085;
    --title-color: #334155;
    --subtitle-color: #64748B;
    --placeholder: #8792A5;
    --primary-contrast: #FFFFFF;
    --input-bg: #FFFFFF;
    --input-text: #475569;
    --button-primary-text: #FFFFFF;
    --button-secondary-bg: #FFFFFF;
    --button-secondary-text: #475569;
    --table-bg: #FFFFFF;
    --table-text: #475569;
    --table-record-text: #475569;
    --table-record-font-weight: 400;
    --table-row-bg: #FFFFFF;
    --table-header-text: #64748B;
    --badge-bg: color-mix(in srgb, var(--primary) 11%, transparent);
    --badge-border: color-mix(in srgb, var(--primary) 26%, var(--border));
    --badge-text: var(--primary);
    --info: var(--primary);
    --info-soft: var(--primary-soft);
    --info-border: color-mix(in srgb, var(--primary) 28%, var(--border));
    --info-bg: var(--primary-soft);
    --info-text: var(--primary);
    --chart-blue: var(--primary);
    --chart-cyan: color-mix(in srgb, var(--primary) 72%, #0EA5E9);
}

:root[data-theme="ocean"] {
    --bg: #F4F8FF;
    --app-bg: #F4F8FF;
    --app-bg-soft: #EAF2FF;
    --primary: #155BC2;
    --primary-hover: #104BA3;
    --primary-dark: #0E3D87;
    --primary-soft: #EAF2FF;
    --primary-subtle: #F5F9FF;
    --accent: #64A2F1;
    --accent-soft: #EAF2FF;
    --border: #D7E4F7;
    --border-soft: #E7EFFB;
    --border-strong: #BDD2EF;
}

:root[data-theme="verde"] {
    --bg: #F6FBF8;
    --app-bg: #F6FBF8;
    --app-bg-soft: #E8F4EE;
    --primary: #2F6F55;
    --primary-hover: #285E49;
    --primary-dark: #1E4938;
    --primary-soft: #E8F4EE;
    --primary-subtle: #F3FAF6;
    --accent: #70A98E;
    --accent-soft: #E8F4EE;
    --border: #D6E8DE;
    --border-soft: #E8F1EC;
    --border-strong: #BCD9C9;
}

:root[data-theme="violet"] {
    --bg: #FBF8FF;
    --app-bg: #FBF8FF;
    --app-bg-soft: #F4E9F8;
    --primary: #8D4F9F;
    --primary-hover: #7C438D;
    --primary-dark: #653573;
    --primary-soft: #F4E9F8;
    --primary-subtle: #FBF5FD;
    --accent: #B983C4;
    --accent-soft: #F4E9F8;
    --border: #E7D9EF;
    --border-soft: #F0E7F5;
    --border-strong: #D6BFDF;
}

:root[data-theme="graphite"] {
    --bg: #F5F6F8;
    --app-bg: #F5F6F8;
    --app-bg-soft: #EEF2F6;
    --primary: #344054;
    --primary-hover: #1F2937;
    --primary-dark: #111827;
    --primary-soft: #EEF2F6;
    --primary-subtle: #F7F9FB;
    --accent: #667085;
    --accent-soft: #EEF2F6;
    --border: #DCE3EB;
    --border-soft: #E8EDF3;
    --border-strong: #C4CDD8;
}

:root[data-theme="nossoporto"] {
    /* Paleta oficial informada para o tema Nosso Porto. */
    --porto-turquesa: #4BB9BC;
    --porto-turquesa-claro: #64C9C8;
    --porto-turquesa-escuro: #33AAB2;
    --porto-azul: #004E99;
    --porto-verde: #98BE3F;

    --bg: #F4FAFA;
    --app-bg: #F4FAFA;
    --app-bg-soft: #E7F5F5;
    --surface-soft: #ECF7F7;
    --primary: var(--porto-azul);
    --primary-hover: #003F7D;
    --primary-dark: #00356A;
    --primary-soft: #E1F2F5;
    --primary-subtle: #F0F9F9;
    --accent: var(--porto-turquesa);
    --accent-soft: #DFF4F4;
    --success: var(--porto-verde);
    --success-strong: #7FA52E;
    --success-soft: #F0F6DF;
    --info: var(--porto-turquesa);
    --info-soft: #DFF4F4;
    --info-bg: #EAF8F8;
    --info-text: #146D75;
    --text: #34475A;
    --text-soft: #52677A;
    --text-muted: #667789;
    --title-color: #17324A;
    --subtitle-color: #587083;
    --border: #BBDCDD;
    --border-soft: #DCEEEF;
    --border-strong: #83CACC;
    --chart-blue: var(--porto-azul);
    --chart-cyan: var(--porto-turquesa);
    --chart-green: var(--porto-verde);
    --highlight: #EFF6D9;
    --ph-home-accent: var(--porto-turquesa);
    --ph-home-line: #BBDCDD;

    /* Shell: turquesa + azul no topo e verde como assinatura. */
    --mindz-feedback-premium-bg:
        radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.20), transparent 31%),
        radial-gradient(circle at 88% 100%, rgba(152, 190, 63, 0.31), transparent 30%),
        linear-gradient(108deg, #4BB9BC 0%, #33AAB2 20%, #004E99 58%, #004E99 100%);
    --mindz-feedback-premium-border: var(--porto-verde);
    --mindz-header-shadow: 0 18px 46px rgba(0, 78, 153, 0.22);

    /* Menu lateral com as três cores sem perder legibilidade. */
    --mindz-sidebar-bg-start: color-mix(in srgb, var(--porto-turquesa) 17%, #FFFFFF 83%);
    --mindz-sidebar-bg-end: color-mix(in srgb, var(--porto-verde) 12%, #FFFFFF 88%);
    --mindz-sidebar-border: color-mix(in srgb, var(--porto-azul) 22%, #FFFFFF 78%);
    --mindz-sidebar-icon: var(--porto-azul);
    --mindz-sidebar-icon-hover: #003F7D;
    --mindz-sidebar-item-hover: color-mix(in srgb, var(--porto-turquesa) 18%, #FFFFFF 82%);
    --mindz-sidebar-item-active: linear-gradient(
        90deg,
        color-mix(in srgb, var(--porto-turquesa) 23%, #FFFFFF 77%),
        color-mix(in srgb, var(--porto-verde) 17%, #FFFFFF 83%)
    );
    --mindz-sidebar-item-active-border: color-mix(in srgb, var(--porto-verde) 64%, var(--porto-azul) 36%);
    --mindz-sidebar-item-shadow:
        0 8px 22px rgba(0, 78, 153, 0.11),
        inset 3px 0 0 var(--porto-verde);
}

:root:is([data-theme="ocean"], [data-theme="verde"], [data-theme="violet"], [data-theme="graphite"], [data-theme="nossoporto"]) {
    --card-border: var(--border-soft);
    --input-border: var(--border);
    --button-primary-bg: var(--primary);
    --button-primary-bg-hover: var(--primary-hover);
    --button-secondary-bg-hover: var(--primary-subtle);
    --button-secondary-border: var(--border);
    --table-header-bg: color-mix(in srgb, var(--primary) 7%, #FFFFFF);
    --table-border: var(--border-soft);
    --table-row-hover: color-mix(in srgb, var(--primary) 6%, #FFFFFF);
    --table-row-border: var(--border-soft);
    --focus-ring-color: var(--primary);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
    --header-bg: var(--surface);
    --header-border: var(--border);
    --header-title: var(--title-color);
    --header-subtitle: var(--text-muted);
    --sidebar-bg: var(--surface);
    --sidebar-border: var(--border);
    --sidebar-text: var(--text-soft);
    --sidebar-hover: var(--primary-subtle);
    --sidebar-active-bg: var(--primary-soft);
    --sidebar-active-color: var(--primary);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0A1017;
    --app-bg: #0A1017;
    --app-bg-soft: #0E141D;
    --surface: #121A24;
    --surface-alt: #0F161F;
    --surface-soft: #18222E;
    --surface-elevated: #16202B;
    --card: #121A24;
    --card-bg: #121A24;
    --card-border: #273445;
    --card-hover-bg: #172230;

    --text: #E7EDF5;
    --text-soft: #CDD7E4;
    --text-muted: #9AA8BA;
    --muted: #9AA8BA;
    --muted-2: #748399;
    --title-color: #F8FAFC;
    --subtitle-color: #9AA8BA;
    --placeholder: #748399;

    --primary: #84A3FF;
    --primary-hover: #9CB5FF;
    --primary-dark: #29468A;
    --primary-soft: #16233F;
    --primary-subtle: #101929;
    --primary-contrast: #09111A;
    --avatar-background: var(--primary-soft);
    --avatar-foreground: var(--text);
    --accent: #D6B96A;
    --accent-soft: #2E2918;

    --success: #4FD08C;
    --success-strong: color-mix(in srgb, var(--success) 78%, var(--color-white));
    --success-soft: #12291D;
    --warning: #F3BF4E;
    --warning-strong: color-mix(in srgb, var(--warning) 76%, var(--color-white));
    --warning-soft: #33260A;
    --danger: #F27A7A;
    --danger-strong: color-mix(in srgb, var(--danger) 76%, var(--color-white));
    --danger-soft: #3B1D24;
    --neutral: #9AA8BA;
    --neutral-soft: #18222E;
    --info: #78AAFF;
    --info-strong: color-mix(in srgb, var(--info) 76%, var(--color-white));
    --info-soft: #16253D;
    --info-bg: #142131;
    --info-text: #C7D8FF;
    --highlight: #665C20;

    --border: #273445;
    --border-soft: #1F2A39;
    --border-strong: #405167;
    --focus-ring-color: #9CB5FF;
    --focus-ring: 0 0 0 3px rgba(156, 181, 255, 0.25);

    --input-bg: #101821;
    --input-border: #273445;
    --input-text: #E7EDF5;
    --button-primary-bg: #84A3FF;
    --button-primary-bg-hover: #9CB5FF;
    --button-primary-text: #09111A;
    --button-secondary-bg: #18222E;
    --button-secondary-bg-hover: #223041;
    --button-secondary-border: #273445;
    --button-secondary-text: #CDD7E4;
    --button-disabled-bg: #141B24;
    --button-disabled-border: #1F2A39;
    --button-disabled-text: #748399;

    --table-bg: #121A24;
    --table-text: #E7EDF5;
    --table-record-text: #CDD7E4;
    --table-record-font-weight: 400;
    --table-border: #273445;
    --table-header-bg: #101821;
    --table-header-text: #E7EDF5;
    --table-row-bg: #121A24;
    --table-row-hover: #172230;
    --table-row-border: #1F2A39;

    --header-bg: #121A24;
    --header-border: #273445;
    --header-title: #F8FAFC;
    --header-subtitle: #9AA8BA;
    --topbar-bg: #0E141D;
    --topbar-border: #273445;
    --topbar-text: #F8FAFC;
    --topbar-text-muted: #9AA8BA;
    --sidebar-bg: #121A24;
    --sidebar-border: #273445;
    --sidebar-text: #CDD7E4;
    --sidebar-hover: #162338;
    --sidebar-active-bg: #162338;
    --sidebar-active-color: #D7E2FF;
    --sidebar-section-title: #C6D3F2;
    --sidebar-section-divider: #1F2A39;

    --badge-bg: rgba(132, 163, 255, 0.14);
    --badge-border: rgba(132, 163, 255, 0.30);
    --badge-text: #D7E2FF;
    --empty-bg: #121A24;
    --empty-text: #9AA8BA;
    --tooltip-bg: #E7EDF5;
    --tooltip-text: #09111A;

    --overlay-soft: rgba(0, 0, 0, 0.18);
    --overlay-medium: rgba(0, 0, 0, 0.48);
    --overlay-strong: rgba(0, 0, 0, 0.72);
    --modal-backdrop: rgba(0, 0, 0, 0.66);
    --surface-glass: rgba(18, 26, 36, 0.88);
    --surface-glass-soft: rgba(18, 26, 36, 0.56);
    --surface-highlight: rgba(255, 255, 255, 0.08);

    --chart-blue: #78AAFF;
    --chart-cyan: #58B3F5;
    --chart-purple: #AA95FF;
    --chart-orange: #F59A59;
    --chart-amber: #F3BF4E;
    --chart-green: #4FD08C;
    --surface-inverse: #E7EDF5;
    --surface-inverse-text: #09111A;
    --chart-grid: color-mix(in srgb, var(--neutral) 26%, transparent);
    --chart-axis: color-mix(in srgb, var(--neutral) 38%, transparent);
    --chart-label: var(--text-muted);
    --shadow-color: var(--color-black);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.42);
    --shadow-xl: 0 32px 86px rgba(0, 0, 0, 0.48);
    --shadow-modal: 0 32px 90px rgba(0, 0, 0, 0.54);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--app-bg);
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34rem),
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30rem),
        linear-gradient(180deg, var(--app-bg-soft) 0%, var(--app-bg) 100%);
    color: var(--text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:root[data-theme="dark"] body {
    background:
        radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34rem),
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 30rem),
        linear-gradient(180deg, var(--app-bg-soft) 0%, var(--app-bg) 100%);
}

::selection {
    background: color-mix(in srgb, var(--primary) 28%, transparent);
    color: var(--title-color);
}

a {
    color: inherit;
    text-decoration: none;
}

img,
video,
canvas {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--title-color);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

strong,
b {
    font-weight: var(--font-weight-semibold);
}

p {
    text-wrap: pretty;
}

button,
.button,
.btn,
[class*="button-"] {
    font-weight: var(--font-weight-semibold);
}



/* Os estilos visuais de botões, campos, selects e escolhas foram movidos para
   mindz_components.css. Foundations mantém somente reset, tokens e foco global. */

:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"]),
    [role="button"]
):focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

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

.mindz-surface {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.mindz-stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-4));
}

.mindz-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-3));
}

.mindz-icon {
    width: var(--icon-size, var(--icon-size-md));
    height: var(--icon-size, var(--icon-size-md));
    flex: 0 0 auto;
    color: currentColor;
}

.mindz-clickable {
    cursor: pointer;
    transition: var(--transition-interactive);
}

@media (max-width: 1024px) {
    :root {
        --table-min-width: 960px;
        --page-gap: var(--space-5);
    }
}

@media (max-width: 768px) {
    :root {
        --table-min-width: 720px;
        --page-gap: var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}

@media (forced-colors: active) {
    :where(a[href], button, input, select, textarea, [role="button"]):focus-visible {
        outline: 2px solid CanvasText;
    }
}
}

@layer mindz.foundations {
/* =========================================================
   MindZ 26786 — identidade cromática estrutural dos temas
   Cada tema altera somente estes tokens fundamentais.
   ========================================================= */
:root,
:root[data-theme="light"] {
    --theme-primary: #626DA8;
    --theme-primary-light: #7782BA;
    --theme-primary-dark: #465188;
    --theme-primary-rgb: 98, 109, 168;
    --theme-on-primary: #FFFFFF;
    --theme-on-primary-muted: rgba(255, 255, 255, 0.80);
}

:root[data-theme="ocean"] {
    --theme-primary: #155BC2;
    --theme-primary-light: #2B73D3;
    --theme-primary-dark: #0E3D87;
    --theme-primary-rgb: 21, 91, 194;
    --theme-on-primary: #FFFFFF;
    --theme-on-primary-muted: rgba(255, 255, 255, 0.80);
}

:root[data-theme="verde"] {
    --theme-primary: #2F6F55;
    --theme-primary-light: #43866C;
    --theme-primary-dark: #1E4938;
    --theme-primary-rgb: 47, 111, 85;
    --theme-on-primary: #FFFFFF;
    --theme-on-primary-muted: rgba(255, 255, 255, 0.80);
}

:root[data-theme="violet"] {
    --theme-primary: #8D4F9F;
    --theme-primary-light: #A565B6;
    --theme-primary-dark: #653573;
    --theme-primary-rgb: 141, 79, 159;
    --theme-on-primary: #FFFFFF;
    --theme-on-primary-muted: rgba(255, 255, 255, 0.80);
}

:root[data-theme="graphite"] {
    --theme-primary: #344054;
    --theme-primary-light: #4C596D;
    --theme-primary-dark: #111827;
    --theme-primary-rgb: 52, 64, 84;
    --theme-on-primary: #FFFFFF;
    --theme-on-primary-muted: rgba(255, 255, 255, 0.80);
}

:root[data-theme="nossoporto"] {
    --theme-primary: #004E99;
    --theme-primary-light: #4BB9BC;
    --theme-primary-dark: #00356A;
    --theme-primary-rgb: 0, 78, 153;
    --theme-on-primary: #FFFFFF;
    --theme-on-primary-muted: rgba(255, 255, 255, 0.86);
}

:root[data-theme="dark"] {
    --theme-primary: #365CAA;
    --theme-primary-light: #4B70BE;
    --theme-primary-dark: #223A73;
    --theme-primary-rgb: 54, 92, 170;
    --theme-on-primary: #FFFFFF;
    --theme-on-primary-muted: rgba(255, 255, 255, 0.80);
}
}


/* =========================================================
   MindZ 27008 — Nosso Porto aplicado ao cabeçalho global e aos pop-ups
   Paleta institucional:
   Turquesa #4BB9BC | Azul #004E99 | Verde #98BE3F
   ========================================================= */
:root[data-theme="nossoporto"] {
    --theme-primary: #004E99;
    --theme-primary-light: #4BB9BC;
    --theme-primary-dark: #003B75;
    --theme-primary-rgb: 0, 78, 153;
    --theme-secondary: #4BB9BC;
    --theme-secondary-rgb: 75, 185, 188;
    --theme-accent: #98BE3F;
    --theme-accent-rgb: 152, 190, 63;
    --theme-on-primary: #FFFFFF;
    --theme-on-primary-muted: rgba(255, 255, 255, 0.86);

    /* O mesmo contrato visual é consumido pelo cabeçalho fixo e pelos pop-ups. */
    --mindz-header-start: #4BB9BC;
    --mindz-header-middle: #004E99;
    --mindz-header-end: #003B75;
    --mindz-header-text: #FFFFFF;
    --mindz-header-text-muted: rgba(255, 255, 255, 0.86);
    --mindz-feedback-premium-bg:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.22), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(152, 190, 63, 0.26), transparent 25%),
        linear-gradient(180deg, transparent calc(100% - 5px), #98BE3F calc(100% - 5px)),
        linear-gradient(110deg, #4BB9BC 0%, #4BB9BC 27%, #1596AE 43%, #004E99 69%, #003B75 100%);
    --mindz-feedback-premium-border: rgba(152, 190, 63, 0.68);
    --mindz-header-border: rgba(152, 190, 63, 0.68);
    --mindz-header-shadow:
        0 22px 54px rgba(0, 78, 153, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* =========================================================
   MindZ 27101 — Identidade SaaS premium multicolor
   As cores secundária/terciária são estruturais do tema.
   Não alteram layout nem gráficos; refinam shell e interações.
   ========================================================= */
:root,
:root[data-theme="light"] {
    --theme-secondary: #4CB7C2;
    --theme-secondary-rgb: 76, 183, 194;
    --theme-tertiary: #7A48B2;
    --theme-tertiary-rgb: 122, 72, 178;
    --theme-line: #A25CFF;
    --theme-line-rgb: 162, 92, 255;
    --theme-shell-gradient: linear-gradient(108deg, #4CB7C2 0%, #5664B8 48%, #7A48B2 100%);
}

:root[data-theme="ocean"] {
    --theme-secondary: #0C91A8;
    --theme-secondary-rgb: 12, 145, 168;
    --theme-tertiary: #173B82;
    --theme-tertiary-rgb: 23, 59, 130;
    --theme-line: #48C9B9;
    --theme-line-rgb: 72, 201, 185;
    --theme-shell-gradient: linear-gradient(108deg, #0C91A8 0%, #155BC2 48%, #173B82 100%);
    --accent: #22AEB4;
    --accent-soft: #E4F7F7;
}

:root[data-theme="verde"] {
    --theme-secondary: #278C91;
    --theme-secondary-rgb: 39, 140, 145;
    --theme-tertiary: #526F39;
    --theme-tertiary-rgb: 82, 111, 57;
    --theme-line: #A6C95A;
    --theme-line-rgb: 166, 201, 90;
    --theme-shell-gradient: linear-gradient(108deg, #278C91 0%, #2F6F55 49%, #526F39 100%);
    --accent: #4AAE91;
    --accent-soft: #E7F6F0;
}

:root[data-theme="violet"] {
    --theme-secondary: #5B6FC4;
    --theme-secondary-rgb: 91, 111, 196;
    --theme-tertiary: #B14C83;
    --theme-tertiary-rgb: 177, 76, 131;
    --theme-line: #F06FB3;
    --theme-line-rgb: 240, 111, 179;
    --theme-shell-gradient: linear-gradient(108deg, #5B6FC4 0%, #8D4F9F 50%, #B14C83 100%);
    --accent: #C06AAE;
    --accent-soft: #FAECF5;
}

:root[data-theme="graphite"] {
    --theme-secondary: #5B7899;
    --theme-secondary-rgb: 91, 120, 153;
    --theme-tertiary: #2E5DA8;
    --theme-tertiary-rgb: 46, 93, 168;
    --theme-line: #6EA7F3;
    --theme-line-rgb: 110, 167, 243;
    --theme-shell-gradient: linear-gradient(108deg, #5B7899 0%, #344054 50%, #2E5DA8 100%);
    --accent: #5B7FAE;
    --accent-soft: #ECF2F9;
}

:root[data-theme="nossoporto"] {
    --theme-secondary: #4BB9BC;
    --theme-secondary-rgb: 75, 185, 188;
    --theme-tertiary: #004E99;
    --theme-tertiary-rgb: 0, 78, 153;
    --theme-line: #98BE3F;
    --theme-line-rgb: 152, 190, 63;
    --theme-shell-gradient: linear-gradient(108deg, #4BB9BC 0%, #33AAB2 20%, #004E99 58%, #004E99 100%);
}

:root[data-theme="dark"] {
    --theme-secondary: #234C84;
    --theme-secondary-rgb: 35, 76, 132;
    --theme-tertiary: #563D84;
    --theme-tertiary-rgb: 86, 61, 132;
    --theme-line: #42C7D9;
    --theme-line-rgb: 66, 199, 217;
    --theme-shell-gradient: linear-gradient(108deg, #234C84 0%, #252B48 50%, #563D84 100%);
    --accent: #42C7D9;
    --accent-soft: #102B34;
}