/* ============================================================
   VISION — Shared Design Tokens
   Foundation compartilhada entre o dashboard e as ferramentas
   do VisionHub. Baseado em docs/vision-design-system/.
   ============================================================ */

/* -----------------------------------------
   FONTS  (referenciadas do design system)
   ----------------------------------------- */
@font-face {
  font-family: "Darker Grotesque";
  src: url("../fonts/DarkerGrotesque-VariableFont_wght.a8e80bbae356.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("../fonts/TheSeasons-Regular.38675d34d7a4.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("../fonts/TheSeasons-Bold.4620a15f707c.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("../fonts/TheSeasons-Light.b0d2ee620597.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------
   TOKENS
   ----------------------------------------- */
:root {
  /* Brand */
  --vision-black: #0A0A0A;
  --vision-white: #FFFFFF;
  --vision-purple-light: #C7B6FF;
  --vision-purple: #A993FF;
  --vision-purple-strong: #5B3FE0;

  /* Único tom fora da família roxa: separa o papel Cliente dos internos.
     Contraste com branco 4,78:1 — passa em texto pequeno. */
  --vision-blue: #3F6BE0;
  --vision-purple-bright: #8A6BFF;

  /* Neutrals */
  --vision-ink: #14141A;
  --vision-graphite: #2A2A33;
  --vision-slate: #5C5C66;
  --vision-mist: #B8B8C2;
  --vision-cloud: #E5E5EB;
  --vision-paper: #F5F4F7;

  /* Semantic */
  --vision-success: #4FC58A;
  --vision-warning: #F2B544;
  --vision-danger:  #FF5A5F;

  /* Surfaces (light) */
  --bg-0: var(--vision-white);
  --bg-1: var(--vision-paper);
  --bg-2: var(--vision-cloud);
  --surface-card: var(--vision-white);
  --surface-overlay: rgba(10, 10, 10, 0.04);
  --surface-overlay-strong: rgba(10, 10, 10, 0.08);

  /* Foreground (light) */
  --fg-1: var(--vision-ink);
  --fg-2: var(--vision-graphite);
  --fg-3: var(--vision-slate);
  --fg-4: var(--vision-mist);

  /* Borders */
  --border-1: var(--vision-cloud);
  --border-2: rgba(10, 10, 10, 0.12);

  /* Accent */
  --accent: var(--vision-purple);
  --accent-hover: var(--vision-purple-bright);
  --accent-press: var(--vision-purple-strong);

  /* Type */
  --font-display: "The Seasons", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Darker Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape / space */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(10,10,10,0.04), 0 1px 1px rgba(10,10,10,0.03);
  --shadow-2: 0 4px 14px rgba(10,10,10,0.06), 0 1px 3px rgba(10,10,10,0.04);
  --shadow-3: 0 12px 32px rgba(10,10,10,0.10), 0 2px 6px rgba(10,10,10,0.05);
  --shadow-focus: 0 0 0 3px rgba(169, 147, 255, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms;
}

/* -----------------------------------------
   DARK THEME
   ----------------------------------------- */
:root.dark,
[data-theme="dark"] {
  --bg-0: #0A0A0A;
  --bg-1: #14141A;
  --bg-2: #1F1F27;
  --surface-card: #14141A;
  --surface-overlay: rgba(255, 255, 255, 0.05);
  --surface-overlay-strong: rgba(255, 255, 255, 0.10);

  --fg-1: #F5F4F7;
  --fg-2: #C8C8D2;
  --fg-3: #8A8A95;
  --fg-4: #5C5C66;

  --border-1: rgba(255, 255, 255, 0.10);
  --border-2: rgba(255, 255, 255, 0.16);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.5);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.6);
}