/*
 * Hydra Tameecom Managed File
 * File: media/templates/site/cassiopeia_hydra_msmsj/css/archery.css
 * File Version: 3
 * Updated: 07/10/2026
 * Change: UPDATE_CSS bdc by dr.mohammad
 *
 */
/*************************************************
  DESIGN SYSTEM – ROOT (UNIFIED)
  Joomla 6 / Cassiopeia 
  ملف user.css
*************************************************/

:root {

  /* ===== Color System ===== */
  --color-primary: #5460a8;
  --color-hover: #DA843D;
  --color-accent:  #ff9800;
  --color-text:    #1f2933;
  --color-muted:   #64748b;
  --color-border:  #e5e7eb;
  --color-link: #880000;
  --color-text-muted: #555;

  --bg-soft-1: #fff7f5;
  --bg-soft-2: #fef1ec;
  --bg-soft-3: #f2f7ff;

  /* Cassiopeia */
  --cassiopeia-color-primary: var(--color-primary);
  --cassiopeia-color-hover: var(--color-hover);

  /* ===== Radius ===== */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --btn-radius: 999px;

  /* ===== Layout ===== */
  --width-article: 1100px;
  --width-wall: 1000px;
  --width-card: 900px;

  /* ===== UI ELEMENTS ===== */
  --bg-card: #ffffff;
  --bg-highlight: #fff7e6;
  --bg-rank: #ffdd57;

  --shadow-soft: 0 6px 14px rgba(0,0,0,0.08);
  --shadow-strong: 0 10px 22px rgba(0,0,0,0.14);

  /* ===== Fonts ===== */
  --font-sans: "Cairo", system-ui, "Segoe UI", Roboto, Arial;
  --font-serif: "Noto Serif", "Amiri", serif;

  /* ===== Typography ===== */
  --font-title: 28px;
  --line-title: 1.35;
  --weight-title: 800;

  --font-subtitle: 20px;
  --line-subtitle: 1.5;
  --weight-subtitle: 700;

  --font-body: 19px;
  --line-body: 1.95;
  --weight-body: 500;

  --font-link: 18px;
  --weight-link: 600;

  --font-meta: 15px;
  --line-meta: 1.6;
  --weight-meta: 500;

  --font-button: 17px;

--font-article: 19px;
--line-article: 1.95;
--font-article-mobile: 20px;
--line-article-mobile: 2;
--container-wide: 1100px;

  /* ===== BLOG STATES (Semantic Tokens) ===== */
  --state-active:   #22c55e; /* عاملة */
  --state-hold:     #f59e0b; /* معلّقة */
  --state-stopped:  #ef4444; /* موقوفة */
  --state-dead:     #9ca3af; /* متوفية */
  --state-unknown:  #94a3b8; /* غير محددة */
}

/* ===== Mobile ===== */
@media (max-width: 600px) {
  :root {
    --font-title: 24px;
    --font-subtitle: 18px;
    --font-body: 20px;
    --line-body: 2;
    --font-link: 18px;
    --font-meta: 14px;
    --font-number: 26px;
  }
}

/* ===== BUTTON SYSTEM ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--font-button);
  font-weight: 700;
  padding: 12px 30px;
  border-radius: var(--btn-radius);
  background: linear-gradient(135deg,var(--color-primary),var(--color-hover));
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: .25s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}
.btn--secondary {
  background: linear-gradient(135deg,var(--color-accent),var(--color-hover));
}