/* ============================================================================
   uMov.me · Design System (Figma)
   Fonte: https://binary-mark-54296390.figma.site/
   ----------------------------------------------------------------------------
   Single source of truth para tokens visuais. Toda tela DEVE consumir
   essas variáveis. Carregar este arquivo ANTES de style.css.
   ============================================================================ */

:root {
  /* ---------- Tipografia ---------- */
  --font-sans: 'Source Sans 3', 'Source Sans Pro', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);

  --font-size: 16px;
  --text-label: 12px;
  --text-base: 14px;
  --text-button: 16px;
  --text-medium: 16px;
  --text-h4: 20px;
  --text-title: 23px;
  --text-h3: 24px;
  --text-h2: 48px;
  --text-h1: 56px;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  --font-weight-regular: 400;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ---------- Paleta brand ---------- */
  /* Egeu (azul institucional) */
  --egeu-dark: #05294a;
  --egeu-pure: #073763;
  --egeu-medium: #96cdff;
  --egeu-light: #dbeeff;

  /* Emerald (teal) */
  --emerald-dark: #003133;
  --emerald-pure: #0d6b70;
  --emerald-medium: #4bcdd3;
  --emerald-light: #d9fdff;

  /* Neon (verde) */
  --neon-dark: #00a661;
  --neon-pure: #04de84;
  --neon-medium: #6affc1;
  --neon-light: #beffe4;

  /* Orange (alerta/destaque) */
  --orange-dark: #771800;
  --orange-pure: #ff5022;
  --orange-medium: #ff7b5a;
  --orange-light: #ffc8ba;

  /* Red (erro/destrutivo) */
  --red-dark: #59000f;
  --red-pure: #cc0032;
  --red-medium: #ff7088;
  --red-light: #ffd6dc;

  /* ---------- Tokens semânticos (Light) ---------- */
  --background: #ffffff;
  --foreground: #353636;

  --card: #ffffff;
  --card-foreground: #030213;
  --card-border: #0000001a;

  --popover: #ffffff;
  --popover-foreground: #030213;

  --muted: #ececf0;
  --muted-foreground: #717182;

  --secondary: #f1f5f9;
  --secondary-foreground: #030213;

  --primary: #004b99;
  --primary-pure: #0072e6;
  --primary-light: #96dcff;
  --primary-foreground: #ffffff;

  --accent: var(--emerald-light);
  --accent-foreground: var(--emerald-dark);

  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --error: #cc0032;
  --warning: #ff5022;
  --success: #4caf50;

  --border: #0000001a;
  --input: transparent;
  --input-background: #f3f3f5;
  --input-fill: #f0f0f0;
  --ring: var(--primary-light);

  --label-color: #333333;
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-tertiary: #5a5d6e;

  --sidebar: #ffffff;
  --sidebar-foreground: #353636;
  --sidebar-border: #e5e5e5;
  --sidebar-primary: var(--primary);
  --sidebar-primary-pure: var(--primary-pure);
  --sidebar-primary-light: var(--primary-light);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-ring: var(--primary-light);

  --background-overlay: #7878801f;
  --background-modal-backdrop: #000000b3;

  /* ---------- Raios ---------- */
  --radius: 8px;
  --radius-xs: .125rem;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-card: 8px;
  --radius-button: 23px;        /* pill */
  --radius-checkbox: 3px;
  --radius-tooltip: 4px;
  --radius-full: 9999px;

  /* ---------- Elevação / sombras ---------- */
  --elevation-sm: 0px 2px 8px 0px #3333333d;
  --shadow-button: 0px 0px 6px #70707029;
  --shadow-button-elevated: 0px 1px 2px 0px #0009, 0px 1px 3px 1px #0006;
  --shadow-ks: 0px 0px 4px 0px #3333333d;
  --shadow-table: 0px 1px 2px #0009, 0px 2px 6px 2px #0006;
  --shadow-card: 0 1px 2px 0 #0000000d, 0 1px 3px 0 #0000001a;
  --shadow-card-hover: 0px 2px 8px 0px #3333333d;

  /* ---------- Espaçamento ---------- */
  --spacing: .25rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---------- Container ---------- */
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 40rem;
  --container-2xl: 48rem;

  /* ---------- Transições ---------- */
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);

  --sidebar-width: 256px;
  --banner-height: 48px;
}

/* ---------- Dark mode ---------- */
:root[data-theme='dark'],
.dark {
  --background: #16171c;
  --foreground: #ebebeb;

  --card: #1e1f26;
  --card-foreground: #ebebeb;
  --card-border: #373944;

  --popover: #0f0f14;
  --popover-foreground: #ebebeb;

  --muted: #373944;
  --muted-foreground: #8c8e9b;

  --secondary: #23252e;
  --secondary-foreground: #ebebeb;

  --primary: #60a5fa;
  --primary-pure: #60a5fa;
  --primary-light: #96dcff;
  --primary-foreground: #0f0f14;

  --accent: var(--emerald-pure);
  --accent-foreground: var(--emerald-light);

  --destructive: #d4183d;
  --destructive-foreground: #f87171;
  --error: #f87171;
  --success: #4ade80;

  --border: #373944;
  --input-background: #1e1f26;
  --input-fill: #23252e;

  --text-primary: #ebebf0;
  --text-secondary: #a0a2af;
  --text-tertiary: #acacac;

  --sidebar: #16171c;
  --sidebar-foreground: #ebebeb;
  --sidebar-border: #2d2f3a;
  --sidebar-primary: #60a5fa;
  --sidebar-primary-foreground: #0f0f14;
  --sidebar-ring: #96dcff;

  --background-overlay: #ffffff12;
  --background-modal-backdrop: #333333cc;

  --shadow-card: 0 1px 2px 0 #00000080, 0 1px 3px 0 #0000004d;
  --shadow-card-hover: 0px 2px 8px 0px #0000004d;
}

