/* =========================
   OVA Brand Identity Tokens
   ========================= */
:root{
  /* Brand */
  --ova-dark:#1B512D;            /* Dark Green */
  --ova-teal:#4AE2EF;            /* Sea Blue (خلّينا نفس اسم متغيرك القديم عشان ما نغير كثير) */
  --bg-creme:#F9FFF6;            /* Light Shade */
  --card:#ffffff;

  /* RGB helpers for rgba() */
  --ova-dark-rgb: 27, 81, 45;
  --ova-teal-rgb: 74, 226, 239;

  /* Text */
  --text:#0F2A20;
  --muted: rgba(15,42,32,.62);
  --line: rgba(var(--ova-dark-rgb), .12);

  /* Accents */
  --accent: var(--ova-teal);
  --accent-soft: rgba(var(--ova-teal-rgb), .14);
  --accent-med:  rgba(var(--ova-teal-rgb), .22);
  --accent-strong: rgba(var(--ova-teal-rgb), .36);

  /* Shadows */
  --shadow: 0 18px 55px rgba(0,0,0,0.06);
  --shadow-strong: 0 30px 90px rgba(0,0,0,0.18);

  --font-ar: "Amiri", serif;
  --font-en: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* Typography scale (desktop) */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 28px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    800;
  --fw-black:   900;

  /* Letter spacing */
  --ls-tight:  .02em;
  --ls-ui:     .10em;
  --ls-wide:   .22em;
  --ls-kicker: .38em;
}

/* Mobile scale override */
@media (max-width: 640px){
  :root{
    --fs-2xs: 10px;
    --fs-xs:  11px;
    --fs-sm:  12px;
    --fs-md:  14px;
    --fs-lg:  16px;
    --fs-xl:  18px;
    --fs-2xl: 24px;
  }
}
/* ============ Quick Fixes ============ */

/* Secondary button كان فيه color: green; (يكسّر الهوية) */
.btn-secondary{
  background: rgba(255,255,255,0.14);
  color:#fff;
  border: 1px solid rgba(var(--ova-teal-rgb), .28);
}
.btn-secondary:hover{
  transform: translateY(-2px);
  background: rgba(var(--ova-teal-rgb), .14);
}

/* Primary button يطلع Sea Blue رسمي */
.btn-primary{
  background: linear-gradient(135deg, rgba(var(--ova-teal-rgb), .98), rgba(var(--ova-teal-rgb), .78));
  color: rgba(10,26,22,0.95);
}

/* Header gradient للهوية الجديدة */
.header-pill{
  background: linear-gradient(
    135deg,
    rgba(var(--ova-dark-rgb), .92),
    rgba(var(--ova-dark-rgb), .72) 45%,
    rgba(var(--ova-teal-rgb), .18)
  );
}
header.scrolled .header-pill{
  background: linear-gradient(
    135deg,
    rgba(var(--ova-dark-rgb), .96),
    rgba(var(--ova-dark-rgb), .78) 45%,
    rgba(var(--ova-teal-rgb), .20)
  );
}

/* Hover accents عامة */
.nav-link:hover{ background: rgba(var(--ova-teal-rgb), .18); color:#fff; }
.pill:hover{ background: rgba(var(--ova-teal-rgb), .20); }
.dropdown a:hover{ background: rgba(var(--ova-teal-rgb), .18); color:#fff; }
.product-card a{
  color: var(--accent);
  border: 1px solid rgba(var(--ova-teal-rgb), .38);
  background: rgba(var(--ova-teal-rgb), .08);
}
.product-card a:hover{ background: rgba(var(--ova-teal-rgb), .18); }
.field:focus{
  border-color: rgba(var(--ova-teal-rgb), .95);
  box-shadow: 0 0 0 4px rgba(var(--ova-teal-rgb), .18);
}