/*
 * Preço na Mão Design System v1.0
 *
 * The JSON token file in `nova estrutura visual/` is the source of truth.
 * This file is the web runtime artifact and also contains a temporary
 * compatibility bridge for the legacy portal CSS.
 */
:root {
  --color-background: #f7f9f8;
  --color-background-alt: #f1f5f4;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-text-primary: #102047;
  --color-text-secondary: #5c687f;
  --color-text-subtle: #8a95a6;
  --color-primary: #0a927f;
  --color-primary-hover: #087a6b;
  --color-primary-active: #066459;
  --color-primary-soft: #ddf4ef;
  --color-border: #e2e8e7;
  --color-divider: #edf1f0;
  --color-success: #168a5b;
  --color-success-soft: #e4f5ea;
  --color-warning: #d98a00;
  --color-warning-soft: #fff2d9;
  --color-danger: #d64545;
  --color-danger-soft: #fde7e7;
  --color-info: #1b7f9e;
  --color-info-soft: #e1f2f7;

  --font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-xlarge: 20px;
  --radius-pill: 999px;
  --shadow-small: 0 1px 2px rgba(16, 32, 71, 0.06);
  --shadow-medium: 0 8px 24px -12px rgba(16, 32, 71, 0.18);
  --shadow-large: 0 18px 40px -18px rgba(16, 32, 71, 0.24);
  --shadow-focus: 0 0 0 3px rgba(10, 146, 127, 0.22);
  --duration-fast: 120ms;
  --duration-standard: 180ms;
  --duration-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --touch-target: 44px;
  --control-height: 48px;
  --fab-size: 64px;
  --layout-sidebar-width: 248px;
  --layout-content-max: 1320px;

  /* Compatibility aliases still used by older server-rendered modules. */
  --text: var(--color-text-primary);
  --text-color: var(--color-text-primary);
  --text-muted: var(--color-text-secondary);
  --ink-soft: var(--color-text-secondary);
  --surface-hover: var(--color-background-alt);
  --negative: var(--color-danger);
}

[data-theme="dark"] {
  --color-background: #0e1514;
  --color-background-alt: #111c1a;
  --color-surface: #16211f;
  --color-surface-elevated: #1d2b28;
  --color-text-primary: #f5f7f6;
  --color-text-secondary: #b8c3c0;
  --color-text-subtle: #87938f;
  --color-primary: #3bb39d;
  --color-primary-hover: #52c3ae;
  --color-primary-active: #2c9a86;
  --color-primary-soft: #203d37;
  --color-border: #2b3e39;
  --color-divider: #22332f;
  --color-success: #5ccb8d;
  --color-success-soft: #183a28;
  --color-warning: #f0b34f;
  --color-warning-soft: #3d2f18;
  --color-danger: #f06f6f;
  --color-danger-soft: #402020;
  --color-info: #62b6d5;
  --color-info-soft: #18333d;
}

html {
  color-scheme: light;
}

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

/* Legacy aliases. Migrate page templates to semantic names, then remove. */
body.portal-app {
  --font-title: var(--font-family);
  --font-body: var(--font-family);
  --bg: var(--color-background);
  --bg-soft: var(--color-background-alt);
  --surface: var(--color-surface);
  --surface-soft: var(--color-background-alt);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --primary: var(--color-primary);
  --primary-strong: var(--color-primary-hover);
  --accent: var(--color-warning);
  --border: var(--color-border);
  --sidebar-bg: var(--color-surface);
  --sidebar-border: var(--color-border);
  --sidebar-ink: var(--color-text-primary);
  --sidebar-muted: var(--color-text-secondary);
  --sidebar-item-bg: var(--color-primary-soft);
  --sidebar-item-hover: var(--color-primary-soft);
  --chip-bg: var(--color-primary-soft);
  --chip-border: var(--color-primary);
  --focus: rgba(10, 146, 127, 0.22);
  --income-color: var(--color-success);
  --expense-color: var(--color-danger);
  --text-color: var(--color-text-primary);
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family);
}

