/* ============================================================
   LikeJo Design Tokens
   Source of truth for all colors, typography, spacing.
   Never hardcode values — always reference a var() from here.
   ============================================================ */

:root {
  /* ── Brand (matches likejo-theme.css — purple, NOT the old blue) ── */
  --lj-primary:       #433591;
  --lj-primary-dark:  #342870;
  --lj-primary-mid:   #5b47c5;
  --lj-primary-50:    #f0eeff;
  --lj-primary-100:   #ddd6fe;
  --lj-accent:        #ff5588;
  --lj-accent-50:     #fff0f5;
  --lj-accent-100:    #ffd6e4;

  /* ── Accents ── */
  --lj-amber:         #F59E0B;
  --lj-amber-50:      #FFFBEB;
  --lj-success:       #10B981;
  --lj-success-50:    #ECFDF5;
  --lj-danger:        #EF4444;
  --lj-danger-50:     #FEF2F2;

  /* ── Surface / Background ── */
  --lj-bg:            #FFFFFF;
  --lj-bg-alt:        #F8FAFC;
  --lj-surface:       #FFFFFF;

  /* ── Text ── */
  --lj-ink:           #0F172A;
  --lj-body-text:     #334155;
  --lj-muted:         #64748B;
  --lj-placeholder:   #94A3B8;

  /* ── Borders ── */
  --lj-hairline:      #E2E8F0;
  --lj-hairline-light: rgba(226,232,240,.55);

  /* ── Typography ── */
  --lj-font-heading:  'Estedad', 'Vazirmatn', sans-serif;
  --lj-font-body:     'Vazirmatn', sans-serif;

  /* ── Spacing (4px base) ── */
  --lj-sp-1:  0.25rem;   /* 4px  */
  --lj-sp-2:  0.5rem;    /* 8px  */
  --lj-sp-3:  0.75rem;   /* 12px */
  --lj-sp-4:  1rem;      /* 16px */
  --lj-sp-5:  1.25rem;   /* 20px */
  --lj-sp-6:  1.5rem;    /* 24px */
  --lj-sp-8:  2rem;      /* 32px */
  --lj-sp-10: 2.5rem;    /* 40px */
  --lj-sp-12: 3rem;      /* 48px */
  --lj-sp-14: 3.5rem;    /* 56px */
  --lj-sp-16: 4rem;      /* 64px */
  --lj-sp-20: 5rem;      /* 80px */
  --lj-sp-28: 7rem;      /* 112px */

  /* ── Radius ── */
  --lj-radius-sm:   0.5rem;    /* 8px  */
  --lj-radius:      0.75rem;   /* 12px */
  --lj-radius-lg:   1rem;      /* 16px */
  --lj-radius-xl:   1.5rem;    /* 24px */
  --lj-radius-pill: 9999px;

  /* ── Shadow ── */
  --lj-shadow-sm:    0 1px 3px rgba(15,23,42,.06);
  --lj-shadow-card:  0 1px 2px rgba(15,23,42,.04), 0 2px 4px rgba(15,23,42,.04);
  --lj-shadow-hover: 0 16px 40px -14px color-mix(in srgb, var(--lj-primary) 22%, transparent);
  --lj-shadow-brand: 0 8px 24px -8px color-mix(in srgb, var(--lj-primary) 35%, transparent);

  /* ── Motion ── */
  --lj-ease:      cubic-bezier(.2,.7,.2,1);
  --lj-ease-pop:  cubic-bezier(.34,1.56,.64,1);
  --lj-dur-fast:  150ms;
  --lj-dur-base:  250ms;
  --lj-dur-slow:  400ms;
}

/* ── DARK MODE ── mirrors likejo-theme.css .dark so pages that load THIS file
   after theme.css still flip to dark (previously this file forced light). ── */
.dark {
  --lj-primary:      #7c6cf0;
  --lj-primary-dark: #6353d8;
  --lj-primary-mid:  #9385ff;
  --lj-primary-50:   #201a3a;
  --lj-primary-100:  #322a5c;
  --lj-accent:       #ff6f9c;
  --lj-accent-50:    #34172a;
  --lj-accent-100:   #4a2039;
  --lj-success:      #34d399;
  --lj-success-50:   #0f2e26;
  --lj-amber:        #fbbf24;
  --lj-amber-50:     #3a2e12;
  --lj-bg:           #0d0a1a;
  --lj-bg-alt:       #14102a;
  --lj-surface:      #171232;
  --lj-ink:          #f4f2fb;
  --lj-body-text:    #cdc7e6;
  --lj-muted:        #9089b3;
  --lj-hairline:     #2a2450;
  --lj-shadow-card:  0 1px 3px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --lj-shadow-hover: 0 16px 44px -12px rgba(0,0,0,.6);
}

/* ============================================================
   Typography role classes
   Use ONLY these — no ad-hoc font-size anywhere.
   ============================================================ */

.lj-display {
  font-family: var(--lj-font-heading);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--lj-ink);
}

