/* ============================================
   NEXAVALLEY - Foundation Tokens
   Shared design values consumed by theme,
   component, page, and widget styles.
   Author: Jherson Martelo Medina
   ============================================ */

:root {
  --nv-color-brand-blue-light: #3DB7E4;
  --nv-color-brand-cyan: #0099FF;
  --nv-color-brand-blue-deep: #003087;
  --nv-color-brand-orange: #FE5000;
  --nv-color-brand-white: #FFFFFF;
  --nv-color-brand-green: #8BC400;
  --nv-color-brand-gold: #B97000;
  --nv-color-brand-sand: #E7CEA1;
  --nv-color-brand-warm-gray-1: #E0DED8;
  --nv-color-brand-black: #000000;
  --nv-color-surface-deep: #04060F;
  --nv-color-surface-navy: #080C1C;
  --nv-color-surface-ink: #071022;
  --nv-color-surface-off-white: #F5F8FF;
  --nv-color-surface-page-light: #F7F8F6;
  --nv-color-surface-partner-page: #F7F8FA;
  --nv-color-surface-partner-page-rgb: 247, 248, 250;
  --nv-color-surface-button-secondary-hover: #D9E2EC;
  --nv-color-border-button-secondary: rgba(0, 48, 135, 0.18);
  --nv-color-border-button-secondary-hover: rgba(0, 48, 135, 0.28);
  --nv-shadow-button-platform: 0 2px 8px rgba(254, 80, 0, 0.3);
  --nv-shadow-button-platform-hover: 0 4px 16px rgba(61, 183, 228, 0.28);

  /* Backward-compatible aliases used by existing widget CSS. */
  --blue-deep: var(--nv-color-brand-blue-deep);
  --blue-dark: var(--nv-color-brand-blue-deep);
  --blue-medium: var(--nv-color-brand-cyan);
  --blue-light: var(--nv-color-brand-blue-light);
  --blue-sky: var(--nv-color-brand-blue-light);
  --orange: var(--nv-color-brand-orange);
  --orange-light: #FE7A2B;
  --gold: var(--nv-color-brand-gold);
  --green: var(--nv-color-brand-green);
  --gray-icon: #52596B;
  --blue-icon: var(--nv-color-brand-cyan);
  --gray-100: var(--nv-color-surface-page-light);
  --gray-200: #EEF0F4;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-700: #374151;
  --gray-900: #111827;
  --bg-deep: var(--nv-color-surface-deep);
  --bg-navy: var(--nv-color-surface-navy);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text-soft: rgba(245, 248, 255, 0.72);
  --text-muted: rgba(245, 248, 255, 0.55);

  --white: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.15);

  --nv-radius-micro: 4px;
  --nv-radius-control: 6px;
  --nv-radius-card: 8px;
  --nv-radius-panel: 12px;
  --nv-radius-frame: 16px;
  --nv-radius-pill: 999px;
  --radius-sm: var(--nv-radius-card);
  --radius-md: var(--nv-radius-panel);
  --radius-lg: var(--nv-radius-frame);
  --radius-xl: var(--nv-radius-pill);

  --nv-space-1: 4px;
  --nv-space-2: 8px;
  --nv-space-3: 12px;
  --nv-space-4: 16px;
  --nv-space-6: 24px;
  --nv-space-8: 32px;
  --nv-space-12: 48px;
  --nv-space-16: 64px;
  --nv-space-22: 88px;
  --nv-section-desktop: 88px;
  --nv-section-tablet: 66px;
  --nv-section-mobile: 56px;
  --nv-button-height-xs: 32px;
  --nv-button-height-sm: 38px;
  --nv-button-height-md: 44px;
  --nv-button-height-xl: 56px;
  --nv-button-height-header: 40px;
  --nv-button-icon-size: 34px;

  --font-brand: 'Integral CF', 'Arial Black', sans-serif;
  --font-display: 'Bariol', Arial, sans-serif;
  --font-body: 'Bariol', Arial, sans-serif;
  --nv-type-display-2xl-size: 92px;
  --nv-type-display-2xl-line: 96px;
  --nv-type-display-xl-size: 76px;
  --nv-type-display-xl-line: 80px;
  --nv-type-display-lg-size: 60px;
  --nv-type-display-lg-line: 64px;
  --nv-type-display-md-size: 52px;
  --nv-type-display-md-line: 56px;
  --nv-type-headline-lg-size: 42px;
  --nv-type-headline-lg-line: 50px;
  --nv-type-headline-md-size: 36px;
  --nv-type-headline-md-line: 44px;
  --nv-type-headline-sm-size: 32px;
  --nv-type-headline-sm-line: 38px;
  --nv-type-body-lg-size: 18px;
  --nv-type-body-lg-line: 28px;
  --nv-type-body-md-size: 16px;
  --nv-type-body-md-line: 24px;
  --nv-type-body-sm-size: 14px;
  --nv-type-body-sm-line: 20px;
  --nv-type-label-md-size: 12px;
  --nv-type-label-md-line: 14px;
  --nv-type-label-sm-size: 11px;
  --nv-type-label-sm-line: 14px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}