/* ============================================================
   DESIGN TOKENS — Portfolio Dashboard
   Palette: sober dark with teal accent, green/red for P&L
   Typography: system stacks only (offline requirement)
   ============================================================ */

:root {
  /* ── Palette ───────────────────────────────────────────── */
  --fundo:          hsl(222 18% 7%);
  --superficie:     hsl(222 14% 12%);
  --superficie-alt: hsl(222 12% 15%);
  --borda:          hsl(222 10% 22%);
  --borda-fina:     hsl(222 10% 18%);

  --texto:          hsl(210 20% 94%);
  --texto-suave:    hsl(215 12% 56%);
  --texto-muted:    hsl(215 10% 40%);

  --accent:         hsl(172 65% 48%);
  --accent-dim:     hsl(172 40% 30%);
  --accent-glow:    hsl(172 65% 48% / 0.15);

  --positivo:       hsl(155 58% 48%);
  --positivo-bg:    hsl(155 58% 48% / 0.12);
  --negativo:       hsl(4  68% 58%);
  --negativo-bg:    hsl(4  68% 58% / 0.12);

  /* ── Typography ────────────────────────────────────────── */
  --ff-body:  "Helvetica Neue", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.8125rem; /* 13px */
  --fs-base: 0.9375rem; /* 15px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.5rem;    /* 24px */
  --fs-xl:   2.25rem;   /* 36px */
  --fs-hero: 3rem;      /* 48px */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  --lh-tight:  1.2;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* ── Spacing (4px grid) ────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ── Motion ────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 350ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-card: 0 1px 3px hsl(222 20% 4% / 0.4), 0 4px 12px hsl(222 20% 4% / 0.25);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* ── Breakpoints (used via @media) ─────────────────────── */
  --bp-sm:  36rem;   /* 576px  */
  --bp-md:  48rem;   /* 768px  */
  --bp-lg:  64rem;   /* 1024px */
  --bp-xl:  80rem;   /* 1280px */
}