body.portal-app.theme-blue,
body.portal-app.theme-green,
body.portal-app.theme-light,
body.portal-app.theme-dark {
  --font-title: var(--font-family);
  --font-body: var(--font-family);
  --bg: var(--color-background);
  --bg-soft: var(--color-background-alt);
  --surface: var(--color-surface);
  --surface-soft: var(--color-background-alt);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --primary: var(--color-primary);
  --primary-strong: var(--color-primary-hover);
  --accent: var(--color-warning);
  --border: var(--color-border);
  --sidebar-bg: var(--color-surface);
  --sidebar-border: var(--color-border);
  --sidebar-ink: var(--color-text-primary);
  --sidebar-muted: var(--color-text-secondary);
  --sidebar-item-bg: var(--color-primary-soft);
  --sidebar-item-hover: var(--color-primary-soft);
  --chip-bg: var(--color-primary-soft);
  --chip-border: var(--color-primary);
  --focus: rgba(10, 146, 127, 0.22);
  --income-color: var(--color-success);
  --expense-color: var(--color-danger);
  --text-color: var(--color-text-primary);
}

/* Foundation overrides for the portal shell. Page-specific migrations follow. */
body.portal-app .app-shell {
  background: var(--color-background);
  color: var(--color-text-primary);
  grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
}

/* Keep the desktop collapse state stronger than the shell foundation above. */
@media (min-width: 1025px) {
  html.sidebar-collapsed body.portal-app .app-shell,
  body.portal-app.sidebar-collapsed .app-shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

body.portal-app .sidebar {
  background: var(--color-surface);
  border: 0;
  border-right: 1px solid var(--color-divider);
  border-radius: 0;
  box-shadow: none;
  color: var(--color-text-primary);
  margin: 0;
  min-height: 100vh;
}

body.portal-app .sidebar .menu-item,
body.portal-app .sidebar .gear-menu summary {
  color: var(--color-text-secondary);
  transition: background-color var(--duration-standard) var(--ease-standard),
    color var(--duration-standard) var(--ease-standard);
}

body.portal-app .sidebar .menu-item:hover,
body.portal-app .sidebar .gear-menu summary:hover,
body.portal-app .sidebar .menu-item.active,
body.portal-app .sidebar .gear-menu[open] summary {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary-active);
}

body.portal-app .topbar {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: none;
}

body.portal-app .content {
  background: var(--color-background);
  margin: 0 auto;
  max-width: var(--layout-content-max);
  width: 100%;
}

body.portal-app .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-small);
  color: var(--color-text-primary);
}

body.portal-app .button {
  align-items: center;
  border-radius: var(--radius-medium);
  display: inline-flex;
  justify-content: center;
  min-height: var(--control-height);
  transition: background-color var(--duration-standard) var(--ease-standard),
    border-color var(--duration-standard) var(--ease-standard),
    color var(--duration-standard) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

body.portal-app .button:not(.ghost):not(.secondary):not(.danger) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

body.portal-app .button:not(.ghost):not(.secondary):not(.danger):hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

body.portal-app .button.secondary {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
  color: var(--color-primary-active);
}

body.portal-app .button.ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-primary-active);
}

body.portal-app .button.danger {
  background: var(--color-danger-soft);
  border-color: var(--color-danger-soft);
  color: var(--color-danger);
}

body.portal-app input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
body.portal-app select,
body.portal-app textarea {
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  color: var(--color-text-primary);
  min-height: var(--control-height);
}

body.portal-app input::placeholder,
body.portal-app textarea::placeholder {
  color: var(--color-text-subtle);
}

body.portal-app :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

body.portal-app .portal-receipt-fab {
  background: var(--color-primary);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-medium);
  height: var(--fab-size);
  width: var(--fab-size);
}

@media (max-width: 1023px) {
  body.portal-app .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.portal-app .sidebar {
    min-height: 100%;
  }
}

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