/* ============================================================================
   Base · reset leve e tipografia
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--default-font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .ds-h1 { font-size: var(--text-h1); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: -.02em; margin: 0; }
h2, .ds-h2 { font-size: var(--text-h2); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: -.01em; margin: 0; }
h3, .ds-h3 { font-size: var(--text-h3); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); margin: 0; }
h4, .ds-h4 { font-size: var(--text-h4); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); margin: 0; }
.ds-title { font-size: var(--text-title); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); }
.ds-body { font-size: var(--text-base); font-weight: var(--font-weight-regular); }
.ds-label { font-size: var(--text-label); font-weight: var(--font-weight-medium); color: var(--label-color); }
.ds-muted { color: var(--muted-foreground); }

/* ============================================================================
   Componentes base — Botões, Cards, Inputs, Badges
   ============================================================================ */

/* ----- Botão (pill, radius-button: 23px) ----- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 40px;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-button);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--default-transition-duration) var(--ease-in-out),
              color var(--default-transition-duration) var(--ease-in-out),
              box-shadow var(--default-transition-duration) var(--ease-in-out),
              transform var(--default-transition-duration) var(--ease-in-out);
}
.ds-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.ds-btn:disabled,
.ds-btn[aria-disabled='true'] {
  opacity: .5;
  cursor: not-allowed;
}

.ds-btn--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-button);
}
.ds-btn--primary:hover:not(:disabled) {
  background: var(--primary-pure);
  box-shadow: var(--shadow-button-elevated);
}

.ds-btn--secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}
.ds-btn--secondary:hover:not(:disabled) {
  background: var(--muted);
}

.ds-btn--outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.ds-btn--outline:hover:not(:disabled) {
  background: var(--egeu-light);
}

.ds-btn--ghost {
  background: transparent;
  color: var(--foreground);
}
.ds-btn--ghost:hover:not(:disabled) {
  background: var(--muted);
}

.ds-btn--destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.ds-btn--destructive:hover:not(:disabled) {
  background: var(--red-pure);
}

.ds-btn--sm { height: 32px; padding: 0 .875rem; font-size: var(--text-base); }
.ds-btn--lg { height: 48px; padding: 0 1.5rem; font-size: var(--text-medium); }
.ds-btn--icon { width: 40px; padding: 0; }

/* ----- Card ----- */
.ds-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}
.ds-card--hover {
  transition: box-shadow var(--default-transition-duration) var(--ease-in-out),
              transform var(--default-transition-duration) var(--ease-in-out);
}
.ds-card--hover:hover {
  box-shadow: var(--shadow-card-hover);
}
.ds-card-header { margin-bottom: 1rem; }
.ds-card-title { font-size: var(--text-title); font-weight: var(--font-weight-semibold); margin: 0 0 .25rem; }
.ds-card-description { font-size: var(--text-base); color: var(--muted-foreground); margin: 0; }

/* ----- Input ----- */
.ds-input,
.ds-textarea,
.ds-select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 .875rem;
  background: var(--input-background);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color var(--default-transition-duration) var(--ease-in-out),
              box-shadow var(--default-transition-duration) var(--ease-in-out);
}
.ds-textarea { height: auto; min-height: 80px; padding: .625rem .875rem; resize: vertical; }
.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-light) 50%, transparent);
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--muted-foreground); }

/* ----- Badge / Tag ----- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 24px;
  padding: 0 .625rem;
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  background: var(--muted);
  color: var(--foreground);
}
.ds-badge--primary  { background: var(--egeu-light);    color: var(--egeu-pure); }
.ds-badge--success  { background: var(--neon-light);    color: var(--neon-dark); }
.ds-badge--warning  { background: var(--orange-light);  color: var(--orange-dark); }
.ds-badge--danger   { background: var(--red-light);     color: var(--red-pure); }
.ds-badge--info     { background: var(--emerald-light); color: var(--emerald-pure); }

/* ----- Tabela ----- */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-table);
}
.ds-table th,
.ds-table td {
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.ds-table th {
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--muted);
}
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tr:hover td { background: var(--muted); }

/* ----- Utilitários ----- */
.ds-stack    { display: flex; flex-direction: column; gap: 1rem; }
.ds-row      { display: flex; flex-direction: row;    gap: 1rem; align-items: center; }
.ds-grid     { display: grid; gap: 1rem; }
.ds-divider  { height: 1px; background: var(--border); border: 0; margin: 1rem 0; }

.ds-elev-sm  { box-shadow: var(--elevation-sm); }
.ds-elev-md  { box-shadow: var(--shadow-card); }
.ds-elev-lg  { box-shadow: var(--shadow-button-elevated); }