/*
 * ╔══════════════════════════════════════════════════════╗
 * ║   slideswift-tokens.css  — MASTER SKIN FILE         ║
 * ║   SlideSwift Design Token System                    ║
 * ║                                                      ║
 * ║   KAL SKIN CHANGE KARNI HO? SIRF YAHI FILE EDIT KR ║
 * ║   Baaki koi file chhona nahi padega.                ║
 * ║                                                      ║
 * ║   LOAD ORDER in header.php (BEFORE wp_head):        ║
 * ║   1. slideswift-tokens.css   ← pehle               ║
 * ║   2. slideswift-skin.css     ← baad mein            ║
 * ╚══════════════════════════════════════════════════════╝
 */

:root {

  /* ════════════════════════════════════════
     HERO + NAV GRADIENT
     Nav ka background = blue-1 (seamless merge)
     ════════════════════════════════════════ */

  --ss-blue-1:   #3c6ae8;   /* 0%  — vivid cobalt (nav bg = yahi) */
  --ss-blue-2:   #2a50cc;   /* 28% — royal blue */
  --ss-blue-3:   #1d36a4;   /* 55% — deep royal */
  --ss-blue-4:   #141280;   /* 78% — blue-indigo */
  --ss-blue-5:   #0e0c62;   /* 100% — near-midnight indigo */

  /* ════════════════════════════════════════
     STATS BAR (hero ke neeche)
     ════════════════════════════════════════ */

  --ss-stats-top:    #0e0c62;   /* = blue-5, seamless join with hero */
  --ss-stats-bottom: #08065a;

  /* ════════════════════════════════════════
     ACCENT / CTA BUTTONS (orange)
     ════════════════════════════════════════ */

  --ss-orange:   #f97316;
  --ss-orange-h: #ea6b00;   /* hover state */

  /* ════════════════════════════════════════
     SUPPORTING BLUES
     ════════════════════════════════════════ */

  --ss-ribbon-bg:   #1e3ab8;   /* info ribbon */
  --ss-dropdown-bg: #1a3898;   /* user dropdown */
  --ss-cta-bg-1:    #163280;   /* bottom CTA section start */
  --ss-cta-bg-2:    #2044b0;   /* bottom CTA section mid */
  --ss-cta-bg-3:    #2855cc;   /* bottom CTA section end */
  --ss-chip-active: #2044b0;   /* active category chip */
  --ss-link-blue:   #2044b0;   /* links on light bg */
  --ss-link-dark:   #163280;   /* link hover on light bg */

  /* ════════════════════════════════════════
     TEXT ON DARK BACKGROUNDS
     ════════════════════════════════════════ */

  --ss-text-white:   #ffffff;
  --ss-text-soft:    rgba(255,255,255,0.85);
  --ss-text-dim:     rgba(255,255,255,0.55);
  --ss-text-accent:  #c7deff;   /* logo Swift, stat labels */
  --ss-text-gold:    #fde68a;   /* ribbon links */
  --ss-text-warm:    #ffe0b2;   /* warm orange-white for ribbon "Explore" */

  /* ════════════════════════════════════════
     LIGHT SECTION (white cards, category bar)
     ════════════════════════════════════════ */

  --ss-light-bg:     #eff6ff;
  --ss-light-border: #bfdbfe;
  --ss-light-text:   #1e3a8a;

  /* ════════════════════════════════════════
     CARD HOVER
     ════════════════════════════════════════ */

  --ss-card-border-h: #93c5fd;
  --ss-card-shadow:   rgba(32, 68, 176, 0.10);
  --ss-browse-border: #2044b0;
  --ss-browse-bg:     #f0f5ff;

  /* ════════════════════════════════════════
     COMPUTED GRADIENTS (use these in skin.css)
     ════════════════════════════════════════ */

  --ss-grad-hero: linear-gradient(
    155deg,
    var(--ss-blue-1)  0%,
    var(--ss-blue-2) 28%,
    var(--ss-blue-3) 55%,
    var(--ss-blue-4) 78%,
    var(--ss-blue-5) 100%
  );

  --ss-grad-stats: linear-gradient(
    180deg,
    var(--ss-stats-top)    0%,
    var(--ss-stats-bottom) 100%
  );

  --ss-grad-cta: linear-gradient(
    135deg,
    var(--ss-cta-bg-1)  0%,
    var(--ss-cta-bg-2) 50%,
    var(--ss-cta-bg-3) 100%
  );

  --ss-grad-chip-featured: linear-gradient(
    135deg,
    var(--ss-cta-bg-1),
    var(--ss-chip-active)
  );

  --ss-grad-tw-btn: linear-gradient(
    135deg,
    var(--ss-cta-bg-1),
    var(--ss-chip-active)
  );

}

/*
 ┌─────────────────────────────────────────────────────┐
 │  SKIN CHANGE GUIDE — kal alag color chahiye to:     │
 │                                                      │
 │  1. Blue → Green theme:                             │
 │     --ss-blue-1: #16a34a  (green-600)               │
 │     --ss-blue-2: #15803d  (green-700)               │
 │     --ss-blue-3: #166534  (green-800)               │
 │     --ss-blue-4: #14532d  (green-900)               │
 │     --ss-blue-5: #052e16  (green-950)               │
 │                                                      │
 │  2. Orange → Purple CTA:                            │
 │     --ss-orange:   #9333ea                          │
 │     --ss-orange-h: #7e22ce                          │
 │                                                      │
 │  3. Sirf nav/hero alag color:                       │
 │     --ss-blue-1 change karo (nav bg auto update)    │
 └─────────────────────────────────────────────────────┘
*/