/*
 * YippeeBates Design System
 * css/design-system.css
 *
 * Single source of truth for every color, font, radius, shadow,
 * spacing value, and gradient used across the site.
 *
 * These custom properties are set on :root so they cascade into
 * Elementor widgets, custom templates, and all component CSS.
 *
 * HOW TO USE IN ELEMENTOR:
 *   In any Elementor color/size field you can reference these as:
 *   var(--yb-violet) — but only in Custom CSS boxes.
 *   For the visual editor, use the Global Colors & Fonts system
 *   (Elementor > Site Settings > Global Colors) and map them to
 *   these tokens — see setup instructions in inc/setup.php.
 * ---------------------------------------------------------------
 */

/* ============================================================
   1. COLOR PALETTE
   ============================================================ */
:root {

  /* ── Primary Brand ── */
  --yb-violet:        #6D28D9;
  --yb-violet-mid:    #7C3AED;
  --yb-violet-light:  #A78BFA;
  --yb-violet-soft:   #EDE9FE;
  --yb-violet-xs:     #F5F3FF;

  /* ── Blue ── */
  --yb-blue:          #1D4ED8;
  --yb-blue-mid:      #2563EB;
  --yb-blue-light:    #60A5FA;
  --yb-blue-soft:     #DBEAFE;
  --yb-blue-xs:       #EFF6FF;

  /* ── Sky / Teal (internet category accent) ── */
  --yb-sky:           #0EA5E9;
  --yb-sky-mid:       #0284C7;
  --yb-sky-soft:      #E0F2FE;
  --yb-sky-xs:        #F0F9FF;
  --yb-teal:          #0891B2;
  --yb-teal-soft:     #CFFAFE;

  /* ── Green (cashback / success) ── */
  --yb-green:         #059669;
  --yb-green-mid:     #10B981;
  --yb-green-light:   #34D399;
  --yb-green-soft:    #D1FAE5;
  --yb-green-xs:      #ECFDF5;

  /* ── Amber (pending / warning) ── */
  --yb-amber:         #D97706;
  --yb-amber-mid:     #F59E0B;
  --yb-amber-light:   #FCD34D;
  --yb-amber-soft:    #FEF3C7;
  --yb-amber-xs:      #FFFBEB;

  /* ── Rose / Red (error / rejected) ── */
  --yb-rose:          #E11D48;
  --yb-rose-mid:      #F43F5E;
  --yb-rose-soft:     #FFE4E6;
  --yb-rose-xs:       #FFF1F2;

  /* ── Coral / Orange ── */
  --yb-coral:         #F97316;
  --yb-coral-soft:    #FFEDD5;

  /* ── Ink (neutrals) ── */
  --yb-ink-950:       #050308;
  --yb-ink-900:       #0D0A1A;
  --yb-ink-800:       #1C1730;
  --yb-ink-700:       #2E2847;
  --yb-ink-600:       #4B4466;
  --yb-ink-500:       #6B6584;
  --yb-ink-400:       #9490A8;
  --yb-ink-300:       #C4C0D4;
  --yb-ink-200:       #E5E1F0;
  --yb-ink-150:       #EEEAF8;
  --yb-ink-100:       #F3F0FF;
  --yb-ink-50:        #FAFAFF;

  /* ── Pure ── */
  --yb-white:         #FFFFFF;
  --yb-black:         #000000;
}


/* ============================================================
   2. GRADIENTS
   ============================================================ */
