/* Mavi.method v2 — Design Tokens */
/* Single source of truth for colors, typography, spacing, motion, layout */

:root {
  /* =========================================================
     COLOR
     ========================================================= */

  /* Base dark (hero + seções escuras) — graphite neutro */
  --bg-deep:       #0A0A0A;
  --bg-surface:    #121212;
  --bg-elevated:   #1A1A1A;
  --border-deep:   #242424;

  /* Base light — paper warm */
  --bg-canvas:     #F8F7F4;
  --bg-card:       #FFFFFF;
  --border-light:  #EFEBE2;

  /* Text dark */
  --text-primary-dark:   #FFFFFF;
  --text-secondary-dark: rgba(255, 255, 255, 0.65);
  --text-muted-dark:     rgba(255, 255, 255, 0.45);

  /* Text light — ink scale */
  --text-primary:   #0A0A0A;
  --text-secondary: #3A3A3A;
  --text-muted:     #6B6658;

  /* Accent — terracotta */
  --accent:        #C76F50;
  --accent-hover:  #8F3E1F;
  --accent-glow:   #FF9B6B;
  --accent-soft:   rgba(199, 111, 80, 0.1);
  --accent-rgb:    199 111 80;

  /* Semantic */
  --success: #7A8B6A;
  --danger:  #EF4444;
  --warning: #F59E0B;

  /* Semantic soft/text variants — sage para success (calmo), red mantido */
  --success-bg-soft:   #EDF0E8;
  --success-border:    #C9D2BC;
  --success-text-deep: #3F4A33;
  --success-text:      #5C6F4F;
  --danger-bg-soft:    #FEF2F2;
  --danger-text-deep:  #991B1B;
  --danger-text:       #DC2626;

  /* Chat-demo bubble colors */
  --msg-user-bg:   #8F3E1F;
  --msg-mavi-bg:   #1A1A1A;
  --msg-mavi-text: rgba(255, 255, 255, 0.85);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  42px;
  --text-5xl:  56px;
  --text-6xl:  72px;

  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.04em;

  /* =========================================================
     SPACING (multiples of 4)
     ========================================================= */
  --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;

  /* =========================================================
     RADIUS · SHADOW · MOTION · LAYOUT
     ========================================================= */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 100px;

  --shadow-subtle:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-elevated:  0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-floating:  0 20px 50px -10px rgba(0, 0, 0, 0.5);
  --shadow-cta-glow:  0 8px 20px rgb(var(--accent-rgb) / 0.25);

  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-micro:    150ms;
  --duration-standard: 250ms;
  --duration-reveal:   400ms;

  --container-max: 1200px;
}