/* --------------------------------------------------------------------------
   StockFlow — tokens oficiais do design system
   --------------------------------------------------------------------------
   Única fonte de verdade para cor, tipografia, espaçamento, geometria,
   elevação, movimento e dimensões da interface Web autenticada.

   Regras:
   - componentes consomem apenas tokens --sf-*;
   - cores literais ficam neste ficheiro, em impressão ou no alto contraste;
   - os nomes semânticos não descrevem uma página específica;
   - o modo escuro substitui semântica, não a estrutura dos componentes.
---------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Paleta primitiva ------------------------------------------------------ */
  --sf-white: #ffffff;
  --sf-black: #000000;
  --sf-navy-975: #030e1f;
  --sf-navy-950: #071426;
  --sf-navy-925: #07162e;
  --sf-navy-900: #081a35;
  --sf-navy-850: #0b1d3a;
  --sf-navy-800: #0b2550;
  --sf-navy-700: #103160;
  --sf-blue-800: #1465e9;
  --sf-blue-700: #1d4ed8;
  --sf-blue-650: #1d7fe8;
  --sf-blue-600: #2563eb;
  --sf-blue-400: #60a5fa;
  --sf-blue-200: #bfdbfe;
  --sf-blue-100: #dbeafe;
  --sf-blue-50: #eff6ff;
  --sf-teal-700: #0f9f91;
  --sf-teal-600: #0ea5a5;
  --sf-teal-500: #14b8a6;
  --sf-teal-400: #2dd4bf;
  --sf-teal-50: #e9fbf8;
  --sf-slate-900: #0f172a;
  --sf-slate-800: #1e293b;
  --sf-slate-700: #334155;
  --sf-slate-600: #475569;
  --sf-slate-550: #52627a;
  --sf-slate-500: #64748b;
  --sf-slate-450: #718096;
  --sf-slate-400: #94a3b8;
  --sf-slate-300: #cbd5e1;
  --sf-slate-250: #d7dce3;
  --sf-slate-200: #e2e8f0;
  --sf-slate-150: #e5e7eb;
  --sf-slate-100: #f1f5f9;
  --sf-slate-75: #f4f7fb;
  --sf-slate-50: #f8fafc;
  --sf-slate-25: #fbfdff;

  /* Identidade ----------------------------------------------------------- */
  --sf-navy: var(--sf-navy-850);
  --sf-navy-2: var(--sf-navy-700);
  --sf-blue: var(--sf-blue-600);
  --sf-teal: var(--sf-teal-500);
  --sf-brand-navy: var(--sf-navy-850);
  --sf-brand-blue: var(--sf-blue-600);
  --sf-brand-blue-hover: var(--sf-blue-700);
  --sf-brand-teal: var(--sf-teal-500);
  --sf-brand-gradient: linear-gradient(
    135deg,
    var(--sf-blue-600) 0%,
    var(--sf-blue-650) 52%,
    var(--sf-teal-500) 100%
  );
  --sf-action-gradient: linear-gradient(135deg, var(--sf-primary), var(--sf-blue-650));
  --sf-action-gradient-hover: linear-gradient(135deg, var(--sf-primary-hover), var(--sf-primary));
  --sf-accent-gradient: linear-gradient(135deg, var(--sf-accent), var(--sf-teal-600));
  --sf-soft-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--sf-primary) 8%, transparent),
    color-mix(in srgb, var(--sf-secondary) 6%, transparent)
  );

  /* Acções e estados ----------------------------------------------------- */
  --sf-primary: #2563eb;
  --sf-primary-hover: var(--sf-blue-700);
  --sf-primary-soft: var(--sf-blue-50);
  --sf-primary-soft-strong: var(--sf-blue-100);
  --sf-secondary: #14b8a6;
  --sf-secondary-hover: var(--sf-teal-700);
  --sf-secondary-soft: #ecfdfb;
  --sf-accent: var(--sf-secondary);
  --sf-accent-hover: var(--sf-secondary-hover);
  --sf-accent-soft: var(--sf-secondary-soft);

  --sf-success: #16a34a;
  --sf-success-soft: #ecfdf3;
  --sf-success-text: #166534;
  --sf-success-border: #86efac;
  --sf-warning: #f97316;
  --sf-warning-soft: #fff7ed;
  --sf-warning-text: #9a3412;
  --sf-warning-border: #fed7aa;
  --sf-danger: #dc2626;
  --sf-danger-soft: #fef2f2;
  --sf-danger-text: #991b1b;
  --sf-danger-border: #fecaca;
  --sf-error: var(--sf-danger);
  --sf-info: var(--sf-primary);
  --sf-info-soft: var(--sf-primary-soft);
  --sf-info-text: var(--sf-primary);
  --sf-info-border: var(--sf-border);

  /* Superfícies ---------------------------------------------------------- */
  --sf-bg: #f4f7fb;
  --sf-bg-decorative: color-mix(in srgb, var(--sf-primary) 7%, transparent);
  --sf-surface: #ffffff;
  --sf-surface-raised: var(--sf-white);
  --sf-surface-alt: var(--sf-slate-50);
  --sf-surface-subtle: var(--sf-slate-25);
  --sf-surface-muted: var(--sf-slate-100);
  --sf-surface-hover: #f7fbff;
  --sf-surface-selected: var(--sf-primary-soft);
  --sf-surface-inverse: var(--sf-navy-850);
  --sf-surface-inverse-strong: var(--sf-navy-950);
  --sf-surface-scrim: color-mix(in srgb, var(--sf-navy-975) 72%, transparent);
  --sf-surface-glass: color-mix(in srgb, var(--sf-surface) 92%, transparent);

  --sf-border: var(--sf-slate-200);
  --sf-border-strong: var(--sf-slate-300);
  --sf-border-subtle: color-mix(in srgb, var(--sf-border) 82%, transparent);
  --sf-border-inverse: color-mix(in srgb, var(--sf-white) 10%, transparent);
  --sf-border-inverse-strong: color-mix(in srgb, var(--sf-white) 18%, transparent);
  --sf-input-bg: var(--sf-white);
  --sf-input-shadow: inset 0 1px 2px color-mix(in srgb, var(--sf-slate-900) 1.5%, transparent);
  --sf-grid-header: var(--sf-slate-50);
  --sf-grid-row: var(--sf-white);
  --sf-grid-row-alt: var(--sf-slate-50);
  --sf-grid-row-hover: var(--sf-surface-hover);
  --sf-pagination-bg: var(--sf-surface-subtle);

  /* Texto --------------------------------------------------------------- */
  --sf-text: var(--sf-navy-850);
  --sf-text-secondary: var(--sf-slate-550);
  --sf-text-muted: var(--sf-slate-450);
  --sf-text-subtle: var(--sf-slate-400);
  --sf-text-inverse: var(--sf-white);
  --sf-text-inverse-muted: color-mix(in srgb, var(--sf-blue-50) 78%, transparent);
  --sf-text-inverse-subtle: color-mix(in srgb, var(--sf-blue-50) 70%, transparent);
  --sf-text-on-primary: var(--sf-white);
  --sf-text-on-secondary: #111827;
  --sf-link: var(--sf-primary);
  --sf-link-hover: var(--sf-primary-hover);

  /* Navegação lateral ---------------------------------------------------- */
  --sf-sidebar-width: 15.5rem;
  --sf-sidebar-bg: var(--sf-navy-900);
  --sf-sidebar-bg-2: var(--sf-navy-800);
  --sf-sidebar-text: var(--sf-blue-100);
  --sf-sidebar-text-strong: var(--sf-white);
  --sf-sidebar-muted: #8fa7c7;
  --sf-sidebar-meta: #bdd0e9;
  --sf-sidebar-border: color-mix(in srgb, var(--sf-white) 8%, transparent);
  --sf-sidebar-hover: color-mix(in srgb, var(--sf-white) 5.5%, transparent);
  --sf-sidebar-progress: color-mix(in srgb, var(--sf-white) 12%, transparent);
  --sf-sidebar-active-border: color-mix(in srgb, var(--sf-blue-400) 28%, transparent);
  --sf-sidebar-active-bg: linear-gradient(135deg, var(--sf-blue-800), var(--sf-blue-600));
  --sf-sidebar-active-shadow: 0 12px 25px color-mix(in srgb, var(--sf-primary) 28%, transparent);
  --sf-sidebar-child-border: color-mix(in srgb, var(--sf-blue-400) 20%, transparent);
  --sf-sidebar-child-text: var(--sf-blue-200);
  --sf-sidebar-child-bg: color-mix(in srgb, var(--sf-primary) 14%, transparent);
  --sf-sidebar-decoration: color-mix(in srgb, var(--sf-primary) 20%, transparent);
  --sf-sidebar-gradient: linear-gradient(180deg, var(--sf-sidebar-bg), var(--sf-sidebar-bg-2));
  --sf-sidebar-progress-gradient: linear-gradient(90deg, var(--sf-blue-400), var(--sf-teal-400));
  --sf-sidebar-footer-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--sf-white) 8%, transparent),
    color-mix(in srgb, var(--sf-primary) 13%, transparent)
  );

  /* Autenticação --------------------------------------------------------- */
  --sf-auth-bg: var(--sf-slate-75);
  --sf-auth-grid: color-mix(in srgb, var(--sf-primary) 9%, transparent);
  --sf-auth-brand-bg: linear-gradient(
    145deg,
    var(--sf-navy-925) 0%,
    var(--sf-navy-850) 52%,
    var(--sf-navy-700) 100%
  );
  --sf-auth-brand-primary-glow: color-mix(in srgb, var(--sf-primary) 38%, transparent);
  --sf-auth-brand-secondary-glow: color-mix(in srgb, var(--sf-secondary) 20%, transparent);
  --sf-auth-feature-bg: color-mix(in srgb, var(--sf-white) 5.5%, transparent);
  --sf-auth-ring-soft: color-mix(in srgb, var(--sf-white) 2.5%, transparent);
  --sf-auth-ring-faint: color-mix(in srgb, var(--sf-white) 1.8%, transparent);
  --sf-auth-toggle-bg: color-mix(in srgb, var(--sf-navy-850) 75%, transparent);
  --sf-auth-shell-border: color-mix(in srgb, var(--sf-navy-850) 8%, transparent);

  /* Documentos embutidos ------------------------------------------------- */
  --sf-document-bg: var(--sf-white);
  --sf-document-text: #111827;
  --sf-document-muted: #4b5563;
  --sf-document-subtle: #6b7280;
  --sf-document-border: var(--sf-slate-250);
  --sf-document-rule: #d1d5db;
  --sf-document-row-border: var(--sf-slate-150);

  /* Tipografia ----------------------------------------------------------- */
  --sf-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sf-font-family-document: Inter, Arial, sans-serif;
  --sf-font-size-2xs: .6875rem;
  --sf-font-size-xs: .75rem;
  --sf-font-size-sm: .875rem;
  --sf-font-size-md: 1rem;
  --sf-font-size-lg: 1.125rem;
  --sf-font-size-xl: 1.5rem;
  --sf-font-size-2xl: 2rem;
  --sf-font-size-3xl: 2.5rem;
  --sf-font-weight-regular: 400;
  --sf-font-weight-medium: 500;
  --sf-font-weight-semibold: 650;
  --sf-font-weight-bold: 750;
  --sf-font-weight-extrabold: 850;
  --sf-font-weight-black: 900;
  --sf-line-height-tight: 1.2;
  --sf-line-height-normal: 1.5;
  --sf-line-height-relaxed: 1.7;
  --sf-letter-spacing-tight: -.025em;
  --sf-letter-spacing-wide: .08em;

  /* Espaçamento ---------------------------------------------------------- */
  --sf-spacing-0: 0;
  --sf-spacing-1: .25rem;
  --sf-spacing-2: .5rem;
  --sf-spacing-3: .75rem;
  --sf-spacing-4: 1rem;
  --sf-spacing-5: 1.25rem;
  --sf-spacing-6: 1.5rem;
  --sf-spacing-7: 1.75rem;
  --sf-spacing-8: 2rem;
  --sf-spacing-10: 2.5rem;
  --sf-spacing-12: 3rem;
  --sf-spacing-16: 4rem;

  /* Geometria e dimensões ------------------------------------------------ */
  --sf-radius-xs: .35rem;
  --sf-radius-sm: .55rem;
  --sf-radius: .75rem;
  --sf-radius-lg: 1rem;
  --sf-radius-xl: 1.25rem;
  --sf-radius-2xl: 1.5rem;
  --sf-radius-pill: 9999px;
  --sf-control-height-sm: 2.25rem;
  --sf-control-height: 2.75rem;
  --sf-control-height-md: var(--sf-control-height);
  --sf-control-height-lg: 3rem;
  --sf-touch-target: 2.75rem;
  --sf-page-max-width: 80rem;
  --sf-page-wide-max-width: 95rem;
  --sf-auth-max-width: 73.75rem;
  --sf-modal-max-width: 48rem;
  --sf-modal-width-compact: 30rem;
  --sf-modal-width-standard: 42rem;
  --sf-modal-width-wide: 58rem;
  --sf-modal-width-xwide: 72rem;
  --sf-modal-width-receipt: 48rem;
  --sf-modal-current-width: var(--sf-modal-width-standard);
  --sf-operations-accent: var(--sf-primary);
  --sf-topbar-height: 4.55rem;
  --sf-page-gutter: var(--sf-spacing-5);
  --sf-section-gap: var(--sf-spacing-6);
  --sf-card-padding: var(--sf-spacing-4);
  --sf-card-padding-lg: var(--sf-spacing-5);
  --sf-table-cell-padding-x: var(--sf-spacing-4);
  --sf-table-cell-padding-y: .8rem;
  --sf-grid-min-column: 15rem;

  /* Densidade visual unificada ------------------------------------------ */
  --sf-control-height-compact: 2.4rem;
  --sf-control-height-mobile: 2.75rem;
  --sf-control-padding-x: .7rem;
  --sf-control-padding-y: .48rem;
  --sf-font-size-control: .8rem;
  --sf-font-size-label: .75rem;
  --sf-line-height-control: 1.35;
  --sf-form-column-gap: 1.1rem;
  --sf-form-row-gap: .95rem;
  --sf-form-gap: var(--sf-spacing-5);
  --sf-form-section-gap: var(--sf-spacing-5);
  --sf-form-section-padding: var(--sf-spacing-5);
  --sf-form-section-radius: var(--sf-radius-xl);
  --sf-form-label-gap: .35rem;
  --sf-form-help-gap: .3rem;
  --sf-form-textarea-min-height: 5.5rem;
  --sf-form-fieldset-padding: var(--sf-spacing-4);
  --sf-form-choice-min-height: 3.75rem;
  --sf-card-radius-compact: .9rem;
  --sf-modal-gutter: 1rem;
  --sf-modal-width-wide: 58rem;
  --sf-modal-max-height: calc(100dvh - 2rem);
  --sf-table-cell-padding-x-compact: .85rem;
  --sf-table-cell-padding-y-compact: .7rem;

  /* Tabelas, filtros, acções e paginação — Fase 5 ---------------------- */
  --sf-filter-card-padding: var(--sf-spacing-4);
  --sf-filter-card-gap: var(--sf-spacing-4);
  --sf-filter-grid-gap: var(--sf-spacing-3);
  --sf-filter-column-min: 12rem;
  --sf-filter-control-height: var(--sf-control-height-compact);
  --sf-listing-header-padding-x: var(--sf-spacing-5);
  --sf-listing-header-padding-y: var(--sf-spacing-4);
  --sf-table-header-height: 2.75rem;
  --sf-table-row-min-height: 3.25rem;
  --sf-table-action-height: 2.25rem;
  --sf-table-action-min-width: 4.25rem;
  --sf-table-action-padding-x: .7rem;
  --sf-table-action-padding-y: .45rem;
  --sf-table-action-gap: .4rem;
  --sf-table-actions-column-width: 11.5rem;
  --sf-pagination-target: 2.25rem;
  --sf-pagination-padding-x: var(--sf-spacing-4);
  --sf-pagination-padding-y: var(--sf-spacing-3);

  /* Contratos canónicos dos componentes ----------------------------------
     Estes aliases são a única fonte de dimensões e superfícies para os
     componentes básicos. As folhas de página podem criar variantes, mas não
     devem redefinir estes contratos. */
  --sf-card-radius: var(--sf-card-radius-compact);
  --sf-card-border: var(--sf-border);
  --sf-card-background: var(--sf-surface);
  --sf-card-header-background: linear-gradient(
    180deg,
    var(--sf-surface),
    color-mix(in srgb, var(--sf-surface-alt) 45%, var(--sf-surface))
  );
  --sf-card-header-padding-y: var(--sf-spacing-4);
  --sf-card-header-padding-x: var(--sf-spacing-5);
  --sf-card-body-padding: var(--sf-spacing-5);

  --sf-field-height: var(--sf-control-height-compact);
  --sf-field-radius: var(--sf-radius-sm);
  --sf-field-border: var(--sf-border);
  --sf-field-border-hover: color-mix(in srgb, var(--sf-primary) 28%, var(--sf-border));
  --sf-field-border-focus: var(--sf-primary);
  --sf-field-background: var(--sf-input-bg);
  --sf-field-padding-x: var(--sf-control-padding-x);
  --sf-field-padding-y: var(--sf-control-padding-y);

  --sf-button-height: var(--sf-control-height-compact);
  --sf-button-radius: var(--sf-radius-sm);
  --sf-button-padding-x: .9rem;
  --sf-button-padding-y: .5rem;

  --sf-table-header-background: var(--sf-grid-header);
  --sf-table-row-background: var(--sf-grid-row);
  --sf-table-row-alt-background: var(--sf-grid-row-alt);
  --sf-table-row-hover-background: var(--sf-grid-row-hover);

  --sf-modal-panel-width: var(--sf-modal-max-width);
  --sf-modal-panel-radius: var(--sf-radius-xl);
  --sf-modal-panel-max-height: var(--sf-modal-max-height);
  --sf-modal-header-padding: var(--sf-spacing-4) var(--sf-spacing-5);
  --sf-modal-body-padding: var(--sf-spacing-5);
  --sf-modal-footer-padding: var(--sf-spacing-3) var(--sf-spacing-5);
  --sf-modal-mobile-max-height: 96dvh;
  --sf-modal-close-size: 2.5rem;

  /* Elevação, foco e sobreposição --------------------------------------- */
  --sf-shadow-xs: 0 1px 2px color-mix(in srgb, var(--sf-slate-900) 5%, transparent);
  --sf-shadow-sm: 0 8px 26px color-mix(in srgb, var(--sf-navy-850) 5%, transparent);
  --sf-shadow: 0 18px 44px color-mix(in srgb, var(--sf-navy-850) 8%, transparent);
  --sf-shadow-raised: 0 14px 34px color-mix(in srgb, var(--sf-slate-900) 7.5%, transparent);
  --sf-shadow-floating: 0 20px 50px color-mix(in srgb, var(--sf-navy-850) 16%, transparent);
  --sf-shadow-auth: 0 30px 90px color-mix(in srgb, var(--sf-navy-850) 17%, transparent);
  --sf-shadow-sidebar: 18px 0 50px color-mix(in srgb, var(--sf-navy-850) 8%, transparent);
  --sf-shadow-sidebar-mobile: 24px 0 70px color-mix(in srgb, var(--sf-navy-975) 38%, transparent);
  --sf-shadow-button: 0 8px 18px color-mix(in srgb, var(--sf-primary) 17%, transparent);
  --sf-shadow-button-hover: 0 10px 22px color-mix(in srgb, var(--sf-primary) 24%, transparent);
  --sf-shadow-button-compact: 0 6px 15px color-mix(in srgb, var(--sf-primary) 18%, transparent);
  --sf-shadow-subtle: 0 5px 18px color-mix(in srgb, var(--sf-slate-900) 3.5%, transparent);
  --sf-shadow-topbar: 0 8px 28px color-mix(in srgb, var(--sf-slate-900) 3.5%, transparent);
  --sf-shadow-card: 0 8px 26px color-mix(in srgb, var(--sf-slate-900) 4.5%, transparent);
  --sf-shadow-alert: 0 6px 18px color-mix(in srgb, var(--sf-slate-900) 3.5%, transparent);
  --sf-shadow-document: 0 18px 45px color-mix(in srgb, var(--sf-slate-900) 12%, transparent);
  --sf-ring: color-mix(in srgb, var(--sf-primary) 22%, transparent);
  --sf-ring-soft: color-mix(in srgb, var(--sf-primary) 12%, transparent);
  --sf-ring-secondary: color-mix(in srgb, var(--sf-secondary) 30%, transparent);
  --sf-overlay: color-mix(in srgb, var(--sf-slate-900) 68%, transparent);
  --sf-overlay-strong: color-mix(in srgb, var(--sf-navy-975) 72%, transparent);
  --sf-modal-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--sf-slate-900) 28%, transparent);
  --sf-modal-shadow-strong: 0 30px 90px color-mix(in srgb, var(--sf-navy-975) 34%, transparent);
  --sf-mask-opaque: var(--sf-black);
  --sf-z-dropdown: 30;
  --sf-z-topbar: 40;
  --sf-z-backdrop: 70;
  --sf-z-sidebar-mobile: 80;
  --sf-z-modal: 100;
  --sf-z-toast: 120;

  /* Movimento ------------------------------------------------------------ */
  --sf-duration-fast: 120ms;
  --sf-duration: 180ms;
  --sf-duration-normal: var(--sf-duration);
  --sf-duration-slow: 260ms;
  --sf-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --sf-ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --sf-transition-colors: color var(--sf-duration-fast) var(--sf-ease-standard),
    background-color var(--sf-duration-fast) var(--sf-ease-standard),
    border-color var(--sf-duration-fast) var(--sf-ease-standard);
  --sf-transition-interactive: color var(--sf-duration) var(--sf-ease-standard),
    background var(--sf-duration) var(--sf-ease-standard),
    border-color var(--sf-duration) var(--sf-ease-standard),
    box-shadow var(--sf-duration) var(--sf-ease-standard),
    transform var(--sf-duration) var(--sf-ease-standard);
}