:root {

  /* Primary brand gradient — used on CTAs, stat numbers, logos */
  --yb-grad-brand:    linear-gradient(135deg, #6D28D9 0%, #2563EB 100%);

  /* Hero background gradients */
  --yb-grad-hero-dark:  linear-gradient(145deg, #0C1A35 0%, #081428 40%, #060E1E 100%);
  --yb-grad-hero-panel: linear-gradient(155deg, #2D0B6B 0%, #1a1245 40%, #0a1a3a 100%);
  --yb-grad-hero-light: linear-gradient(160deg, #fdfcff 0%, #f0ebff 40%, #e8f4ff 100%);
  --yb-grad-hero-hiw:   linear-gradient(160deg, #fdfcff 0%, #f0ebff 40%, #e8f4ff 100%);

  /* Section backgrounds */
  --yb-grad-dashboard:  linear-gradient(145deg, #0D0A1A 0%, #1a0a35 40%, #0a1a3a 100%);

  /* Semantic gradients */
  --yb-grad-green:    linear-gradient(135deg, #059669 0%, #10B981 100%);
  --yb-grad-amber:    linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  --yb-grad-warm:     linear-gradient(135deg, #F97316 0%, #E11D48 100%);
  --yb-grad-violet:   linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
  --yb-grad-sky:      linear-gradient(135deg, #0EA5E9 0%, #6D28D9 100%);
  --yb-grad-rose:     linear-gradient(135deg, #E11D48 0%, #F97316 100%);
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
:root {

  /* Font families */
  --yb-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --yb-font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --yb-font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font sizes — fluid scale */
  --yb-text-xs:    0.75rem;    /*  12px */
  --yb-text-sm:    0.875rem;   /*  14px */
  --yb-text-base:  1rem;       /*  16px */
  --yb-text-lg:    1.125rem;   /*  18px */
  --yb-text-xl:    1.25rem;    /*  20px */
  --yb-text-2xl:   1.5rem;     /*  24px */
  --yb-text-3xl:   1.875rem;   /*  30px */
  --yb-text-4xl:   2.25rem;    /*  36px */
  --yb-text-5xl:   3rem;       /*  48px */
  --yb-text-6xl:   3.75rem;    /*  60px */
  --yb-text-7xl:   4.5rem;     /*  72px */

  /* Line heights */
  --yb-leading-tight:  1.1;
  --yb-leading-snug:   1.3;
  --yb-leading-normal: 1.5;
  --yb-leading-relaxed:1.65;
  --yb-leading-loose:  1.8;

  /* Font weights */
  --yb-weight-light:   300;
  --yb-weight-normal:  400;
  --yb-weight-medium:  500;
  --yb-weight-semi:    600;
  --yb-weight-bold:    700;
  --yb-weight-heavy:   800;
  --yb-weight-black:   900;

  /* Letter spacing */
  --yb-tracking-tight:  -0.03em;
  --yb-tracking-normal:  0;
  --yb-tracking-wide:    0.06em;
  --yb-tracking-wider:   0.1em;
  --yb-tracking-widest:  0.14em;
}


/* ============================================================
   4. SPACING
   ============================================================ */
:root {
  --yb-space-1:   0.25rem;   /*  4px */
  --yb-space-2:   0.5rem;    /*  8px */
  --yb-space-3:   0.75rem;   /* 12px */
  --yb-space-4:   1rem;      /* 16px */
  --yb-space-5:   1.25rem;   /* 20px */
  --yb-space-6:   1.5rem;    /* 24px */
  --yb-space-7:   1.75rem;   /* 28px */
  --yb-space-8:   2rem;      /* 32px */
  --yb-space-10:  2.5rem;    /* 40px */
  --yb-space-12:  3rem;      /* 48px */
  --yb-space-16:  4rem;      /* 64px */
  --yb-space-20:  5rem;      /* 80px */
  --yb-space-24:  6rem;      /* 96px */
  --yb-space-32:  8rem;      /* 128px */
}


/* ============================================================
   5. BORDER RADIUS
   ============================================================ */
:root {
  --yb-radius-xs:   4px;
  --yb-radius-sm:   8px;
  --yb-radius-md:   14px;
  --yb-radius-lg:   20px;
  --yb-radius-xl:   28px;
  --yb-radius-2xl:  36px;
  --yb-radius-3xl:  48px;
  --yb-radius-full: 9999px;
}


/* ============================================================
   6. SHADOWS
   ============================================================ */
:root {
  /* Neutral shadows */
  --yb-shadow-xs:  0 1px 3px rgba(13, 10, 26, 0.06), 0 1px 2px rgba(13, 10, 26, 0.04);
  --yb-shadow-sm:  0 2px 8px rgba(13, 10, 26, 0.08), 0 1px 3px rgba(13, 10, 26, 0.04);
  --yb-shadow-md:  0 6px 20px rgba(13, 10, 26, 0.10), 0 2px 6px rgba(13, 10, 26, 0.05);
  --yb-shadow-lg:  0 16px 40px rgba(13, 10, 26, 0.12), 0 4px 12px rgba(13, 10, 26, 0.06);
  --yb-shadow-xl:  0 24px 60px rgba(13, 10, 26, 0.14), 0 8px 20px rgba(13, 10, 26, 0.08);
  --yb-shadow-2xl: 0 40px 80px rgba(13, 10, 26, 0.18), 0 16px 32px rgba(13, 10, 26, 0.10);

  /* Brand-tinted shadows */
  --yb-shadow-brand:  0 6px 24px rgba(109, 40, 217, 0.30), 0 2px 8px rgba(109, 40, 217, 0.15);
  --yb-shadow-green:  0 6px 24px rgba(5, 150, 105, 0.28), 0 2px 8px rgba(5, 150, 105, 0.14);
  --yb-shadow-amber:  0 6px 24px rgba(217, 119, 6, 0.22), 0 2px 8px rgba(217, 119, 6, 0.12);
  --yb-shadow-sky:    0 6px 24px rgba(14, 165, 233, 0.28), 0 2px 8px rgba(14, 165, 233, 0.14);

  /* Inset / focus rings */
  --yb-ring-brand:  0 0 0 3px rgba(109, 40, 217, 0.12);
  --yb-ring-green:  0 0 0 3px rgba(5, 150, 105, 0.12);
  --yb-ring-error:  0 0 0 3px rgba(225, 29, 72, 0.12);
}


/* ============================================================
   7. TRANSITIONS & EASING
   ============================================================ */
:root {
  /* Duration */
  --yb-duration-fast:   150ms;
  --yb-duration-base:   250ms;
  --yb-duration-slow:   400ms;
  --yb-duration-slower: 600ms;

  /* Easing */
  --yb-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --yb-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --yb-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --yb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --yb-ease-linear: linear;

  /* Transition shorthands */
  --yb-transition-fast:  all var(--yb-duration-fast)  var(--yb-ease-out);
  --yb-transition-base:  all var(--yb-duration-base)  var(--yb-ease-out);
  --yb-transition-slow:  all var(--yb-duration-slow)  var(--yb-ease-out);
}


/* ============================================================
   8. Z-INDEX SCALE
   ============================================================ */
:root {
  --yb-z-base:       0;
  --yb-z-raised:     10;
  --yb-z-dropdown:   100;
  --yb-z-sticky:     150;
  --yb-z-fixed:      200;
  --yb-z-overlay:    300;
  --yb-z-modal:      400;
  --yb-z-toast:      500;
  --yb-z-top:        9999;
}


/* ============================================================
   9. LAYOUT
   ============================================================ */
:root {
  /* Container max-widths */
  --yb-container-sm:   640px;
  --yb-container-md:   768px;
  --yb-container-lg:   1024px;
  --yb-container:      1200px;
  --yb-container-wide: 1380px;

  /* Dashboard sidebar width */
  --yb-sidebar-w: 260px;

  /* Section vertical padding */
  --yb-section-pad-sm: var(--yb-space-12);   /* 48px */
  --yb-section-pad:    var(--yb-space-20);   /* 80px */
  --yb-section-pad-lg: var(--yb-space-24);   /* 96px */
}


/* ============================================================
   10. COMPONENT SEMANTIC TOKENS
   Tokens that reference the palette tokens above.
   Override these for dark mode or theme variants.
   ============================================================ */
:root {

  /* Text */
  --yb-text-primary:   var(--yb-ink-900);
  --yb-text-secondary: var(--yb-ink-600);
  --yb-text-muted:     var(--yb-ink-400);
  --yb-text-disabled:  var(--yb-ink-300);
  --yb-text-inverse:   var(--yb-white);
  --yb-text-brand:     var(--yb-violet-mid);
  --yb-text-success:   var(--yb-green);
  --yb-text-warning:   var(--yb-amber);
  --yb-text-error:     var(--yb-rose);

  /* Backgrounds */
  --yb-bg-page:        var(--yb-ink-50);
  --yb-bg-surface:     var(--yb-white);
  --yb-bg-elevated:    var(--yb-white);
  --yb-bg-subtle:      var(--yb-ink-100);
  --yb-bg-brand:       var(--yb-violet-xs);

  /* Borders */
  --yb-border-base:    var(--yb-ink-200);
  --yb-border-subtle:  var(--yb-ink-150);
  --yb-border-strong:  var(--yb-ink-300);
  --yb-border-brand:   var(--yb-violet-soft);

  /* Interactive */
  --yb-interactive-bg:         var(--yb-white);
  --yb-interactive-bg-hover:   var(--yb-ink-50);
  --yb-interactive-bg-active:  var(--yb-ink-100);
  --yb-interactive-border:     var(--yb-ink-200);
  --yb-interactive-border-hover: var(--yb-violet-mid);

  /* Status */
  --yb-status-pending-bg:   var(--yb-amber-soft);
  --yb-status-pending-text: var(--yb-amber);
  --yb-status-approved-bg:  var(--yb-green-soft);
  --yb-status-approved-text:var(--yb-green);
  --yb-status-paid-bg:      var(--yb-violet-soft);
  --yb-status-paid-text:    var(--yb-violet);
  --yb-status-error-bg:     var(--yb-rose-soft);
  --yb-status-error-text:   var(--yb-rose);
}