/* ─────────────────────────────────────────────────────────
   M&Co — Design Tokens · Dark Aurora
   ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ── Núcleo oscuro ── */
  --bg:           #04070a;
  --bg-2:         #070b10;
  --bg-3:         #0b1016;
  --white:        #ffffff;

  --surface:      rgba(255,255,255,0.035);
  --surface-2:    rgba(255,255,255,0.065);
  --surface-3:    rgba(255,255,255,0.10);

  /* ── Texto ── */
  --text:         #eef3f1;
  --text-2:       rgba(233,240,237,0.74);
  --text-3:       rgba(226,234,231,0.52);
  --text-4:       rgba(220,229,226,0.34);

  /* ── Aurora ── */
  --green:        #46e3a6;
  --green-soft:   #7beec0;
  --teal:         #38d2c6;
  --orange:       #f2a45c;
  --peach:        #f5c08e;

  --grad-cta:     linear-gradient(100deg, #55e3a5 0%, #b9e488 48%, #f3ae62 100%);
  --grad-text:    linear-gradient(105deg, #8cf0c6 10%, #d9ecab 50%, #f6c896 90%);
  --glow-green:   rgba(70,227,166,0.18);
  --glow-orange:  rgba(242,164,92,0.14);

  /* ── Mapa de tokens heredados (tema claro → oscuro) ── */
  --paper:        var(--bg);
  --paper-2:      #0a0f14;
  --paper-3:      #121820;
  --ink:          var(--text);
  --ink-2:        var(--text-2);
  --ink-3:        var(--text-3);
  --ink-4:        var(--text-4);

  --coral:        var(--orange);
  --coral-light:  rgba(242,164,92,0.12);
  --coral-mid:    rgba(242,164,92,0.38);
  --coral-dark:   #f6bd82;

  --blue-wash:    rgba(56,210,198,0.10);
  --blue-mid:     rgba(56,210,198,0.38);
  --blue-deep:    #5cdcd1;

  --green-wash:   rgba(70,227,166,0.10);
  --green-mid:    rgba(70,227,166,0.38);
  --green-deep:   #63e8b1;

  --amber-wash:   rgba(245,192,142,0.12);

  /* ── Bordes ── */
  --border:       rgba(255,255,255,0.08);
  --border-mid:   rgba(255,255,255,0.14);
  --border-heavy: rgba(255,255,255,0.22);

  /* ── Tipografía ── */
  --font-display: Arial, Helvetica, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Radios ── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 6px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.55);
  --shadow-xl:  0 40px 100px rgba(0,0,0,0.6);
  --shadow-glow-green:  0 0 44px rgba(70,227,166,0.18);
  --shadow-glow-orange: 0 0 44px rgba(242,164,92,0.16);

  /* ── Espaciado ── */
  --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;

  /* ── Transiciones ── */
  --ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:    cubic-bezier(0, 0, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}