/* ============================================================
   BASE.CSS — Proposy Design System Foundation
   Variáveis, reset, tipografia, utilitários
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
  /* Brand Colors */
  --c-primary:        #0F766E;
  --c-primary-hover:  #0D6B64;
  --c-primary-light:  #14B8A6;
  --c-primary-bg:     #F0FDFA;
  --c-primary-border: #CCFBF1;

  --c-accent:         #6366F1;
  --c-accent-hover:   #5253CC;
  --c-accent-bg:      #EEF2FF;
  --c-accent-border:  #C7D2FE;

  /* Status */
  --c-success:        #10B981;
  --c-success-bg:     #ECFDF5;
  --c-success-border: #A7F3D0;

  --c-warning:        #F59E0B;
  --c-warning-bg:     #FFFBEB;
  --c-warning-border: #FDE68A;

  --c-danger:         #EF4444;
  --c-danger-bg:      #FEF2F2;
  --c-danger-border:  #FCA5A5;

  --c-info:           #3B82F6;
  --c-info-bg:        #EFF6FF;
  --c-info-border:    #BFDBFE;

  /* Neutrals */
  --c-white:          #FFFFFF;
  --c-bg:             #F8FAFC;
  --c-bg-alt:         #F1F5F9;
  --c-border:         #E2E8F0;
  --c-border-strong:  #CBD5E1;

  --c-text:           #0F172A;
  --c-text-secondary: #475569;
  --c-text-muted:     #94A3B8;
  --c-text-disabled:  #CBD5E1;

  /* Sidebar (dark) */
  --sidebar-bg:         #0C1829;
  --sidebar-border:     rgba(255,255,255,0.06);
  --sidebar-text:       #94A3B8;
  --sidebar-text-hover: #E2E8F0;
  --sidebar-text-active:#FFFFFF;
  --sidebar-item-hover: rgba(255,255,255,0.06);
  --sidebar-item-active:rgba(15,118,110,0.25);
  --sidebar-active-bar: #14B8A6;
  --sidebar-width:      264px;

  /* Legacy aliases used by older templates kept during the Jinja migration. */
  --color-primary: var(--c-primary);
  --color-primary-light: var(--c-primary-bg);
  --color-surface: white;
  --color-bg-secondary: var(--c-bg);
  --color-border: var(--c-border);
  --color-text: var(--c-text);
  --color-text-muted: var(--c-text-muted);
  --color-danger: var(--c-danger);

  /* Layout */
  --topbar-height:     64px;
  --topbar-bg:         #FFFFFF;
  --bottom-nav-height: 66px;

  /* Typography */
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  /* Spacing scale */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;

  /* Border radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-3xl:  24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 8px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 24px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.06);
  --shadow-xl: 0 24px 48px rgba(15,23,42,0.12), 0 8px 16px rgba(15,23,42,0.06);
  --shadow-primary: 0 4px 14px rgba(15,118,110,0.25);
  --shadow-accent: 0 4px 14px rgba(99,102,241,0.25);

  /* Transitions */
  --t-fast:   0.12s ease;
  --t-base:   0.2s ease;
  --t-slow:   0.3s ease;
  --t-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-sidebar:  100;
  --z-topbar:    90;
  --z-fab:      150;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;
  --z-overlay:   80;
}

/* Dark mode */
[data-theme="dark"] {
  --c-bg:             #0F172A;
  --c-bg-alt:         #1E293B;
  --c-border:         #1E293B;
  --c-border-strong:  #334155;
  --c-white:          #1E293B;
  --c-text:           #F1F5F9;
  --c-text-secondary: #94A3B8;
  --c-text-muted:     #64748B;
  --topbar-bg:        #1E293B;
}

/* ── CSS Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--c-bg);
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-text);
}

p {
  color: var(--c-text-secondary);
  line-height: 1.7;
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-muted);
}

/* ── Typography ── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-extrabold{ font-weight: 800; }

.text-primary   { color: var(--c-primary); }
.text-accent    { color: var(--c-accent); }
.text-muted     { color: var(--c-text-muted); }
.text-secondary { color: var(--c-text-secondary); }
.text-success   { color: var(--c-success); }
.text-danger    { color: var(--c-danger); }
.text-warning   { color: var(--c-warning); }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.leading-tight  { line-height: 1.25; }
.leading-normal { line-height: 1.6; }
.leading-loose  { line-height: 1.8; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Layout Utilities ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.gap-6 { gap: var(--s6); }
.gap-8 { gap: var(--s8); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.hidden { display: none; }
.block  { display: block; }
.inline { display: inline; }
.inline-flex { display: inline-flex; }

/* ── Spacing Utilities ── */
.p-2 { padding: var(--s2); }
.p-3 { padding: var(--s3); }
.p-4 { padding: var(--s4); }
.p-6 { padding: var(--s6); }
.p-8 { padding: var(--s8); }
.px-2 { padding-left: var(--s2); padding-right: var(--s2); }
.px-3 { padding-left: var(--s3); padding-right: var(--s3); }
.px-4 { padding-left: var(--s4); padding-right: var(--s4); }
.px-6 { padding-left: var(--s6); padding-right: var(--s6); }
.py-2 { padding-top: var(--s2); padding-bottom: var(--s2); }
.py-3 { padding-top: var(--s3); padding-bottom: var(--s3); }
.py-4 { padding-top: var(--s4); padding-bottom: var(--s4); }
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }
.mt-8 { margin-top: var(--s8); }
.mb-2 { margin-bottom: var(--s2); }
.mb-4 { margin-bottom: var(--s4); }
.mb-6 { margin-bottom: var(--s6); }
.mb-8 { margin-bottom: var(--s8); }
.ml-auto { margin-left: auto; }

/* ── Sizing ── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-w-0 { min-width: 0; }

/* ── Misc ── */
.rounded-sm { border-radius: var(--r-sm); }
.rounded    { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }
.rounded-full { border-radius: var(--r-full); }

/* ── Prevent transition flash on page load ── */
html.preload .main-wrapper {
  transition: none !important;
  animation: none !important;
}

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.border { border: 1px solid var(--c-border); }
.border-b { border-bottom: 1px solid var(--c-border); }
.border-t { border-top: 1px solid var(--c-border); }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.cursor-pointer { cursor: pointer; }

.bg-white { background: var(--c-white); }
.bg-primary { background: var(--c-primary); }
.bg-primary-bg { background: var(--c-primary-bg); }

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* ── Focus styles ── */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Selection ── */
::selection {
  background: var(--c-primary-bg);
  color: var(--c-primary);
}

/* ── Divider ── */
.divider {
  height: 1px;
  background: var(--c-border);
  margin: var(--s4) 0;
}

/* ── Section ── */
.section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s2);
}