/**
 * ATAD Flows – shared theme (light/dark) and base component variables.
 * Aligned with Figma: #003B7A, #ED7811, #121212, etc.
 */

:root {
  --atad-primary: #003B7A;
  --atad-primary-end: #0052a3;
  --atad-header-start: #003B7A;
  --atad-header-end: #0052a3;
  --atad-primary-hover: rgba(0, 59, 122, 0.9);
  --atad-accent: #ED7811;
  --atad-accent-dark: #F58520;
  --atad-bg: #ffffff;
  --atad-bg-elevated: #f5f5f5;
  --atad-text: #111827;
  --atad-text-muted: #717182;
  --atad-border: #e5e7eb;
  --atad-border-strong: #d1d5db;
  --atad-focus-ring: #ED7811;
  --atad-destructive: #dc2626;
  --atad-radius: 0.625rem;
  --atad-flow-content-max-width: 1520px;
}

[data-atad-theme="dark"],
.dark,
.dark-mode {
  --atad-primary: #ffffff;
  --atad-primary-end: #2a2a2a;
  --atad-header-start: #1e1e1e;
  --atad-header-end: #2a2a2a;
  --atad-primary-hover: rgba(255, 255, 255, 0.9);
  --atad-accent: #F58520;
  --atad-bg: #121212;
  --atad-bg-elevated: #1e1e1e;
  --atad-text: #f5f5f5;
  --atad-text-muted: #b8b8b8;
  --atad-border: #3a3a3a;
  --atad-border-strong: #4a4a4a;
  --atad-focus-ring: #F58520;
}

/* Base component styles (buttons, inputs, cards) */
.atad-flow-btn-primary {
  min-height: 44px;
  padding: 0.5rem 1.5rem;
  background: var(--atad-primary);
  color: #fff;
  font-weight: 500;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}
.atad-flow-btn-primary:hover {
  background: var(--atad-primary-hover);
}
[data-atad-theme="dark"] .atad-flow-btn-primary,
.dark .atad-flow-btn-primary {
  color: #121212;
}

.atad-flow-btn-secondary {
  min-height: 44px;
  padding: 0.5rem 1.5rem;
  background: transparent;
  color: var(--atad-primary);
  font-weight: 500;
  border: 2px solid var(--atad-primary);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.atad-flow-btn-secondary:hover {
  background: rgba(0, 59, 122, 0.05);
}
[data-atad-theme="dark"] .atad-flow-btn-secondary,
.dark .atad-flow-btn-secondary {
  color: #fff;
  border-color: #fff;
}
[data-atad-theme="dark"] .atad-flow-btn-secondary:hover,
.dark .atad-flow-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.atad-flow-btn-sm {
  min-height: 32px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.atad-flow-btn-destructive {
  min-height: 44px;
  padding: 0.5rem 1.5rem;
  background: var(--atad-destructive);
  color: #fff;
  font-weight: 500;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
}
.atad-flow-btn-destructive:hover:not(:disabled) {
  background: #b91c1c;
}
.atad-flow-btn-destructive.atad-flow-btn-sm {
  min-height: 32px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.atad-flow-input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  background: var(--atad-bg);
  color: var(--atad-text);
  border: 1px solid var(--atad-border);
  border-radius: 0.375rem;
  font-size: 1rem;
}
.atad-flow-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--atad-focus-ring);
}
.atad-flow-input::placeholder {
  color: var(--atad-text-muted);
}

.atad-flow-card {
  background: var(--atad-bg-elevated);
  border: 1px solid var(--atad-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
[data-atad-theme="dark"] .atad-flow-card,
.dark .atad-flow-card {
  box-shadow: none;
}

.atad-flow-tab-list {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.375rem;
  background: var(--atad-bg-elevated);
  border: 1px solid var(--atad-border);
  border-radius: 0.75rem;
}
.atad-flow-tab {
  min-height: 44px;
  padding: 0 1.5rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--atad-text-muted);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.atad-flow-tab:hover {
  color: var(--atad-text);
}
.atad-flow-tab.active {
  background: var(--atad-primary);
  color: #fff;
}
[data-atad-theme="dark"] .atad-flow-tab.active,
.dark .atad-flow-tab.active {
  color: #121212;
}

/* Flow page layout: outer full-width wrapper for background, inner content-width for content.
 * Pattern: .atad-flow-page (full width, optional flow-specific background) > .atad-flow-content-width (content only). */
.atad-flow-page {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--atad-bg);
}

/* Flow page content width – global 1520px; flow roots add .atad-flow-content-width */
.atad-flow-content-width {
  max-width: var(--atad-flow-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}