/* ============================================
   SECKE SISTEMAS — Design Tokens
   ============================================ */

:root {
  /* --- Superfícies --- */
  --bg-base: #0a0b0f;
  --bg-base-rgb: 10, 11, 15;
  --bg-surface: #12141a;
  --bg-elevated: #181b23;
  --bg-elevated-hover: #1e2230;
  --bg-overlay: rgba(10, 11, 15, 0.86);

  /* --- Texto --- */
  --text-primary: #f3f4f6;
  --text-secondary: #c2c5d1;
  --text-muted: #8b8fa3;
  --text-faint: #5b5f73;

  /* --- Bordas --- */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* --- Acentos --- */
  --blue-500: #3b82f6;
  --blue-400: #5b9bf8;
  --blue-300: #8ab8fb;
  --blue-glow: rgba(59, 130, 246, 0.35);

  --violet-500: #7c5cf0;
  --violet-400: #9b81f5;
  --violet-glow: rgba(124, 92, 240, 0.3);

  --gold-500: #d4a843;
  --gold-glow: rgba(212, 168, 67, 0.25);

  --green-500: #34d399;
  --red-500: #f15a5a;

  /* --- Gradientes --- */
  --grad-primary: linear-gradient(135deg, var(--blue-500) 0%, var(--violet-500) 100%);
  --grad-text: linear-gradient(135deg, #ffffff 0%, #c2c5d1 60%, #8ab8fb 100%);
  --grad-surface-radial: radial-gradient(
    circle at 50% 0%,
    rgba(124, 92, 240, 0.12) 0%,
    rgba(59, 130, 246, 0.05) 35%,
    transparent 70%
  );

  /* --- Tipografia --- */
  --font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --fs-2xs: 0.6875rem;   /* 11px */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md: 1.125rem;     /* 18px */
  --fs-lg: 1.375rem;     /* 22px */
  --fs-xl: 1.75rem;      /* 28px */
  --fs-2xl: 2.25rem;     /* 36px */
  --fs-3xl: 3rem;        /* 48px */
  --fs-4xl: 3.75rem;     /* 60px */
  --fs-5xl: 4.5rem;      /* 72px */

  /* --- Espaçamento --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Raio --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* --- Sombra --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-glow-blue: 0 0 0 1px rgba(59, 130, 246, 0.4), 0 8px 32px rgba(59, 130, 246, 0.25);
  --shadow-glow-violet: 0 0 0 1px rgba(124, 92, 240, 0.4), 0 8px 32px rgba(124, 92, 240, 0.22);

  /* --- Transições --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 150ms;
  --t-base: 280ms;
  --t-slow: 480ms;

  /* --- Container --- */
  --container-max: 1180px;
  --container-pad: 24px;
}

@media (max-width: 640px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.5rem;
    --fs-5xl: 2.75rem;
    --fs-2xl: 1.75rem;
    --container-pad: 20px;
  }
}

/* ============================================
   Reset
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

html { overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--violet-glow);
  color: #fff;
}