/* assets/css/tokens.css */
:root {
  /* === Colors === */
  --nevoa: #f9f7fc;
  --nevoa-deep: #f0ebf5;
  --purpura: #8b6bbf;
  --purpura-light: #a68ed4;
  --purpura-pale: #e8dff2;
  --purpura-text: #5a3f8a;
  --dourado: #d4a254;
  --dourado-dark: #96711f;
  --dourado-medium: #b8892e;
  --dourado-light: #e8c484;
  --creme: #f5f0e5;
  --abismo: #2e1f4a;
  --abismo-soft: #4a3670;

  /* === Text-safe accent colors (WCAG AA on nevoa, white, AND creme) === */
  --purpura-text-safe: #7b5bae; /* 5.0:1 on white, 4.7:1+ on nevoa/creme */
  --dourado-text-safe: #7d6118; /* 5.8:1 on white, 5.1:1+ on all backgrounds */

  /* === Semantic colors === */
  --bg: var(--nevoa);
  --bg-card: #ffffff;
  --bg-surface: var(--nevoa-deep);
  --text-primary: var(--abismo);
  --text-secondary: #5e5478;
  --text-tertiary: #6e6389;
  --border: rgba(139, 107, 191, 0.15);
  --border-strong: rgba(139, 107, 191, 0.3);

  /* === Typography — Families === */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Outfit", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;

  /* === Typography — Scale (major third 1.25, base 18px) === */
  --text-display: clamp(2.5rem, 5vw, 4.5rem);
  --text-h1: clamp(2rem, 4vw, 3rem);
  --text-h2: clamp(1.5rem, 3vw, 2.25rem);
  --text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --text-body: clamp(1.125rem, 1.2vw, 1.25rem);
  --text-body-sm: 1rem;
  --text-caption: 0.875rem;
  --text-overline: 0.8125rem;
  --text-fine: 0.75rem;

  /* === Typography — Prose === */
  --prose-max: 720px;

  /* === Easing === */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Spacing === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;

  /* === Layout === */
  --content-max: 1200px;
  --content-padding: clamp(1.5rem, 5vw, 4rem);
}