/* ============================================================
   ARGOS · Base Global
   assets/css/base.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── TOKENS DE DESIGN ─────────────────────────────────────── */
:root {
  /* Cores de acento */
  --c-accent:       #ef6b3a;
  --c-accent-2:     #e15a29;
  --c-accent-soft:  #ffe8dc;
  --c-accent-ink:   #ffffff;

  /* Superfícies de página */
  --c-page:         #f1ebe2;
  --c-page-2:       #ece4d8;

  /* Cards */
  --c-card:         #ffffff;
  --c-card-2:       #faf6ef;
  --c-card-3:       #f5efe5;

  /* Texto */
  --c-ink:          #1a1a1a;
  --c-ink-2:        #4a4a4a;
  --c-ink-3:        #8a8a8a;
  --c-ink-4:        #c0c0c0;

  /* Bordas / linhas */
  --c-line:         #ece4d8;
  --c-line-2:       #d8d0c2;
  --c-line-3:       #b8aea0;

  /* Sidebar / dark */
  --c-sidebar:      #0c0c0e;
  --c-sidebar-2:    #1a1a1d;
  --c-sidebar-3:    #28282c;

  /* Feedback */
  --c-success:      #2bb673;
  --c-success-soft: #ddf5e8;
  --c-danger:       #e34d3c;
  --c-danger-soft:  #fde2dd;
  --c-warn:         #e9a634;
  --c-warn-soft:    #fbf0d6;
  --c-info:         #4d8fe6;
  --c-info-soft:    #dfeaf9;

  /* Paleta primitiva */
  --p-peach:        #fbc1a3;   --p-peach-d:  #b8541d;
  --p-pink:         #ffc8d7;   --p-pink-d:   #b0466a;
  --p-purple:       #d8c5ff;   --p-purple-d: #6b4fad;
  --p-blue:         #bcd9ff;   --p-blue-d:   #2a6cbf;
  --p-mint:         #c6f0d4;   --p-mint-d:   #1f7d4d;
  --p-yellow:       #ffd28a;   --p-yellow-d: #a8761a;

  /* Radii */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(20,15,8,.04);
  --sh-2: 0 6px 24px rgba(20,15,8,.05);
  --sh-3: 0 14px 40px rgba(20,15,8,.08);

  /* Fontes */
  --font-display: 'Inter', sans-serif;
  --font-ui:      'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::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-ui);
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-page);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── TIPOGRAFIA GLOBAL ────────────────────────────────────── */
.h1 {
  display: block;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--c-ink);
  margin-top: 8px;
}

.body {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink-2);
  margin-top: 8px;
}

.label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.num {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: 4px;
}

.sm  { display: block; font-size: 12px; line-height: 1.4; }
.dim { font-size: 12px; color: var(--c-ink-3); cursor: pointer; }
.accent { color: var(--c-accent); font-weight: 600; font-size: 12px; cursor: pointer; }

/* ── BRAND / LOGO ─────────────────────────────────────────── */
.c-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.c-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--c-accent);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.c-brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}

.c-brand-tag {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.5);
  margin-top: 3px;
}

/* ── TABS / TOGGLE ────────────────────────────────────────── */
.c-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--c-line);
  border-radius: var(--r-full);
  align-self: flex-start;
  margin-top: 4px;
}

.c-tab {
  display: block;
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  color: var(--c-ink-3);
}

.c-tab.is-on {
  background: var(--c-card);
  box-shadow: var(--sh-1);
  color: var(--c-ink);
}

/* ── FORM FIELDS ──────────────────────────────────────────── */
.c-field { display: flex; flex-direction: column; gap: 6px; }

.c-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink-2);
}

.c-field-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--c-card);
  border: 0.8px solid var(--c-line-2);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--c-ink);
  transition: border-color 0.12s ease;
}

.c-field-input:focus-within { border-color: var(--c-accent); }

.c-field-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--c-ink);
  font-family: var(--font-ui);
}

.c-field-input input::placeholder { color: var(--c-ink-4); }

/* ── CHECKBOX ─────────────────────────────────────────────── */
.c-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--c-accent);
  border: 0.8px solid var(--c-accent);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0;
}

/* ── LINHAS E COLUNAS ─────────────────────────────────────── */
.c-row { display: flex; align-items: center; }
.c-col { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* ── BOTÕES ───────────────────────────────────────────────── */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 22px;
  border-radius: var(--r-full);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 0.8px solid transparent;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.c-btn-lg {
  background: transparent;
  border-color: var(--c-line-2);
  color: var(--c-ink);
}
.c-btn-lg:hover { border-color: var(--c-accent); color: var(--c-accent); }

.c-btn-accent {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.c-btn-accent:hover { background: var(--c-accent-2); border-color: var(--c-accent-2); }

/* ── ALERTAS ──────────────────────────────────────────────── */
.c-alert {
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 14px;
}
.c-alert-danger  { background: var(--c-danger-soft);  color: var(--c-danger);  border: 0.8px solid #f5b8b2; }
.c-alert-success { background: var(--c-success-soft); color: var(--c-success); border: 0.8px solid #a8e6c7; }
.c-alert-warn    { background: var(--c-warn-soft);    color: var(--c-warn);    border: 0.8px solid #f5d28a; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--c-line-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-line-3); }

::selection { background: var(--c-accent); color: #fff; }