/* HUB POKER · Design tokens
   Aplique esses tokens no seu sistema atual.
   Importação: <link rel="stylesheet" href="/brand/tokens.css">
   ou copie as variáveis para o seu :root.                       */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─── Color · paleta primária ─────────────────────────── */
  --hp-ink:        #0c1310;   /* texto sobre claro · superfícies */
  --hp-felt-deep:  #102a20;   /* superfície primária · dark mode */
  --hp-felt:       #1f4d3a;   /* verde da marca */
  --hp-felt-2:     #2a6a4f;   /* hover / state */
  --hp-gold:       #c9a24a;   /* accent · pip */
  --hp-gold-light: #e6c376;   /* highlight */
  --hp-paper:      #f4f1ea;   /* background claro */
  --hp-paper-2:    #ebe6db;   /* cards · dividers */
  --hp-bone:       #d9d3c2;   /* muted */

  /* ─── Aliases semânticos ─────────────────────────────── */
  --hp-bg:           var(--hp-paper);
  --hp-bg-elevated:  var(--hp-paper-2);
  --hp-text:         var(--hp-ink);
  --hp-text-muted:   color-mix(in oklab, var(--hp-ink) 65%, transparent);
  --hp-brand:        var(--hp-felt);
  --hp-accent:       var(--hp-gold);
  --hp-border:       color-mix(in oklab, var(--hp-ink) 12%, transparent);

  /* ─── Type ───────────────────────────────────────────── */
  --hp-font-display: 'Space Grotesk', system-ui, sans-serif;
  --hp-font-body:    'Space Grotesk', system-ui, sans-serif;
  --hp-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --hp-fs-xs:   12px;
  --hp-fs-sm:   14px;
  --hp-fs-base: 16px;
  --hp-fs-md:   18px;
  --hp-fs-lg:   22px;
  --hp-fs-xl:   28px;
  --hp-fs-2xl:  40px;
  --hp-fs-3xl:  56px;
  --hp-fs-4xl:  72px;

  --hp-tracking-tight: -0.04em;
  --hp-tracking-normal: -0.01em;
  --hp-tracking-mono:   0.06em;

  /* ─── Spacing · 4px base ─────────────────────────────── */
  --hp-space-1: 4px;
  --hp-space-2: 8px;
  --hp-space-3: 12px;
  --hp-space-4: 16px;
  --hp-space-5: 20px;
  --hp-space-6: 24px;
  --hp-space-8: 32px;
  --hp-space-10: 40px;
  --hp-space-12: 48px;
  --hp-space-16: 64px;

  /* ─── Radius ─────────────────────────────────────────── */
  --hp-radius-sm: 4px;
  --hp-radius-md: 8px;
  --hp-radius-lg: 12px;
  --hp-radius-xl: 20px;
  --hp-radius-pill: 999px;

  /* ─── Shadow ─────────────────────────────────────────── */
  --hp-shadow-sm: 0 1px 2px rgba(12,19,16,.06);
  --hp-shadow-md: 0 4px 14px rgba(12,19,16,.08);
  --hp-shadow-lg: 0 24px 60px rgba(12,19,16,.18);
}

/* ─── Dark theme · acione com data-theme="dark" ─────────── */
[data-theme="dark"] {
  --hp-bg:          var(--hp-felt-deep);
  --hp-bg-elevated: color-mix(in oklab, var(--hp-felt-deep) 80%, var(--hp-paper) 6%);
  --hp-text:        var(--hp-paper);
  --hp-text-muted:  color-mix(in oklab, var(--hp-paper) 70%, transparent);
  --hp-border:      color-mix(in oklab, var(--hp-paper) 14%, transparent);
}

/* ─── Resets opcionais ──────────────────────────────────── */
.hp-app {
  background: var(--hp-bg);
  color: var(--hp-text);
  font-family: var(--hp-font-body);
  font-size: var(--hp-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── Componentes utilitários ───────────────────────────── */
.hp-display { font-family: var(--hp-font-display); font-weight: 700; letter-spacing: var(--hp-tracking-tight); line-height: 1; }
.hp-mono    { font-family: var(--hp-font-mono); letter-spacing: var(--hp-tracking-mono); text-transform: uppercase; }

.hp-btn {
  font-family: var(--hp-font-display); font-weight: 600; font-size: var(--hp-fs-sm);
  background: var(--hp-felt); color: var(--hp-paper);
  border: none; border-radius: var(--hp-radius-pill);
  padding: 10px 18px; cursor: pointer; transition: background .15s ease;
}
.hp-btn:hover { background: var(--hp-felt-2); }
.hp-btn--gold { background: var(--hp-gold); color: var(--hp-felt-deep); }
.hp-btn--gold:hover { background: var(--hp-gold-light); }
.hp-btn--ghost { background: transparent; color: var(--hp-text); border: 1px solid var(--hp-border); }

.hp-card {
  background: var(--hp-bg-elevated);
  border-radius: var(--hp-radius-md);
  padding: var(--hp-space-6);
  box-shadow: var(--hp-shadow-sm);
}

.hp-tag {
  display: inline-block; font-family: var(--hp-font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: color-mix(in oklab, var(--hp-felt) 18%, transparent);
  color: var(--hp-felt); padding: 4px 8px; border-radius: var(--hp-radius-sm);
}
[data-theme="dark"] .hp-tag {
  background: color-mix(in oklab, var(--hp-gold) 22%, transparent);
  color: var(--hp-gold-light);
}