/* ============================================================
   SAMTRIX GAMING — Design Tokens
   Agente 2: Design System Builder
   Baseado em: design/DESIGN.md
   ============================================================ */

/* ── Reset global ── */
*, *::before, *::after { box-sizing: border-box; }

:root {

  /* ── TIPOGRAFIA ── */
  --font-sans:  'Geist', 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  'Geist Mono', 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* ── ESCALA TIPOGRÁFICA ── */
  --text-display-xl:  2.25rem;   /* 36px — Títulos principais, valores grandes */
  --text-display-l:   1.75rem;   /* 28px — Subtítulos de seção */
  --text-heading:     1.25rem;   /* 20px — Títulos de card, modal headers */
  --text-subheading:  1rem;      /* 16px — Labels de grupo, nomes de seção */
  --text-body:        0.9rem;    /* 14.4px — Corpo de texto, descrições */
  --text-body-sm:     0.8rem;    /* 12.8px — Metadados, timestamps, helpers */
  --text-label:       0.7rem;    /* 11.2px — Labels de coluna, section headers */
  --text-mono:        0.8rem;    /* 12.8px — Códigos API, hashes, valores financeiros */

  /* ── PESOS ── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── LINE-HEIGHT ── */
  --leading-tight:    1.1;
  --leading-snug:     1.15;
  --leading-normal:   1.3;
  --leading-relaxed:  1.5;
  --leading-loose:    1.6;

  /* ── LETTER-SPACING ── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.06em;
  --tracking-widest:   0.1em;

  /* ── BACKGROUNDS / SUPERFÍCIES ── */
  --bg-deep-space:       #060b17;   /* Body base — o fundo mais escuro */
  --bg-navy-canvas:      #0a1120;   /* Alternância de seção */
  --bg-surface-dark:     #0d1728;   /* Cards, modais, painéis */
  --bg-surface-raised:   #111e35;   /* Cards com elevação, hover de itens */
  --bg-surface-elevated: #162040;   /* Dropdown, tooltips, flutuantes */

  /* ── BORDERS ── */
  --border-dim:     rgba(148, 163, 184, 0.06);   /* Separadores sutis, zebra stripe */
  --border-subtle:  rgba(148, 163, 184, 0.1);    /* Bordas de card padrão */
  --border-visible: rgba(148, 163, 184, 0.18);   /* Inputs, divisores visíveis */
  --border-focus:   rgba(91, 94, 244, 0.4);      /* Componente em foco */

  /* ── TIPOGRAFIA — Cores ── */
  --text-primary:   #f1f5f9;   /* Headlines, valores importantes */
  --text-secondary: #94a3b8;   /* Descrições, subtítulos, metadata */
  --text-tertiary:  #64748b;   /* Placeholders, labels de seção, desabilitado */
  --text-inverse:   #060b17;   /* Texto sobre fundos claros/gold */

  /* ── BRAND MARK — Gold ── */
  --gold-core:  #d4a843;              /* Cor do "X" da logo — uso restrito */
  --gold-bright: #e8c56a;             /* Hover/glow do gold mark */
  --gold-dim:   rgba(212, 168, 67, 0.12); /* Background sutil de destaque */

  /* ── ACTION — Indigo (única cor de ação) ── */
  --action-core:   #5b5ef4;              /* Botões primários, links, estados ativos */
  --action-bright: #7c7ff8;              /* Hover de botão primary */
  --action-muted:  rgba(91, 94, 244, 0.15); /* Item ativo sidebar, hover de row */
  --action-glow:   rgba(91, 94, 244, 0.25); /* Box-shadow hover botão primary */
  --action-ring:   rgba(91, 94, 244, 0.35); /* Focus ring de input */

  /* ── STATUS SEMÂNTICO ── */
  --status-success:    #10b981;
  --status-success-bg: rgba(16, 185, 129, 0.12);
  --status-success-bd: rgba(16, 185, 129, 0.3);

  --status-warning:    #d97706;
  --status-warning-bg: rgba(217, 119, 6, 0.12);
  --status-warning-bd: rgba(217, 119, 6, 0.3);

  --status-error:      #ef4444;
  --status-error-bg:   rgba(239, 68, 68, 0.12);
  --status-error-bd:   rgba(239, 68, 68, 0.3);

  --status-info:       #38bdf8;
  --status-info-bg:    rgba(56, 189, 248, 0.12);
  --status-info-bd:    rgba(56, 189, 248, 0.3);

  --status-gold:       #d4a843;
  --status-gold-bg:    rgba(212, 168, 67, 0.12);
  --status-gold-bd:    rgba(212, 168, 67, 0.3);

  /* ── SOMBRAS ── */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-action:  0 4px 16px rgba(91, 94, 244, 0.25);
  --shadow-gold:    0 4px 16px rgba(212, 168, 67, 0.2);
  --shadow-success: 0 2px 8px rgba(16, 185, 129, 0.2);
  --shadow-error:   0 2px 8px rgba(239, 68, 68, 0.2);

  /* ── BORDER RADIUS ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ── ESPAÇAMENTO (base 4px) ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Z-INDEX ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-top:      500;

  /* ── TRANSITIONS ── */
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-micro:  150ms;
  --duration-base:   200ms;
  --duration-smooth: 300ms;

  /* ── LAYOUT ── */
  --sidebar-width:     240px;
  --content-max-width: 1440px;
  --content-padding:   var(--space-6);  /* 24px */
}

/* ── Reset de fonte global ── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  background-color: var(--bg-deep-space);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Tipografia utilitária ── */
.font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary  { color: var(--text-tertiary) !important; }
.text-action    { color: var(--action-core) !important; }
.text-gold      { color: var(--gold-core) !important; }
.text-success   { color: var(--status-success) !important; }
.text-warning   { color: var(--status-warning) !important; }
.text-error     { color: var(--status-error) !important; }
.text-info      { color: var(--status-info) !important; }

/* ── Headings reset ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  margin: 0;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-normal);
}

h1 { font-size: var(--text-display-xl); letter-spacing: var(--tracking-tighter); line-height: var(--leading-tight); }
h2 { font-size: var(--text-display-l);  letter-spacing: var(--tracking-tight);   line-height: var(--leading-snug); }
h3 { font-size: var(--text-heading);    letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-subheading); font-weight: var(--weight-semibold); }
h5 { font-size: var(--text-body);       font-weight: var(--weight-semibold); }
h6 { font-size: var(--text-body-sm);    font-weight: var(--weight-semibold); }

/* ── Section labels ── */
.section-label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
}

/* ── Valores numéricos / financeiros ── */
.value-display {
  font-family: var(--font-sans);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}

.value-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ── Code / API ── */
code, pre, .code-inline {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Focus ring global (acessibilidade) ── */
:focus-visible {
  outline: 2px solid var(--action-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Scrollbar customizada ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-navy-canvas);
}
::-webkit-scrollbar-thumb {
  background: var(--border-visible);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ── Seleção de texto ── */
::selection {
  background: var(--action-muted);
  color: var(--text-primary);
}