:root {
    --ui-white: #ffffff;
    --ui-black: #101114;
    --ui-bg: #f5f7fb;
    --ui-surface: #ffffff;
    --ui-surface-muted: #eef2f7;
    --ui-border: #d9e1ec;
    --ui-text: #172033;
    --ui-muted: #64748b;
    --ui-primary: #2563eb;
    --ui-primary-dark: #1d4ed8;
    --ui-accent: #0f766e;
    --ui-danger: #dc2626;
    --ui-success: #15803d;
    --ui-warning: #b45309;
    --ui-info: #0369a1;
    --ui-focus: #f59e0b;
    --ui-radius-sm: 6px;
    --ui-radius-md: 8px;
    --ui-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
    --ui-shadow-md: 0 14px 36px rgba(15, 23, 42, 0.10);
    --ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-text-xs: 12px;
    --ui-text-sm: 14px;
    --ui-text-md: 16px;
    --ui-text-lg: 20px;
    --ui-text-xl: 28px;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --ui-transition-fast: 160ms ease;
    --ui-z-toast: 1080;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

body {
    min-height: 100vh;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

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

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}
body {
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font);
    font-size: var(--ui-text-md);
    line-height: 1.5;
}

:focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 3px;
}

h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: 0;
}

h2 {
    font-size: var(--ui-text-lg);
    line-height: 1.2;
    letter-spacing: 0;
}

code {
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.92em;
    padding: 2px 6px;
}

.skip-link {
    background: var(--ui-black);
    color: var(--ui-white);
    left: var(--ui-space-4);
    padding: var(--ui-space-2) var(--ui-space-3);
    position: fixed;
    top: var(--ui-space-4);
    transform: translateY(-160%);
    z-index: 9999;
}

.skip-link:focus {
    transform: translateY(0);
}
.container {
    margin-inline: auto;
    max-width: 1120px;
    padding-inline: var(--ui-space-4);
    width: 100%;
}

.app-shell {
    padding-block: var(--ui-space-8);
}

.page-stack,
.form-stack {
    display: grid;
    gap: var(--ui-space-4);
}

.page-stack {
    gap: var(--ui-space-6);
}

.page-header {
    align-items: center;
    display: flex;
    gap: var(--ui-space-4);
    justify-content: space-between;
}

.grid {
    display: grid;
    gap: var(--ui-space-4);
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-page {
    align-items: center;
    display: grid;
    min-height: calc(100vh - 160px);
}

.auth-panel {
    align-items: center;
    display: grid;
    gap: var(--ui-space-8);
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

.auth-copy {
    display: grid;
    gap: var(--ui-space-3);
}
.text-muted {
    color: var(--ui-muted);
}

.eyebrow {
    color: var(--ui-accent);
    font-size: var(--ui-text-xs);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

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

.btn-block {
    width: 100%;
}
.btn,
.icon-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    display: inline-flex;
    font-weight: 700;
    gap: var(--ui-space-2);
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    transition: background var(--ui-transition-fast), border-color var(--ui-transition-fast), color var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.btn:hover,
.icon-button:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--ui-primary);
    color: var(--ui-white);
}

.btn-primary:hover {
    background: var(--ui-primary-dark);
}

.btn-secondary {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

.btn-sm {
    font-size: var(--ui-text-sm);
    min-height: 36px;
    padding: 8px 12px;
}

.icon-button {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
    min-width: 42px;
    padding-inline: 10px;
}

.card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
}

.card-header,
.card-body,
.card-footer {
    padding: var(--ui-space-5);
}

.card-header {
    border-bottom: 1px solid var(--ui-border);
}

.card-footer {
    border-top: 1px solid var(--ui-border);
}

.card-title {
    font-size: var(--ui-text-lg);
}

.card-description {
    color: var(--ui-muted);
    margin-top: var(--ui-space-1);
}

.metric-card .card-body {
    display: grid;
    gap: var(--ui-space-3);
}

.metric-title {
    font-size: var(--ui-text-lg);
}

.badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: var(--ui-text-xs);
    font-weight: 800;
    justify-content: center;
    padding: 4px 10px;
    width: fit-content;
}

.badge-success {
    background: #dcfce7;
    color: var(--ui-success);
}

.badge-info {
    background: #e0f2fe;
    color: var(--ui-info);
}

.badge-warning {
    background: #fef3c7;
    color: var(--ui-warning);
}

.empty-state {
    align-items: start;
    display: grid;
    gap: var(--ui-space-4);
    margin-inline: auto;
    max-width: 640px;
    padding-block: var(--ui-space-8);
}

