/* ============================================================
   Vision — tokens de marca
   Derivado de design-system/colors_and_type.css.
   Fonte de verdade é o design system: ao atualizá-lo, regere este arquivo
   ajustando apenas os caminhos de fonte (fonts/ -> ../fonts/).
   Não edite tokens só aqui — a divergência volta como bug visual.
   ============================================================ */

/* ============================================================
   VISION — Colors & Type
   Foundation tokens for the Vision brand.
   ============================================================ */

/* -----------------------------------------
   FONTS
   ----------------------------------------- */

@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-Light.b0d2ee620597.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("../fonts/TheSeasons-LightItalic.1eaab024efc2.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  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-Italic.28dc313ccccd.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  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-BoldItalic.8ce853461586.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* -----------------------------------------
   COLORS
   ----------------------------------------- */

:root {
  /* Brand palette — five core colors */
  --vision-black: #0A0A0A;
  --vision-white: #FFFFFF;
  --vision-purple-light: #C7B6FF;     /* soft surfaces, hover-fill on dark */
  --vision-purple: #A993FF;           /* brand — "roxo claro" */
  --vision-purple-strong: #5B3FE0;    /* press / emphasis */

  /* Legacy aliases kept for back-compat with existing components */
  --vision-purple-bright: #8A6BFF;
  --vision-purple-deep: var(--vision-purple-strong);
  --vision-purple-soft: #E5DDFF;
  --vision-purple-haze: #F4F0FF;

  /* Neutrals — Vision lives in a high-contrast B&W world */
  --vision-ink: #14141A;             /* near-black with cooler tone for text */
  --vision-graphite: #2A2A33;        /* secondary text on dark or muted heading on light */
  --vision-slate: #5C5C66;           /* meta / muted */
  --vision-mist: #B8B8C2;            /* disabled / divider on dark */
  --vision-cloud: #E5E5EB;           /* divider on light */
  --vision-paper: #F5F4F7;           /* soft page background */

  /* Semantic */
  --vision-success: #4FC58A;
  --vision-warning: #F2B544;
  --vision-danger:  #FF5A5F;
  --vision-info:    var(--vision-purple);

  /* Surfaces (light theme defaults) */
  --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 theme defaults) */
  --fg-1: var(--vision-ink);         /* primary text */
  --fg-2: var(--vision-graphite);    /* secondary text / headings on light */
  --fg-3: var(--vision-slate);       /* meta */
  --fg-4: var(--vision-mist);        /* tertiary / placeholder */
  --fg-on-purple: var(--vision-white);
  --fg-on-dark: var(--vision-white);

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

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

  /* -----------------------------------------
     TYPOGRAPHY
     ----------------------------------------- */

  --font-display: "The Seasons", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Darker Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* No brand mono typeface — Vision uses the system monospace stack. */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type ramp — fluid-ish but stable. Values in px for fidelity. */
  --fs-display-1: 120px;   /* hero / cover */
  --fs-display-2: 88px;
  --fs-display-3: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body-lg: 20px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  /* Line-height */
  --lh-tight: 1.02; /* @kind other */
  --lh-display: 1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-body: 1.55; /* @kind other */
  --lh-loose: 1.7; /* @kind other */

  /* Letter-spacing */
  --ls-display: -0.025em; /* @kind other */
  --ls-heading: -0.015em; /* @kind other */
  --ls-body: 0; /* @kind other */
  --ls-caps: 0.14em; /* eyebrows / overlines — @kind other */
  --ls-button: 0.02em; /* @kind other */

  /* Weights — Darker Grotesque is variable 300-900 */
  --fw-light: 300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-black: 800; /* @kind other */

  /* -----------------------------------------
     SHAPE / SPACE / MOTION
     ----------------------------------------- */

  --radius-xs: 4px;
  --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;
  --space-9: 96px;
  --space-10: 128px;

  /* Shadows — soft, never colored. Vision is high-contrast & clean. */
  --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-4: 0 28px 64px rgba(10,10,10,0.16), 0 6px 14px rgba(10,10,10,0.06);
  --shadow-focus: 0 0 0 3px rgba(169, 147, 255, 0.35);

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0); /* @kind other */
  --dur-1: 120ms; /* @kind other */
  --dur-2: 220ms; /* @kind other */
  --dur-3: 360ms; /* @kind other */
  --dur-4: 600ms; /* @kind other */
}

/* -----------------------------------------
   DARK THEME
   Vision leans dark frequently — purple pops on near-black.
   ----------------------------------------- */

: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.08);
  --border-2: rgba(255, 255, 255, 0.16);
  --border-strong: #F5F4F7;

  --accent: var(--vision-purple);
  --accent-hover: #C3B1FF;
  --accent-press: #8A6BFF;
}

/* -----------------------------------------
   SEMANTIC ELEMENT STYLES
   Use these by adding classes (.h1, .body, .eyebrow) or relying on
   base element tags inside a .vision-typography scope.
   ----------------------------------------- */

.vision-typography {
  font-family: var(--font-sans);
  color: var(--fg-1);
}
.vision-typography * {
  font-family: inherit;
}

.display-1, h1.display, .vision-typography h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* Headings inherit color from surface — do not hard-set fg here.
   Set color explicitly per-context (e.g. .v-hero__title) or rely on
   the parent surface color cascading. */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: inherit;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: inherit;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: inherit;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: inherit;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  color: inherit;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: inherit;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.eyebrow, .overline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-overlay);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
}