html.theme-dark {
  color-scheme: dark;

  --sf-navy: var(--sf-slate-50);
  --sf-navy-2: var(--sf-blue-100);
  --sf-blue: var(--sf-blue-400);
  --sf-teal: var(--sf-teal-400);
  --sf-brand-navy: var(--sf-slate-50);
  --sf-brand-blue: var(--sf-blue-400);
  --sf-brand-blue-hover: #93c5fd;
  --sf-brand-teal: var(--sf-teal-400);

  --sf-primary: #60a5fa;
  --sf-primary-hover: #93c5fd;
  --sf-primary-soft: #172554;
  --sf-primary-soft-strong: #1e3a8a;
  --sf-secondary: var(--sf-teal-400);
  --sf-secondary-hover: #5eead4;
  --sf-secondary-soft: #0f3b3b;
  --sf-accent: var(--sf-secondary);
  --sf-accent-hover: var(--sf-secondary-hover);
  --sf-accent-soft: var(--sf-secondary-soft);

  --sf-bg: #071426;
  --sf-bg-decorative: color-mix(in srgb, var(--sf-blue-600) 13%, transparent);
  --sf-surface: #0b1d3a;
  --sf-surface-raised: #0d2342;
  --sf-surface-alt: #102746;
  --sf-surface-subtle: #0e223d;
  --sf-surface-muted: #102746;
  --sf-surface-hover: #122c4d;
  --sf-surface-selected: var(--sf-primary-soft);
  --sf-surface-inverse: var(--sf-slate-50);
  --sf-surface-inverse-strong: var(--sf-white);
  --sf-surface-scrim: color-mix(in srgb, var(--sf-black) 78%, transparent);
  --sf-surface-glass: color-mix(in srgb, #09162b 90%, transparent);

  --sf-border: #24425f;
  --sf-border-strong: #365779;
  --sf-border-subtle: color-mix(in srgb, var(--sf-slate-700) 80%, transparent);
  --sf-input-bg: #102746;
  --sf-input-shadow: inset 0 1px 2px color-mix(in srgb, var(--sf-black) 18%, transparent);
  --sf-grid-header: #102746;
  --sf-grid-row: var(--sf-navy-850);
  --sf-grid-row-alt: #0e223d;
  --sf-grid-row-hover: #122c4d;
  --sf-pagination-bg: #102746;

  --sf-success: #22c55e;
  --sf-success-soft: #052e16;
  --sf-success-text: #dcfce7;
  --sf-success-border: #166534;
  --sf-warning: #fb923c;
  --sf-warning-soft: #431407;
  --sf-warning-text: #ffedd5;
  --sf-warning-border: #9a3412;
  --sf-danger: #ef4444;
  --sf-danger-soft: #450a0a;
  --sf-danger-text: #fee2e2;
  --sf-danger-border: #991b1b;
  --sf-error: var(--sf-danger);
  --sf-info: var(--sf-primary);
  --sf-info-soft: var(--sf-primary-soft);
  --sf-info-text: var(--sf-blue-100);
  --sf-info-border: var(--sf-border);

  --sf-text: var(--sf-slate-50);
  --sf-text-secondary: var(--sf-slate-300);
  --sf-text-muted: var(--sf-slate-400);
  --sf-text-subtle: #7890ad;
  --sf-text-inverse: var(--sf-navy-850);
  --sf-text-inverse-muted: var(--sf-slate-550);
  --sf-text-inverse-subtle: var(--sf-slate-450);
  --sf-text-on-primary: var(--sf-white);
  --sf-text-on-secondary: #111827;

  --sf-auth-bg: var(--sf-navy-950);
  --sf-auth-shell-border: color-mix(in srgb, var(--sf-slate-700) 80%, transparent);
  --sf-auth-toggle-bg: color-mix(in srgb, var(--sf-navy-850) 88%, transparent);

  --sf-shadow-xs: 0 1px 2px color-mix(in srgb, var(--sf-black) 32%, transparent);
  --sf-shadow-sm: 0 10px 24px color-mix(in srgb, var(--sf-black) 28%, transparent);
  --sf-shadow: 0 16px 38px color-mix(in srgb, var(--sf-black) 34%, transparent);
  --sf-shadow-raised: 0 14px 34px color-mix(in srgb, var(--sf-black) 34%, transparent);
  --sf-shadow-floating: 0 20px 50px color-mix(in srgb, var(--sf-black) 42%, transparent);
  --sf-shadow-auth: 0 30px 90px color-mix(in srgb, var(--sf-black) 48%, transparent);
  --sf-shadow-sidebar: 18px 0 50px color-mix(in srgb, var(--sf-black) 24%, transparent);
  --sf-shadow-sidebar-mobile: 24px 0 70px color-mix(in srgb, var(--sf-black) 48%, transparent);
  --sf-shadow-subtle: 0 5px 18px color-mix(in srgb, var(--sf-black) 24%, transparent);
  --sf-shadow-topbar: 0 8px 28px color-mix(in srgb, var(--sf-black) 22%, transparent);
  --sf-shadow-card: 0 8px 26px color-mix(in srgb, var(--sf-black) 28%, transparent);
  --sf-shadow-alert: 0 6px 18px color-mix(in srgb, var(--sf-black) 24%, transparent);
  --sf-ring: color-mix(in srgb, var(--sf-primary) 30%, transparent);
  --sf-ring-soft: color-mix(in srgb, var(--sf-primary) 20%, transparent);
  --sf-ring-secondary: color-mix(in srgb, var(--sf-secondary) 35%, transparent);
  --sf-overlay: color-mix(in srgb, var(--sf-black) 78%, transparent);
  --sf-overlay-strong: color-mix(in srgb, var(--sf-black) 82%, transparent);
  --sf-modal-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--sf-black) 46%, transparent);
  --sf-modal-shadow-strong: 0 30px 90px color-mix(in srgb, var(--sf-black) 58%, transparent);
}


