/* ==========================================================================
   Método X — Design Tokens
   Replica do DS do Figma (Primitives + Semantic + Spacing + Radius + Motion).
   Fonte da verdade: Figma file Qax6SaQFO0CHUWahM9THrf
   ========================================================================== */

:root {
  /* ---------- Color: Neutral ---------- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F5F5F5;
  --color-neutral-100: #E5E5E5;
  --color-neutral-200: #B8B8B8;
  --color-neutral-300: #8A8A8A;
  --color-neutral-400: #5C5C5C;
  --color-neutral-500: #404040;
  --color-neutral-600: #2E2E2E;
  --color-neutral-700: #1F1F1F;
  --color-neutral-800: #161616;
  --color-neutral-900: #0C0C0C;
  --color-neutral-950: #050505;

  /* ---------- Color: Brand (amarelo neon Método X) ---------- */
  --color-brand-50:  #FFFCE0;
  --color-brand-100: #FFF8B3;
  --color-brand-200: #FFF280;
  --color-brand-300: #FFF166;
  --color-brand-400: #FFEB38;
  --color-brand-500: #FFE700;
  --color-brand-600: #E6D000;
  --color-brand-700: #B8A600;
  --color-brand-800: #8A7C00;
  --color-brand-900: #4D4500;

  /* ---------- Color: Feedback ---------- */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;

  /* ---------- Semantic: Background ---------- */
  --bg-primary:   #050505;
  --bg-secondary: var(--color-neutral-800);
  --bg-tertiary:  var(--color-neutral-700);
  --bg-inverse:   var(--color-brand-500);
  --bg-light:     var(--color-neutral-0);

  /* ---------- Semantic: Text ---------- */
  --text-primary:        var(--color-neutral-0);
  --text-secondary:      var(--color-neutral-100);
  --text-muted:          var(--color-neutral-200);
  --text-subtle:         var(--color-neutral-300);
  --text-quiet:          var(--color-neutral-400);
  --text-accent:         var(--color-brand-500);
  --text-inverse:        var(--color-neutral-950);
  --text-inverse-muted:  var(--color-neutral-600);

  /* ---------- Semantic: Border ---------- */
  --border-subtle:  var(--color-neutral-800);
  --border-default: var(--color-neutral-700);
  --border-strong:  var(--color-neutral-500);
  --border-focus:   var(--color-brand-500);

  /* ---------- Brand states ---------- */
  --brand-default: var(--color-brand-500);
  --brand-hover:   var(--color-brand-400);
  --brand-active:  var(--color-brand-600);
  --brand-subtle:  var(--color-brand-900);
  --brand-fg:      var(--color-neutral-950);

  /* ---------- Typography ---------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ---------- Spacing (base 8/4) ---------- */
  --space-0:  0;
  --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;
  --space-40: 160px;

  /* ---------- Radius ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ---------- Shadows / Glow (assinatura) ---------- */
  --shadow-elevated: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
  --shadow-modal:    0 32px 64px -16px rgba(0, 0, 0, 0.6);

  --glow-yellow-sm: 0 0 24px rgba(255, 231, 0, 0.15);
  --glow-yellow-md: 0 0 48px rgba(255, 231, 0, 0.25);
  --glow-yellow-lg: 0 0 96px rgba(255, 231, 0, 0.35);
  --glow-yellow-xl: 0 0 128px rgba(255, 231, 0, 0.45);

  /* ---------- Motion ---------- */
  --duration-instant: 0ms;
  --duration-fast:    150ms;
  --duration-default: 250ms;
  --duration-medium:  400ms;
  --duration-slow:    600ms;
  --duration-slower:  800ms;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 80px);
}