.lj-h2 {
  font-family: var(--lj-font-heading);
  font-size: clamp(1.625rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--lj-ink);
}

.lj-h3 {
  font-family: var(--lj-font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--lj-ink);
}

.lj-lead {
  font-family: var(--lj-font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--lj-body-text);
}

.lj-body {
  font-family: var(--lj-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--lj-body-text);
}

.lj-small {
  font-family: var(--lj-font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--lj-muted);
}

.lj-eyebrow {
  font-family: var(--lj-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.lj-stat {
  font-family: var(--lj-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--lj-primary);
}

.lj-price {
  font-family: var(--lj-font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--lj-ink);
}

/* ============================================================
   Page load animation
   ============================================================ */

@keyframes lj-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lj-rise {
  animation: lj-rise var(--lj-dur-slow) var(--lj-ease) both;
}
.lj-rise.d1 { animation-delay: 60ms; }
.lj-rise.d2 { animation-delay: 120ms; }
.lj-rise.d3 { animation-delay: 180ms; }
.lj-rise.d4 { animation-delay: 240ms; }
.lj-rise.d5 { animation-delay: 300ms; }
.lj-rise.d6 { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .lj-rise { animation: none; opacity: 1; }
}

/* ============================================================
   Base card
   ============================================================ */

.lj-card {
  background: var(--lj-surface);
  border: 1px solid var(--lj-hairline);
  border-radius: var(--lj-radius-lg);
  box-shadow: var(--lj-shadow-card);
  transition:
    transform var(--lj-dur-base) var(--lj-ease),
    box-shadow var(--lj-dur-base),
    border-color var(--lj-dur-base);
}
.lj-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--lj-shadow-hover);
  border-color: color-mix(in srgb, var(--lj-primary) 28%, transparent);
}

/* ============================================================
   Icon tile
   ============================================================ */

.lj-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lj-radius);
  background: color-mix(in srgb, var(--c, var(--lj-primary)) 10%, white);
  color: var(--c, var(--lj-primary));
  transition:
    background var(--lj-dur-base),
    color var(--lj-dur-base),
    transform var(--lj-dur-base) var(--lj-ease-pop);
}
.group:hover .lj-tile {
  background: var(--c, var(--lj-primary));
  color: #fff;
  transform: scale(1.06);
}

/* ============================================================
   Status badges (order status)
   ============================================================ */

.lj-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--lj-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.lj-badge-pending  { background: #FFF7ED; color: #C2410C; border: 1px solid #FED7AA; }
.lj-badge-active   { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.lj-badge-done     { background: var(--lj-primary-50); color: var(--lj-primary-dark); border: 1px solid var(--lj-primary-100); }
.lj-badge-failed   { background: var(--lj-danger-50); color: #B91C1C; border: 1px solid #FECACA; }
.lj-badge-partial  { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }

/* ============================================================
   Platform filter chip
   ============================================================ */

.lj-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--lj-radius-pill);
  background: var(--lj-bg-alt);
  border: 1px solid var(--lj-hairline);
  cursor: pointer;
  transition: background var(--lj-dur-fast), border-color var(--lj-dur-fast), color var(--lj-dur-fast);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lj-body-text);
}
.lj-chip:hover,
.lj-chip.active {
  background: var(--lj-primary-50);
  border-color: color-mix(in srgb, var(--lj-primary) 35%, transparent);
  color: var(--lj-primary);
}

/* ============================================================
   Buttons
   ============================================================ */

.lj-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--lj-primary);
  color: #fff;
  border: none;
  border-radius: var(--lj-radius);
  font-family: var(--lj-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--lj-shadow-brand);
  transition: background var(--lj-dur-fast), transform var(--lj-dur-fast), box-shadow var(--lj-dur-fast);
}
.lj-btn-primary:hover {
  background: var(--lj-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--lj-primary) 45%, transparent);
}
.lj-btn-primary:active { transform: translateY(0); }

.lj-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  background: transparent;
  color: var(--lj-primary);
  border: 1px solid color-mix(in srgb, var(--lj-primary) 30%, transparent);
  border-radius: var(--lj-radius);
  font-family: var(--lj-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--lj-dur-fast), border-color var(--lj-dur-fast), transform var(--lj-dur-fast);
}
.lj-btn-secondary:hover {
  background: var(--lj-primary-50);
  border-color: color-mix(in srgb, var(--lj-primary) 50%, transparent);
  transform: translateY(-1px);
}

/* ============================================================
   Section container helper
   ============================================================ */

.lj-section {
  padding-block: var(--lj-sp-20);
}
.lj-section-alt {
  background: var(--lj-bg-alt);
}
@media (min-width: 1024px) {
  .lj-section { padding-block: var(--lj-sp-28); }
}

.lj-container {
  width: 100%;
  max-width: 72rem;   /* max-w-6xl */
  margin-inline: auto;
  padding-inline: var(--lj-sp-5);
}