/* ─── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* ── Dark executive palette ── */
  --bg:              #070A0F;
  --surface:         #0E131B;
  --surface-elevated:#151C26;
  --primary:         #22D3EE;
  --secondary:       #8B5CF6;
  --accent:          #A3FF12;
  --text-primary:    #F8FAFC;
  --text-secondary:  #94A3B8;
  --border:          rgba(255,255,255,0.08);

  /* ── Legacy aliases (mantienen compatibilidad con inline styles existentes) ── */
  --ink:      #0E131B;
  --paper:    #F8FAFC;
  --steel:    #22D3EE;
  --signal:   #A3FF12;
  --copper:   #8B5CF6;
  --muted:    #94A3B8;
  --hairline: rgba(255,255,255,0.08);

  /* Type scale  13/15/18/22/30/44/64 */
  --t-xs:  clamp(12px, 1.2vw, 13px);
  --t-sm:  clamp(14px, 1.4vw, 15px);
  --t-md:  clamp(16px, 1.8vw, 18px);
  --t-lg:  clamp(20px, 2.2vw, 22px);
  --t-xl:  clamp(26px, 2.8vw, 30px);
  --t-2xl: clamp(34px, 3.8vw, 44px);
  --t-3xl: clamp(48px, 5.5vw, 64px);

  /* Spacing (4-based) */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4:  16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Responsive spacing */
  --gap-mobile: clamp(var(--s-3), 2vw, var(--s-4));
  --gap-tablet: clamp(var(--s-4), 3vw, var(--s-6));
  --gap-desktop: clamp(var(--s-6), 4vw, var(--s-10));
  
  --pad-mobile: clamp(var(--s-4), 3vw, var(--s-6));
  --pad-tablet: clamp(var(--s-6), 4vw, var(--s-8));
  --pad-desktop: clamp(var(--s-8), 5vw, var(--s-16));

  /* Layout */
  --w-text: 680px;
  --w-wide: 1100px;

  /* Border */
  --radius: 4px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  200ms;

  /* Breakpoints (for reference in comments) */
  /* Mobile: 320px - 479px */
  /* Mobile L: 480px - 767px */
  /* Tablet: 768px - 1023px */
  /* Desktop: 1024px - 1279px */
  /* Desktop L: 1280px+ */
}

/* Tablet and larger */
@media (min-width: 768px) {
  :root {
    --gap-mobile: var(--s-4);
    --gap-tablet: var(--s-6);
    --gap-desktop: var(--s-8);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --gap-tablet: var(--s-8);
    --gap-desktop: var(--s-10);
  }
}