/* ─────────────────────────────────────────────────────────────────
   DUOMOBI · DESIGN TOKENS · v2.0 · identidade de cubos
   Colocar este arquivo na raiz do CSS global e importar antes de
   qualquer outro estilo. Funciona com Tailwind (via @theme) ou
   CSS vanilla.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ─── CORES PRIMÁRIAS ─────────────────────────────────────────── */
  --duomobi-accent: #22c55e;          /* Verde Duomobi · accent único */
  --duomobi-accent-fg: #6ee7a3;       /* Verde sobre escuro · texto */
  --duomobi-accent-soft: #22c55e1a;   /* Fundo suave · 10% */
  --duomobi-accent-line: #22c55e33;   /* Borda suave · 20% */
  --duomobi-accent-deep: #15803d;     /* Verde escuro · sobre claro */
  --duomobi-accent-darkest: #04140a;  /* Texto sobre verde */

  /* ─── GRADIENTE DO MARK (cubos · claro → profundo) ───────────── */
  --duomobi-grad-top-0: #7cefac;      /* face de topo · stop claro */
  --duomobi-grad-top-1: #3ed673;      /* face de topo · stop final */
  --duomobi-grad-left-0: #28c863;     /* face esquerda · médio */
  --duomobi-grad-left-1: #1ba34d;
  --duomobi-grad-right-0: #178a40;    /* face direita · profundo */
  --duomobi-grad-right-1: #0e6a31;
  /* Degradê master da marca — use em pílulas, CTA, faixas */
  --duomobi-gradient: linear-gradient(105deg, #6ee7a3 0%, #22c55e 52%, #15803d 100%);

  /* ─── SUPERFÍCIES (escuro) ───────────────────────────────────── */
  --duomobi-bg: #07090a;              /* Void · background mais escuro */
  --duomobi-bg-elev: #0a1611;         /* Atrium · cards principais */
  --duomobi-bg-card: #12181a;         /* Cards do produto */
  --duomobi-bg-card-hover: #161d20;
  --duomobi-bg-elevated: #1a2226;     /* Elevated · pílulas, chips */

  /* ─── LINHAS / BORDAS ────────────────────────────────────────── */
  --duomobi-line: #1e2629;
  --duomobi-line-strong: #2a3438;

  /* ─── TEXTO (escala) ─────────────────────────────────────────── */
  --duomobi-fg-1: #e8eeec;            /* Texto principal */
  --duomobi-fg-2: #9aa6a3;            /* Texto secundário */
  --duomobi-fg-3: #6b7775;            /* Texto terciário, labels */
  --duomobi-fg-4: #4a5553;            /* Texto desativado, captions */

  /* ─── SUPERFÍCIES (claro · papelaria, light mode) ────────────── */
  --duomobi-light-bg: #f4f1ea;        /* Travertino · papel */
  --duomobi-light-bg-2: #ffffff;
  --duomobi-light-line: #d8d2c5;
  --duomobi-light-fg-1: #1a1611;
  --duomobi-light-fg-2: #5a5142;
  --duomobi-light-fg-3: #7a6f5e;

  /* ─── ESTADOS ────────────────────────────────────────────────── */
  --duomobi-success: #22c55e;
  --duomobi-warn: #f59e0b;
  --duomobi-danger: #ef4444;
  --duomobi-info: #38bdf8;

  /* ─── TIPOGRAFIA ─────────────────────────────────────────────── */
  --duomobi-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --duomobi-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Tracking padrão por tamanho (Inter) */
  --duomobi-track-display: -0.04em;   /* 48px+ */
  --duomobi-track-h1: -0.035em;       /* 36-48px */
  --duomobi-track-h2: -0.025em;       /* 24-32px */
  --duomobi-track-body: 0;            /* 14-16px */
  --duomobi-track-caps: 0.14em;       /* JetBrains Mono uppercase */

  /* ─── RAIOS ──────────────────────────────────────────────────── */
  --duomobi-radius-sm: 6px;
  --duomobi-radius-md: 10px;
  --duomobi-radius-lg: 14px;
  --duomobi-radius-xl: 18px;

  /* ─── SOMBRAS ────────────────────────────────────────────────── */
  --duomobi-shadow-sm: 0 1px 0 0 #ffffff05 inset, 0 1px 2px #00000040;
  --duomobi-shadow-md: 0 1px 0 0 #ffffff06 inset, 0 8px 24px -8px #000000aa;
  --duomobi-shadow-glow: 0 0 0 1px #22c55e22, 0 0 24px -6px #22c55e44;

  /* ─── ESPAÇAMENTO ────────────────────────────────────────────── */
  --duomobi-space-1: 4px;
  --duomobi-space-2: 8px;
  --duomobi-space-3: 12px;
  --duomobi-space-4: 16px;
  --duomobi-space-5: 24px;
  --duomobi-space-6: 32px;
  --duomobi-space-7: 48px;
  --duomobi-space-8: 64px;
}

/* ─── BASE GLOBAL ──────────────────────────────────────────────── */
html, body {
  font-family: var(--duomobi-font-sans);
  background: var(--duomobi-bg);
  color: var(--duomobi-fg-1);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

/* ─── ATOMS DUOMOBI ──────────────────────────────────────────────── */
.duomobi-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border-radius: var(--duomobi-radius-md);
  font: 500 13.5px/1 var(--duomobi-font-sans);
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s;
}
.duomobi-btn-primary {
  background: var(--duomobi-accent);
  color: var(--duomobi-accent-darkest);
  font-weight: 600;
}
.duomobi-btn-primary:hover { background: #2dd46d; }

.duomobi-btn-ghost {
  background: transparent;
  color: var(--duomobi-fg-2);
  border-color: var(--duomobi-line-strong);
}
.duomobi-btn-ghost:hover { background: var(--duomobi-bg-elevated); color: var(--duomobi-fg-1); }

/* Mono kicker / metadata */
.duomobi-kicker {
  font: 500 11px var(--duomobi-font-mono);
  color: var(--duomobi-fg-3);
  letter-spacing: var(--duomobi-track-caps);
  text-transform: uppercase;
}
.duomobi-kicker--accent { color: var(--duomobi-accent-fg); }