/* RentFast — Design Tokens (OKLCH, editorial-premium)
   Mantém aliases de compatibilidade com templates antigos (--s*, --r*, --sh-*) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap');

:root {
  /* — Paleta primária: Sienna (terracota) — */
  --p:    oklch(0.62 0.14 47);
  --pd:   oklch(0.52 0.15 42);
  --pl:   oklch(0.92 0.04 60);
  --pb:   oklch(0.97 0.02 60);

  /* Compat antigo */
  --ph:   var(--pd);

  /* — Neutros (warm-tinted) — */
  --bg:       oklch(0.985 0.005 70);
  --surface:  #ffffff;
  --surface-2: oklch(0.97 0.005 70);
  --line:     oklch(0.91 0.005 70);
  --line-2:   oklch(0.85 0.005 70);
  --ink-1:    oklch(0.15 0.01 60);
  --ink-2:    oklch(0.40 0.01 60);
  --ink-3:    oklch(0.58 0.01 60);
  --ink-4:    oklch(0.75 0.005 60);

  /* — Aliases de compatibilidade (--s*) — */
  --s50:  var(--bg);
  --s100: var(--surface-2);
  --s200: var(--line);
  --s300: var(--line-2);
  --s400: var(--ink-4);
  --s500: var(--ink-3);
  --s600: var(--ink-2);
  --s700: var(--ink-2);
  --s800: var(--ink-1);
  --s900: var(--ink-1);

  /* — Semânticos — */
  --green:  oklch(0.60 0.15 145);
  --red:    oklch(0.58 0.18 25);
  --amber:  oklch(0.78 0.16 80);
  --blue:   oklch(0.55 0.15 250);
  --yellow: var(--amber);

  /* — Tipografia — */
  --font-display: 'General Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-heading: var(--font-display);

  /* — Raios — */
  --r-base: 12px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 999px;

  /* Compat antigo */
  --r4:  4px;
  --r6:  6px;
  --r8:  8px;
  --r10: 10px;
  --r12: 12px;
  --r16: 16px;
  --r24: 24px;
  --rf:  999px;

  /* — Densidade — */
  --d: 1;
  --space-1:  calc(4px  * var(--d));
  --space-2:  calc(8px  * var(--d));
  --space-3:  calc(12px * var(--d));
  --space-4:  calc(16px * var(--d));
  --space-5:  calc(20px * var(--d));
  --space-6:  calc(24px * var(--d));
  --space-8:  calc(32px * var(--d));
  --space-10: calc(40px * var(--d));
  --space-12: calc(48px * var(--d));
  --space-16: calc(64px * var(--d));

  /* — Cards — */
  --card-bg:     var(--surface);
  --card-border: 1px solid var(--line);
  --card-shadow: none;

  /* — Sombras (compat) — */
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --sh-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --sh-xl: 0 20px 25px -5px rgba(0,0,0,.09), 0 8px 10px -6px rgba(0,0,0,.04);

  /* — Transições — */
  --t-fast: 120ms cubic-bezier(.2,.8,.2,1);
  --t-base: 220ms cubic-bezier(.2,.8,.2,1);
  --transition: var(--t-fast);
}

/* — Paleta Forest — */
[data-palette="forest"] {
  --p:  oklch(0.42 0.09 165);
  --pd: oklch(0.34 0.10 165);
  --pl: oklch(0.92 0.03 145);
  --pb: oklch(0.97 0.015 145);
}

/* — Paleta Graphite — */
[data-palette="graphite"] {
  --p:  oklch(0.78 0.18 90);
  --pd: oklch(0.68 0.18 80);
  --pl: oklch(0.95 0.05 95);
  --pb: oklch(0.98 0.02 95);
}

/* — Dark mode — */
[data-mode="dark"] {
  --bg:        oklch(0.16 0.005 60);
  --surface:   oklch(0.20 0.005 60);
  --surface-2: oklch(0.24 0.005 60);
  --line:      oklch(0.30 0.005 60);
  --line-2:    oklch(0.36 0.005 60);
  --ink-1:     oklch(0.97 0.005 70);
  --ink-2:     oklch(0.78 0.005 70);
  --ink-3:     oklch(0.62 0.005 70);
  --ink-4:     oklch(0.45 0.005 70);
  --pl:        oklch(0.30 0.04 60);
  --pb:        oklch(0.22 0.02 60);
  /* Reativar aliases */
  --s50:  var(--bg);
  --s100: var(--surface-2);
  --s200: var(--line);
  --s800: var(--ink-1);
  --s900: var(--ink-1);
}

/* — Variantes de card — */
[data-card="flat"]     { --card-border: 1px solid transparent; --card-bg: var(--surface-2); }
[data-card="outlined"] { --card-border: 1px solid var(--line); --card-bg: var(--surface); --card-shadow: none; }
[data-card="elevated"] { --card-border: 1px solid transparent; --card-bg: var(--surface); --card-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }

/* ── Reset/base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.55;
  color: var(--ink-1); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-base), color var(--t-base);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; }

/* — Tipografia display — */
.display    { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.display-xl { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 0.95; font-size: clamp(48px, 8vw, 112px); }
.display-lg { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.0;  font-size: clamp(36px, 5vw, 64px); }
.display-md { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;  line-height: 1.1;  font-size: clamp(28px, 3.2vw, 40px); }
.display-sm { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2;  font-size: 22px; }

.mono  { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.tnum  { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-3);
}

/* ── Componentes ── */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--r-md);
  box-shadow: var(--card-shadow);
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  white-space: nowrap; text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--ink-1); color: var(--bg);
  border-color: transparent;
}
.btn-primary:hover { background: color-mix(in oklch, var(--ink-1) 88%, var(--bg)); }

