/*
 * ============================================================
 *  NEXTO AGENCY — Design Tokens
 *  Converted from documentation format to valid CSS
 *  Source: src/styles/design-tokens.css
 * ============================================================
 */

/* ── DEFAULT TOKEN SET (diseno-web · ecommerce · rediseno-web) ── */
:root {
  /* Colors — surfaces */
  --bg:                #F5F8FF;
  --bg-soft:           #EEF4FF;
  --white:             #FFFFFF;

  /* Colors — text */
  --ink:               #252432;
  --ink-soft:          #3E3B57;
  --muted:             #8987A1;

  /* Colors — accent */
  --accent:            #4E47FF;
  --accent-soft:       #8D87FF;

  /* Colors — borders */
  --line:              #D6DDED;
  --line-soft:         #DAD4EC;

  /* Colors — glass */
  --glass:             rgba(255, 255, 255, 0.62);
  --glass-strong:      rgba(255, 255, 255, 0.84);
  --glass-border:      rgba(255, 255, 255, 0.72);

  /* Colors — dark panels */
  --dark-panel:        #1C1A2A;
  --dark-panel-soft:   #2A2840;

  /* Radii */
  --radius-sm:         16px;
  --radius-md:         24px;
  --radius-lg:         34px;
  --radius-xl:         46px;

  /* Layout */
  --container:         min(1320px, calc(100vw - 48px));

  /* Easing */
  --ease:              cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-soft:       0 24px 60px rgba(37, 36, 50, 0.08), 0 4px 18px rgba(78, 71, 255, 0.05);
  --shadow-float:      0 38px 100px rgba(43, 45, 85, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --shadow-deep:       0 48px 140px rgba(25, 26, 54, 0.28);

  /* Blur */
  --blur:              blur(18px) saturate(145%);

  /* Gradients */
  --gradient-text-primary:   linear-gradient(135deg, #5A55FF 0%, #9A95FF 52%, #C8C5FF 100%);
  --gradient-text-closing:   linear-gradient(135deg, #8D87FF 0%, #AAA6FF 48%, #D2CFFF 100%);

  /* Fonts */
  --font-primary:      'DM Sans', sans-serif;
  --font-display:      'Raleway', sans-serif;
}

/* ── LANDING TOKEN SET (landing-pages · seo) ── */
body.token-landing {
  --bg-soft:           #F2F5F7;
  --bg-ice:            #FAFBFC;
  --ink:               #192A3D;
  --ink-soft:          #3A4F66;
  --muted:             #6B7D92;
  --muted-strong:      #53657B;
  --accent-blue:       #2872FA;
  --accent-glow:       rgba(78, 71, 255, 0.18);
  --line:              rgba(25, 42, 61, 0.10);
  --line-strong:       rgba(25, 42, 61, 0.16);
  --glass:             rgba(255, 255, 255, 0.66);
  --glass-strong:      rgba(255, 255, 255, 0.82);
  --glass-border:      rgba(255, 255, 255, 0.78);
  --dark:              #161D2A;
  --dark-soft:         #1E2636;
  --dark-line:         rgba(255, 255, 255, 0.09);
  --dark-panel:        #171E2B;
  --radius-lg:         32px;
  --radius-xl:         42px;
  --container:         min(1320px, calc(100vw - 40px));
  --shadow-soft:       0 18px 44px rgba(34, 52, 83, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-float:      0 28px 80px rgba(34, 52, 83, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --shadow-deep:       0 36px 90px rgba(13, 18, 29, 0.32);
  --blur:              blur(18px) saturate(148%);
  --gradient-text-primary: linear-gradient(135deg, #5A55FF 0%, #918BFF 52%, #C7C4FF 100%);
  --font-serif:        'Cinzel', serif;
}

/* ── IA TOKEN SET (soluciones-ia) ── */
body.token-ia {
  --bg-soft:           #F0F5FF;
  --ink-soft:          #3C3954;
  --glass-strong:      rgba(255, 255, 255, 0.82);
  --gradient-text-primary: linear-gradient(135deg, #342FFF 0%, #7B73FF 100%);
}

/* ── SERVICIO TOKEN SET (servicio — dark-mode variant) ── */
body.token-servicio {
  --bg:                #FAFAFA;
  --white:             #FFFFFF;
  --dark:              #0A0A0B;
  --gray-900:          #141415;
  --gray-500:          #71717A;
  --gray-300:          #D4D4D8;
  --accent:            #4F46E5;
  --accent-glow:       rgba(79, 70, 229, 0.3);
  --accent-light:      #818CF8;
  --border:            rgba(0, 0, 0, 0.08);
  --border-dark:       rgba(255, 255, 255, 0.12);
  --r-md:              16px;
  --r-lg:              32px;
  --r-xl:              48px;
  --r-xxl:             80px;
  --space-section:     200px;
  --shadow-float:      0 32px 64px -16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
  --font-primary:      'Inter', sans-serif;
}

@media (max-width: 820px) {
  :root {
    --container: min(100vw - 24px, 1320px);
  }
}