/* =========================================================
   LEGALIZA BRASIL — Design Tokens (UX Canon v2.0)
   Single source of truth for all visual properties.
   Light-first with .dark class override.
   ========================================================= */

/* ── LIGHT MODE (default) ──────────────────────────────── */
:root {
  /* ── Surface (backgrounds) ──────────────────────────── */
  --surface-body: #f0f4f8;
  --surface-primary: #ffffff;
  --surface-secondary: #f8fafc;
  --surface-tertiary: #ffffff;
  --surface-overlay: rgba(0, 0, 0, 0.40);

  /* ── Sidebar ─────────────────────────────────────────── */
  --sidebar-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);

  /* ── Text ───────────────────────────────────────────── */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --text-disabled: #94a3b8;
  --text-inverse: #f8fafc;

  /* ── Borders ────────────────────────────────────────── */
  --border-default: #e2e8f0;
  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;

  /* ── Accent (primary interactive) ───────────────────── */
  --accent-primary: #2563eb;
  --accent-primary-hover: #1d4ed8;
  --accent-primary-muted: #dbeafe;
  --accent-primary-text: #1d4ed8;

  /* ── Semantic: Success ──────────────────────────────── */
  --semantic-success: #059669;
  --semantic-success-muted: #d1fae5;
  --semantic-success-text: #065f46;

  /* ── Semantic: Warning ──────────────────────────────── */
  --semantic-warning: #d97706;
  --semantic-warning-muted: #fef3c7;
  --semantic-warning-text: #92400e;

  /* ── Semantic: Danger ───────────────────────────────── */
  --semantic-danger: #dc2626;
  --semantic-danger-muted: #fee2e2;
  --semantic-danger-text: #991b1b;

  /* ── Semantic: Info ─────────────────────────────────── */
  --semantic-info: #2563eb;
  --semantic-info-muted: #dbeafe;
  --semantic-info-text: #1d4ed8;

  /* ── Spacing (8-point grid) ─────────────────────────── */
  --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;

  /* ── Typography ─────────────────────────────────────── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, monospace;

  --text-display: 1.5rem;
  --text-h1: 1.25rem;
  --text-h2: 1rem;
  --text-h3: 0.875rem;
  --text-body: 0.875rem;
  --text-body-sm: 0.8125rem;
  --text-caption: 0.75rem;
  --text-micro: 0.6875rem;

  /* ── Border Radius ──────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ── Shadows (light mode — subtle) ──────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ── Transitions ────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── Z-index scale ──────────────────────────────────── */
  --z-sticky: 30;
  --z-sidebar: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
}

/* ── DARK MODE (class override) ────────────────────────── */
:root.dark {
  --surface-body: #0a0f1a;
  --surface-primary: #111827;
  --surface-secondary: #1e293b;
  --surface-tertiary: #0f172a;
  --surface-overlay: rgba(0, 0, 0, 0.60);

  --sidebar-shadow: none;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-disabled: #64748b;
  --text-inverse: #0f172a;

  --border-default: #334155;
  --border-subtle: #1e293b;
  --border-strong: #475569;

  --accent-primary: #3b82f6;
  --accent-primary-hover: #2563eb;
  --accent-primary-muted: #1e3a5f;
  --accent-primary-text: #93c5fd;

  --semantic-success: #10b981;
  --semantic-success-muted: #064e3b;
  --semantic-success-text: #6ee7b7;

  --semantic-warning: #f59e0b;
  --semantic-warning-muted: #78350f;
  --semantic-warning-text: #fcd34d;

  --semantic-danger: #ef4444;
  --semantic-danger-muted: #7f1d1d;
  --semantic-danger-text: #fca5a5;

  --semantic-info: #3b82f6;
  --semantic-info-muted: #1e3a5f;
  --semantic-info-text: #93c5fd;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
}

/* ── Global form element styling ─────────────────────── */
.dark input[type="text"],
.dark input[type="number"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="date"],
.dark input[type="month"],
.dark input[type="datetime-local"],
.dark select,
.dark textarea {
  background-color: var(--surface-secondary);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--text-disabled);
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  outline: none;
}

.dark select option {
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

/* ── Scrollbar ───────────────────────────────────────── */
.dark ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--surface-body);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ── Theme transition (smooth color swap) ────────────── */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* ── Utility: skeleton pulse ─────────────────────────── */
@keyframes canon-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.canon-pulse {
  animation: canon-pulse 1.5s ease-in-out infinite;
}

/* ── Utility: micro font sizes ───────────────────────── */
.text-tiny {
  font-size: 0.625rem;
  line-height: 0.875rem;
}

.text-2xs {
  font-size: 0.625rem;
  line-height: 0.875rem;
}

/* ── Utility: hide scrollbar ─────────────────────────── */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}