.btn-accent {
  background: var(--p); color: white;
  border-color: transparent;
}
.btn-accent:hover { background: var(--pd); }

.btn-ghost {
  background: transparent; color: var(--ink-1); border-color: var(--line);
}
.btn-ghost:hover { background: var(--surface-2); }

/* Compat antigos */
.btn-outline { background: transparent; color: var(--ink-1); border: 1px solid var(--line); }
.btn-outline:hover { background: var(--surface-2); }

.btn-lg { padding: 14px 22px; font-size: 15px; border-radius: calc(var(--r-md) + 2px); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-full { width: 100%; }
.btn-icon { padding: 10px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-2);
  cursor: pointer; transition: all var(--t-fast);
  white-space: nowrap;
}
.chip:hover { border-color: var(--line-2); color: var(--ink-1); }
.chip.on, .chip[data-on="true"] {
  background: var(--ink-1); color: var(--bg); border-color: var(--ink-1);
}

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: 11px; font-weight: 600;
  font-family: var(--font-mono); letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2);
}
.badge-accent { background: color-mix(in oklch, var(--p) 14%, transparent); color: var(--p); }
.badge-green  { background: color-mix(in oklch, var(--green) 14%, transparent); color: var(--green); }
.badge-red    { background: color-mix(in oklch, var(--red) 14%, transparent); color: var(--red); }
.badge-amber  { background: color-mix(in oklch, var(--amber) 16%, transparent); color: oklch(0.50 0.16 80); }

.input, .form-input {
  display: block; width: 100%;
  padding: 11px 14px; font-family: var(--font-body); font-size: 14px;
  background: var(--surface); color: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--r-md);
  outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .form-input:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--p) 18%, transparent);
}
.input::placeholder, .form-input::placeholder { color: var(--ink-4); }
.input:disabled, .form-input:disabled { background: var(--surface-2); color: var(--ink-3); }

.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.form-group { display: flex; flex-direction: column; gap: 0; }

.divider { height: 1px; background: var(--line); border: 0; margin: var(--space-6) 0; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Avatar */
.avatar {
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--ink-1); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}
.avatar-sm  { width: 32px; height: 32px; font-size: 11px; }
.avatar-md  { width: 40px; height: 40px; font-size: 13px; }
.avatar-lg  { width: 56px; height: 56px; font-size: 16px; }

/* Status */
.status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px;
}
.status-dot.live    { background: var(--green); box-shadow: 0 0 0 3px color-mix(in oklch, var(--green) 22%, transparent); }
.status-dot.pending { background: var(--amber); }
.status-dot.cancel  { background: var(--red); }
.status-dot.idle    { background: var(--ink-3); }

/* Mensagens Django */
.messages-container {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 400px; width: calc(100vw - 32px);
}
.message-toast {
  padding: 12px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
  display: flex; align-items: flex-start; gap: 10px;
  box-shadow: var(--sh-lg); animation: slideInRight .25s ease;
}
.message-toast.success { background: color-mix(in oklch,var(--green) 12%,var(--surface)); border: 1px solid color-mix(in oklch,var(--green) 35%,transparent); color: var(--green); }
.message-toast.error   { background: color-mix(in oklch,var(--red)   12%,var(--surface)); border: 1px solid color-mix(in oklch,var(--red)   35%,transparent); color: var(--red); }
.message-toast.warning { background: color-mix(in oklch,var(--amber) 12%,var(--surface)); border: 1px solid color-mix(in oklch,var(--amber) 35%,transparent); color: var(--amber); }
.message-toast.info    { background: color-mix(in oklch,var(--blue)  12%,var(--surface)); border: 1px solid color-mix(in oklch,var(--blue)  35%,transparent); color: var(--blue); }
.message-close {
  background: none; border: none; color: inherit; opacity: 0.6;
  margin-left: auto; flex-shrink: 0; padding: 0;
}
.message-close:hover { opacity: 1; }
@keyframes slideInRight {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Info-boxes compat */
.info-box { padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 8px; }
.info-success { background: color-mix(in oklch, var(--green) 12%, transparent); border: 1px solid color-mix(in oklch, var(--green) 30%, transparent); color: var(--green); }
.info-error   { background: color-mix(in oklch, var(--red) 12%, transparent); border: 1px solid color-mix(in oklch, var(--red) 30%, transparent); color: var(--red); }

/* Utilities */
.text-primary    { color: var(--p) !important; }
.text-muted      { color: var(--ink-3) !important; }
.text-sm         { font-size: 13px; }
.text-xs         { font-size: 11px; }
.text-center     { text-align: center; }
.font-bold       { font-weight: 700; }
.font-semibold   { font-weight: 600; }
.truncate        { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2           { gap: var(--space-2); }
.gap-3           { gap: var(--space-3); }
.gap-4           { gap: var(--space-4); }
.flex-1          { flex: 1; min-width: 0; }
.w-full          { width: 100%; }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }
::selection { background: color-mix(in oklch, var(--p) 30%, transparent); color: var(--ink-1); }