/* Tokens responsivos: componentes mudam densidade sem redefinir a identidade. */
@media (max-width: 767px) {
  :root {
    --sf-page-gutter: var(--sf-spacing-4);
    --sf-section-gap: var(--sf-spacing-4);
    --sf-card-padding: var(--sf-spacing-3);
    --sf-card-padding-lg: var(--sf-spacing-4);
    --sf-table-cell-padding-x: var(--sf-spacing-3);
    --sf-control-height-compact: var(--sf-control-height-mobile);
    --sf-form-column-gap: var(--sf-spacing-3);
    --sf-form-row-gap: var(--sf-spacing-3);
    --sf-form-gap: var(--sf-spacing-4);
    --sf-form-section-gap: var(--sf-spacing-4);
    --sf-form-section-padding: var(--sf-spacing-4);
    --sf-form-fieldset-padding: var(--sf-spacing-3);
    --sf-modal-gutter: 0;
    --sf-table-cell-padding-x-compact: .75rem;
    --sf-table-cell-padding-y-compact: .65rem;
    --sf-filter-card-padding: var(--sf-spacing-4);
    --sf-filter-column-min: 100%;
    --sf-table-action-height: var(--sf-touch-target);
    --sf-table-action-min-width: 0;
    --sf-pagination-target: var(--sf-touch-target);
    --sf-topbar-height: 4.4rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --sf-page-gutter: var(--sf-spacing-8);
    --sf-section-gap: var(--sf-spacing-8);
  }
}