/* 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-border-card: rgba(0,0,0,0.08);

  --cj-surface-primary: #ffffff;
  --cj-surface-subtle: #f7f7f8;
  --cj-surface-subtler: #fafafa;

  --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: var(--cj-indigo, #4c187e);
  --cj-accent-hover: var(--cj-indigo-hover, #6f4697);
  --cj-ember: #d97d37;
  --cj-ember-hover: #e0975e;
  --cj-cta: var(--cj-ember, #d97d37);
  --cj-cta-hover: var(--cj-ember-hover, #e0975e);

  /* Brand foundation */
  --cj-indigo: #4c187e;
  --cj-indigo-hover: #6f4697;

  /* Link system */
  --cj-link: var(--cj-indigo, #4c187e);
  --cj-link-hover: var(--cj-indigo-hover, #6f4697);
  --cj-link-visited: #3f1268;

  /* High-contrast text on indigo/accent surfaces */
  --cj-text-on-accent: #ffffff;
  --cj-surface-primary-text: #ffffff;

  /* Typography foundation */
  --cj-font-sans: "IBM Plex Sans", sans-serif;
  --cj-font-headline: "IBM Plex Sans Condensed", sans-serif;
  --cj-font-serif: "IBM Plex Serif", serif;

  --cj-heading-font-family: var(--cj-font-headline);
  --cj-heading-font-weight: 500;
  --cj-heading-letter-spacing-tight: -0.01em;
  --cj-heading-line-height-tight: 1.1;
  --cj-heading-line-height-display: 1.03;

  /* Standard document heading scale
     Matches current BuddyBoss Theme Options baseline.
     Hero/marketing display treatments should use separate named tokens/patterns. */
  --cj-body-font-size: 18px;

  --cj-heading-h1-size: 36px;
  --cj-heading-h2-size: 28px;
  --cj-heading-h3-size: 24px;
  --cj-heading-h4-size: 20px;
  --cj-heading-h5-size: 18px;
  --cj-heading-h6-size: 16px;

  --cj-heading-h1-line-height: 1.2;
  --cj-heading-h2-line-height: 1.2;
  --cj-heading-h3-line-height: 1.25;
  --cj-heading-h4-line-height: 1.3;
  --cj-heading-h5-line-height: 1.35;
  --cj-heading-h6-line-height: 1.35;

  /* Short aliases for consumers that need compact names. */
  --cj-h1-size: var(--cj-heading-h1-size);
  --cj-h2-size: var(--cj-heading-h2-size);
  --cj-h3-size: var(--cj-heading-h3-size);
  --cj-h4-size: var(--cj-heading-h4-size);
  --cj-h5-size: var(--cj-heading-h5-size);
  --cj-h6-size: var(--cj-heading-h6-size);

  /* Meta system */
  --cj-meta-font-family: var(--cj-font-sans);
  --cj-meta-font-size: 0.92rem;
  --cj-meta-line-height: 1.4;
  --cj-meta-font-weight: 400;
  --cj-meta-color: #666;
  --cj-meta-link-color: inherit;
  --cj-meta-link-hover-color: var(--cj-link-hover);
  --cj-meta-separator-color: rgba(0,0,0,0.38);
  --cj-meta-gap: 0.5rem;
  --cj-meta-row-margin-top: 0.2rem;
  --cj-meta-row-margin-bottom: 0.75rem;

  /* Focus system */
  --cj-focus-outline-width: 2px;
  --cj-focus-outline-offset: 2px;
  --cj-focus-outline-color: var(--cj-link);
  --cj-focus-ring-size: 0.2rem;
  --cj-focus-ring-color: rgba(76, 24, 126, 0.22);
  --cj-focus-ring-shadow: 0 0 0 var(--cj-focus-ring-size) var(--cj-focus-ring-color);

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

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

  /* Shared page header system */
  --cj-page-header-pad-x: 0.8rem;
  --cj-page-header-pad-y-top: 0.5rem;
  --cj-page-header-pad-y-bottom: 0rem;
  --cj-page-header-title-size: 1.65rem;
  --cj-page-header-title-weight: 500;
  --cj-page-header-shadow: 0 2px 12px rgba(0,0,0,0.08);


  /* Button system */
  --cj-btn-font-family: var(--cj-font-sans);
  --cj-btn-font-size-sm: 0.875rem;
  --cj-btn-font-size: 0.95rem;
  --cj-btn-font-size-lg: 1rem;
  --cj-btn-font-weight: 500;
  --cj-btn-line-height: 1.15;
  --cj-btn-letter-spacing: 0.01em;
  --cj-btn-radius: var(--cj-radius-btn, 10px);
  --cj-btn-border-width: 1px;

  --cj-btn-padding-y-sm: 0.55rem;
  --cj-btn-padding-x-sm: 0.95rem;
  --cj-btn-padding-y: 0.72rem;
  --cj-btn-padding-x: 1.25rem;
  --cj-btn-padding-y-lg: 0.86rem;
  --cj-btn-padding-x-lg: 1.55rem;

  --cj-btn-primary-bg: var(--cj-indigo, #4c187e);
  --cj-btn-primary-border: var(--cj-indigo, #4c187e);
  --cj-btn-primary-color: var(--cj-text-on-accent, #ffffff);
  --cj-btn-primary-hover-bg: var(--cj-indigo-hover, #6f4697);
  --cj-btn-primary-hover-border: var(--cj-indigo-hover, #6f4697);
  --cj-btn-primary-hover-color: var(--cj-text-on-accent, #ffffff);

  --cj-btn-secondary-bg: var(--cj-surface-primary, #ffffff);
  --cj-btn-secondary-border: var(--cj-indigo, #4c187e);
  --cj-btn-secondary-color: var(--cj-indigo, #4c187e);
  --cj-btn-secondary-hover-bg: rgba(76, 24, 126, 0.045);
  --cj-btn-secondary-hover-border: var(--cj-indigo-hover, #6f4697);
  --cj-btn-secondary-hover-color: var(--cj-indigo-hover, #6f4697);

  --cj-btn-ghost-bg: transparent;
  --cj-btn-ghost-border: transparent;
  --cj-btn-ghost-color: var(--cj-indigo, #4c187e);
  --cj-btn-ghost-hover-bg: rgba(76, 24, 126, 0.055);
  --cj-btn-ghost-hover-border: transparent;
  --cj-btn-ghost-hover-color: var(--cj-indigo-hover, #6f4697);

  --cj-btn-disabled-opacity: 0.55;

  /* 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{
    /* Standard document heading scale - mobile baseline */
    --cj-heading-h1-size: 32px;
    --cj-heading-h2-size: 24px;
    --cj-heading-h3-size: 22px;
    --cj-heading-h4-size: 20px;
    --cj-heading-h5-size: 18px;
    --cj-heading-h6-size: 16px;
  }
}

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