/* ===========================
   FILE: styles/tokens.css
   =========================== */
:root {
  /* Cores de marca */
  --brand-900: #0f3e3b;
  --brand-800: #0f766e;
  --brand-700: #127a72;
  --brand-600: #0ea5a3;
  --brand-500: #14b8a6;
  --brand-400: #2dd4bf;
  --brand-100: #e6fbf7;
  --brand-050: #f4fbfa;

  --brand: var(--brand-700);
  --brand-contrast: #ffffff;
  --brand-gradient: linear-gradient(90deg, var(--brand-800), var(--brand-600));

  /* Acento */
  --accent-700: #9a4a0a;
  --accent-600: #b45309;
  --accent-500: #d97706;
  --accent-100: #fff3e6;
  --accent: var(--accent-600);
  --accent-contrast: #1f2937;

  /* Neutros */
  --bg: var(--brand-050);
  --surface: #ffffff;
  --surface-2: #f7faf9;
  --text: #0b1320;
  --muted: #5b677a;
  --border: #dfe3eb;

  /* Estados & foco */
  --success: #0ea5a3;
  --warning: #f59e0b;
  --danger: #dc2626;
  --focus-ring: #5b9aff;
  --link: var(--text);
  --link-hover: var(--brand-900);

  /* Espaçamentos (8px) */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */

  /* Tipografia */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --fs-1: clamp(0.95rem, 1.2vw, 1rem);
  --fs-2: clamp(1.05rem, 1.4vw, 1.125rem);
  --fs-3: clamp(1.25rem, 2vw, 1.375rem);
  --fs-4: clamp(1.5rem, 2.6vw, 1.75rem);
  --fs-5: clamp(1.875rem, 3vw, 2.25rem);
  --lh-tight: 1.2;
  --lh-base: 1.55;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Raio & sombras */
  --radius-1: 0.5rem;
  --radius-2: 0.75rem;
  --radius-3: 1rem;

  --shadow-1: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04);
  --shadow-2: 0 8px 24px rgba(17, 24, 39, 0.12);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);

  /* Header & Dock */
  --header-h: 72px;
  --hero-overlap: 1rem;
  --control-h: 44px;

  /* Container e breakpoints (mobile-first) */
  --container: 72rem; /* ~1152px */

  /* Breakpoints (usar em @media (min-width)) */
  /* tablet */ /* 48rem = 768px */
  /* notebook */ /* 64rem = 1024px */
  /* desktop */ /* 80rem = 1280px */
}

/* Dark-ready: base de contraste, sem inverter brand */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1518;
    --surface: #141b1f;
    --surface-2: #0f1417;
    --text: #e6edf3;
    --muted: #9aa8b3;
    --border: #24313a;
    --shadow-1: none; /* menos sombra em dark */
    --shadow-2: none;
  }
}