/* Conjurly UI Core — TOKENS
   Source of truth: plugin file
   Do not hardcode values elsewhere. */

:root{
  --cj-radius-card: 14px;
  --cj-radius-input: 10px;
  --cj-radius-btn: 10px;
  --cj-radius-modal: 16px;

  --cj-border-light: #e6e7eb;

  --cj-shadow-card: 0 1px 4px rgba(0,0,0,0.04);
  --cj-shadow-modal: 0 10px 30px rgba(0,0,0,0.12);

  --cj-accent: #c94a2f;
  --cj-accent-hover: #b63f25;

  --cj-space-card: 24px;
  --cj-gap-card: 18px;

  /* Hairline dividers (inside cards) */
  --cj-divider: rgba(0,0,0,0.05);

  /* Alerts */
  --cj-alert-radius: var(--cj-radius-card);
  --cj-alert-border: var(--cj-border-light);

  --cj-alert-info-bg:     #EEF6FF;
  --cj-alert-info-text:   #0B3A6D;
  --cj-alert-info-border: #BFD9F3;

  --cj-alert-success-bg:     #ECF9F1;
  --cj-alert-success-text:   #1B5E3A;
  --cj-alert-success-border: #BFE8CF;

  --cj-alert-warning-bg:     #FFF7E8;
  --cj-alert-warning-text:   #6A4300;
  --cj-alert-warning-border: #F2D3A2;

  --cj-alert-danger-bg:     #FCEEEE;
  --cj-alert-danger-text:   #7A1F1F;
  --cj-alert-danger-border: #F0B8B8;

  /* ======================================================
     Profile Cover (BuddyBoss/BuddyPress)
     Social-friendly ratios (reusable with FB/X assets)
     ====================================================== */

  /* Facebook desktop visible-ish ratio: 820×312 ≈ 2.63:1 */
  --conjurly-cover-ratio-desktop: 820 / 312;

  /* Keep same ratio on mobile for predictability */
  --conjurly-cover-ratio-mobile: 820 / 312;

  /* Image alignment within the crop */
  --conjurly-cover-object-x: 50%;
  --conjurly-cover-object-y: 25%;

  /* Space below header before nav/content */
  --conjurly-cover-gap-after: var(--cj-gap-card);

  /* Breathing room below avatar/name area */
  --conjurly-cover-header-pad-bottom: calc(var(--cj-gap-card) + 4px);
}

@media (max-width: 1024px){
  :root{
    --cj-space-card: 20px;
    --cj-gap-card: 16px;
  }
}

@media (max-width: 782px){
  :root{
    /* (reserved) */
  }
}

@media (max-width: 430px){
  :root{
    --cj-space-card: 16px;
    --cj-gap-card: 12px;
  }
}