/* ==========================================================================
   Jivhala Social Foundation — Design Tokens
   Single source of truth for every color, space, radius, shadow and motion
   value used across the theme and all Elementor widgets.
   ========================================================================== */

:root {

  /* ---------- Color / Brand ---------- */
  --color-primary: #3E7CB1;
  --color-primary-rgb: 62, 124, 177;
  --color-secondary: #F5941F;
  --color-secondary-rgb: 245, 148, 31;
  --color-accent: #4CAF50;
  --color-accent-rgb: 76, 175, 80;
  --color-highlight: #E8F1FA;

  /* ---------- Color / Text ---------- */
  --color-heading: #0F172A;
  --color-body: #475569;
  --color-light: #64748B;

  /* ---------- Color / Surface ---------- */
  --color-border: #E2E8F0;
  --color-background: #F8FBFD;
  --color-white: #FFFFFF;

  /* ---------- Color / Feedback (used sparingly, kept on-brand) ---------- */
  --color-success: var(--color-secondary);
  --color-error: #DC2626;
  --color-warning: #D97706;

  /* ---------- Glassmorphism ---------- */
  --glass-bg: rgba(255, 255, 255, .55);
  --glass-border: rgba(255, 255, 255, .60);
  --glass-blur: 24px;

  /* ---------- Gradients ---------- */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
  --gradient-surface: linear-gradient(180deg, var(--color-white) 0%, var(--color-background) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, .65) 100%);

  /* ---------- Layout ---------- */
  --container-width: 1320px;
  --container-padding: var(--space-md);

  /* ---------- Radius ---------- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 999px;

  /* ---------- Spacing ---------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 72px;
  --space-section: 120px;

  /* ---------- Motion ---------- */
  --transition: .35s cubic-bezier(.4, 0, .2, 1);
  --transition-fast: .2s cubic-bezier(.4, 0, .2, 1);
  --transition-slow: .6s cubic-bezier(.4, 0, .2, 1);
  --ease-premium: cubic-bezier(.16, 1, .3, 1);

  /* ---------- Shadow ---------- */
  --shadow-soft: 0 10px 30px rgba(62, 124, 177, .08);
  --shadow-medium: 0 20px 60px rgba(62, 124, 177, .10);
  --shadow-large: 0 30px 80px rgba(62, 124, 177, .12);
  --shadow-inset: inset 0 1px 1px rgba(255, 255, 255, .40);

  /* ---------- Z-Index scale ---------- */
  --z-behind: -1;
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ---------- Breakpoints (reference only — used in comments/JS) ----------
     desktop: 1440px
     laptop:  1200px
     tablet:  1024px
     mobile:  767px
  ------------------------------------------------------------------------- */
}