/* ===================== Systems / dashboard theme =====================
   Applied to the catalog + pricing sections while the visitor is in
   "نظام كامل ليك" mode. Same contract as .theme-wedding: it only
   re-points the ramp and the semantic tokens. */
.theme-systems {
  /* ---- Systems palette (Harbor navy — Teal — Mint) ---- */
  --ink-navy:    #0B1B2B;
  --harbor-blue: #12405F;
  --deep-teal:   #1B7F79;
  --aqua:        #3FA79B;
  --mint:        #8FCEC1;

  /* ---- Shades & tints derived from the palette above ---- */
  --mint-soft:  #c6e5dd;
  --mint-pale:  #e2f1ec;
  --mint-palest:#f0f8f5;
  --mint-wash:  #f6fbf9;

  --ramp-1: var(--ink-navy);
  --ramp-2: var(--harbor-blue);
  --ramp-3: var(--deep-teal);
  --ramp-4: var(--aqua);
  --ramp-5: var(--mint);
  --ramp-6: var(--mint-soft);
  --ramp-7: var(--mint-pale);
  --ramp-8: var(--mint-palest);

  /* Same caveat as the other themes: a var() inside a custom-property
     declaration resolves where it is declared, so every ramp-derived
     token has to be repeated here. */
  --ink: var(--ink-navy);
  --ink-soft: rgba(11, 27, 43, .70);
  --bg: var(--mint-wash);
  --border: var(--mint-soft);
  --primary: var(--ramp-2);
  --primary-dark: var(--ramp-1);
  --primary-hover: var(--ramp-3);
  --primary-light: var(--ramp-7);
  --accent: var(--ramp-4);
  --success: var(--ramp-3);
  --danger: var(--ramp-2);
  --header-bg: rgba(246, 251, 249, .85);

  --veil-dark: rgba(11, 27, 43, .55);
  --veil-dark-soft: rgba(11, 27, 43, .22);
  --glow-iris: rgba(143, 206, 193, .30);
  --glow-lilac: rgba(18, 64, 95, .42);
  --shadow-ink: rgba(11, 27, 43, .18);
  --shadow-ink-strong: rgba(11, 27, 43, .28);
  --shadow-deep: rgba(11, 27, 43, .38);

  --grad-night: linear-gradient(160deg, var(--ramp-1) 0%, var(--ramp-2) 58%, var(--ramp-3) 100%);
  --grad-brand: linear-gradient(135deg, var(--ramp-1), var(--ramp-3));
  --shadow: 0 10px 30px -12px var(--shadow-ink);

  color: var(--ink);
}