/* ============================================
   GRUPO VALSER — Design Tokens v2
   Rounded · Friendly · Animated
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --gold:        #ffb400;
  --gold-dark:   #d99a00;
  --gold-light:  #ffe082;
  --orange:      #ff8300;
  --blue:        #2d9cdb;
  --blue-dark:   #1a7ab5;
  --navy:        #0b1f3b;
  --navy-light:  #132d52;
  --slate:       #4f5b66;
  --gray-light:  #e5e7eb;
  --gray-100:    #f3f4f6;
  --gray-200:    #d1d5db;
  --gray-300:    #9ca3af;
  --green:       #27ae60;
  --purple:      #7c3aed;
  --rose:        #e74c8b;
  --white:       #ffffff;
  --black:       #000000;

  /* ── Semantic (Light) ── */
  --bg-primary:     #f3f4f6;
  --bg-secondary:   #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #fafafa;
  --bg-navbar:      rgba(255,255,255,.72);
  --bg-footer:      #0b1f3b;
  --bg-glass:       rgba(255,255,255,.55);

  --text-primary:   #0b1f3b;
  --text-secondary: #4f5b66;
  --text-muted:     #9ca3af;
  --text-inverse:   #ffffff;

  --border-color:   rgba(0,0,0,.08);
  --border-card:    rgba(0,0,0,.06);

  --shadow-xs:  0 1px 3px rgba(0,0,0,.03);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.04);
  --shadow-md:  0 6px 24px rgba(0,0,0,.06);
  --shadow-lg:  0 14px 44px rgba(0,0,0,.08);
  --shadow-xl:  0 28px 72px rgba(0,0,0,.1);
  --shadow-glow:0 0 50px rgba(255,180,0,.14);
  --shadow-card-hover: 0 20px 56px rgb(255, 131, 0);

  /* ── Typography ── */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.25rem;
  --fs-5xl:  4rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* ── Spacing ── */
  --space-2xs: .125rem;
  --space-xs:  .25rem;
  --space-sm:  .5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ── Layout ── */
  --container-max:  1200px;
  --container-wide: 1440px;
  --navbar-height:  76px;

  /* ── ROUNDED — friendly radii ── */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   26px;
  --radius-xl:   34px;
  --radius-2xl:  48px;
  --radius-full: 9999px;

  /* ── Easings & Transitions ── */
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --ease-elastic:  cubic-bezier(.68,-.55,.27,1.55);
  --transition-fast:  180ms var(--ease-out-expo);
  --transition-base:  380ms var(--ease-out-expo);
  --transition-slow:  650ms var(--ease-out-expo);
  --transition-theme: 450ms ease;

  /* ── Icon Sizes (medium-friendly) ── */
  --icon-sm:  20px;
  --icon-md:  24px;
  --icon-lg:  32px;
  --icon-xl:  40px;
  --icon-2xl: 50px;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bg-primary:     #060e1a;
  --bg-secondary:   #0d1b2e;
  --bg-card:        #0f2035;
  --bg-card-hover:  #152c4a;
  --bg-navbar:      rgba(6,14,26,.78);
  --bg-footer:      #040a14;
  --bg-glass:       rgba(11,31,59,.55);

  --text-primary:   #e8ecf1;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-inverse:   #0b1f3b;

  --border-color:   rgba(255,255,255,.07);
  --border-card:    rgba(255,255,255,.06);

  --shadow-xs:  0 1px 3px rgba(0,0,0,.15);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.22);
  --shadow-md:  0 6px 24px rgba(0,0,0,.28);
  --shadow-lg:  0 14px 44px rgba(0,0,0,.38);
  --shadow-xl:  0 28px 72px rgba(0,0,0,.48);
  --shadow-glow:0 0 60px rgba(255,180,0,.1);
  --shadow-card-hover: 0 20px 56px rgba(0,0,0,.42);
}