.brand-mark {
    align-items: center;
    background: var(--ui-primary);
    border-radius: var(--ui-radius-md);
    color: var(--ui-white);
    display: inline-flex;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}
.form {
    display: grid;
}

.form-group {
    display: grid;
    gap: var(--ui-space-2);
}

.form-label {
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 700;
}

.form-input,
.form-select,
.form-textarea {
    background: var(--ui-white);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    color: var(--ui-text);
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--ui-primary);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--ui-danger);
}

.form-error {
    color: var(--ui-danger);
    font-size: var(--ui-text-sm);
}

.form-actions {
    display: flex;
    gap: var(--ui-space-3);
    justify-content: flex-end;
}
.table-wrapper {
    overflow-x: auto;
}

.table {
    border-collapse: collapse;
    min-width: 680px;
    width: 100%;
}

.table th,
.table td {
    border-bottom: 1px solid var(--ui-border);
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.table th {
    color: var(--ui-muted);
    font-size: var(--ui-text-sm);
    font-weight: 800;
}

.table tr:last-child td {
    border-bottom: 0;
}
.navbar {
    align-items: center;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    gap: var(--ui-space-4);
    justify-content: space-between;
    min-height: 72px;
    padding: var(--ui-space-3) var(--ui-space-5);
    position: sticky;
    top: 0;
    z-index: 30;
}

.navbar-brand {
    align-items: center;
    display: inline-flex;
    font-weight: 900;
    gap: var(--ui-space-3);
}

.navbar-actions {
    align-items: center;
    display: flex;
    gap: var(--ui-space-3);
}

.nav-link {
    color: var(--ui-muted);
    font-weight: 700;
}

.nav-link:hover {
    color: var(--ui-text);
}

.navbar-toggle {
    display: none;
}
.alert {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    margin-bottom: var(--ui-space-4);
    padding: var(--ui-space-3) var(--ui-space-4);
}

.alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: var(--ui-success);
}

.alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--ui-danger);
}

.toast-container {
    bottom: var(--ui-space-4);
    display: grid;
    gap: var(--ui-space-2);
    max-width: min(360px, calc(100vw - 32px));
    position: fixed;
    right: var(--ui-space-4);
    z-index: var(--ui-z-toast);
}

.toast {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--ui-primary);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-md);
    padding: var(--ui-space-3) var(--ui-space-4);
}
@media (max-width: 860px) {
    .grid-3,
    .auth-panel {
        grid-template-columns: 1fr;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .navbar {
        align-items: stretch;
        flex-wrap: wrap;
        padding-inline: var(--ui-space-4);
    }

    .navbar-toggle {
        display: inline-flex;
    }

    .navbar-actions {
        align-items: stretch;
        display: none;
        flex-basis: 100%;
        flex-direction: column;
    }

    .navbar-actions.is-open {
        display: flex;
    }

    .navbar-actions .btn,
    .navbar-actions form,
    .navbar-actions button {
        width: 100%;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding: var(--ui-space-4);
    }

    .form-actions {
        flex-direction: column;
    }
}
/* =========================================================================
   Credia Contabilidade - Design Tokens
   Mapped from old tailwind.config.js
   ui-ux-pro-max methodology
   ========================================================================= */

:root {
  /* Colors: Primary (Teal) */
  --color-teal-50: #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;
  --color-teal-500: #14b8a6;
  --color-teal-600: #0d9488;
  --color-teal-700: #0f766e;
  
  --color-primary: var(--color-teal-600);
  --color-primary-light: var(--color-teal-500);

  /* Colors: Accents & States */
  --color-emerald-500: #10b981;
  --color-accent: var(--color-emerald-500);

  /* Colors: Slate (Neutrals) */
  /* Using standard Tailwind Slate colors as fallback if missing in config */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9; /* gray-light */
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8; /* gray-dark */
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155; /* panel */
  --color-slate-800: #1e293b; /* card */
  --color-slate-900: #0f172a; /* dark text */

  /* Semantic Colors */
  --color-bg: #ffffff;
  --color-bg-alt: var(--color-slate-50);
  --color-text: var(--color-slate-900);
  --color-text-muted: var(--color-slate-500);
  --color-border: var(--color-slate-200);

  /* Fonts */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Spacing Grid (8px baseline approx) */
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */
  --spacing-32: 8rem;     /* 128px */

  /* Border Radius */
  --radius-sm: 0.125rem;  /* 2px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --transition-all: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color 0.3s, background-color 0.3s, border-color 0.3s;
  --transition-transform: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout constraints */
  --container-max-width: 80rem; /* max-w-7xl */
  --header-height: 72px;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}