/* مطبعة سينا — design tokens
   Load fonts/alexandria.css before this file (from the site root). */

:root {
  /* ---------- colour ---------- */
  --sina-red: #A62328;            /* primary — RGB 166/35/40 — CMYK 0/100/85/35 (FOGRA39) */
  --sina-red-deep: #7A181F;       /* hover / pressed — also the pattern's maroon */
  --sina-white: #FFFFFF;
  --sina-cream-50: #FAF6F0;       /* page background, delicate style */
  --sina-cream-100: #F7F2EA;      /* alternate background */
  --sina-cream-200: #F0E7D5;      /* wool cream — frames, pattern */
  --sina-ink: #1F1A1D;            /* main text */
  --sina-muted: #6B5F58;          /* secondary text on cream-50 (≈5.7:1) */
  --sina-muted-strong: #5C514B;   /* secondary text on cream-100 / cream-200 */
  --sina-line: rgba(166, 35, 40, 0.35);  /* soft hairlines */
  --sina-slate: #5D738C;          /* pattern accent only — not for text or buttons */
  --sina-ochre: #CD963A;          /* pattern accent only — not for text or buttons */

  /* ---------- type ---------- */
  --sina-font: "Alexandria", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --sina-w-thin: 200;     /* big numbers (dimensions) in the delicate style */
  --sina-w-light: 300;    /* headings in the delicate style */
  --sina-w-regular: 400;  /* body */
  --sina-w-medium: 500;   /* labels, buttons */
  --sina-w-bold: 700;     /* rare: bold style only */
  --sina-size-xs: 0.875rem;   /* 14 */
  --sina-size-sm: 1rem;       /* 16 */
  --sina-size-md: 1.125rem;   /* 18 */
  --sina-size-lg: 1.375rem;   /* 22 */
  --sina-size-xl: 1.75rem;    /* 28 */
  --sina-size-2xl: 2.25rem;   /* 36 */
  --sina-size-3xl: 2.75rem;   /* 44 */
  --sina-size-4xl: 3.5rem;    /* 56 */
  --sina-leading-body: 1.7;
  --sina-leading-tight: 1.25;

  /* ---------- lines, shapes, space ---------- */
  --sina-hairline: 1px solid var(--sina-red);
  --sina-hairline-soft: 1px solid var(--sina-line);
  --sina-radius-card: 24px;
  --sina-radius-pill: 999px;
  --sina-arch: 9999px 9999px 0 0;   /* arched photo frame: semicircle on top */
  --sina-space-1: 4px;
  --sina-space-2: 8px;
  --sina-space-3: 12px;
  --sina-space-4: 16px;
  --sina-space-5: 24px;
  --sina-space-6: 32px;
  --sina-space-7: 48px;
  --sina-space-8: 64px;
  --sina-space-9: 96px;
}

/* ---------- ready-made helpers ---------- */

/* diamond ornament divider: ——◆—— (echoes the logo's dots) */
.sina-divider { display: flex; align-items: center; justify-content: center; gap: 14px; }
.sina-divider::before, .sina-divider::after { content: ""; width: 120px; height: 1px; background: var(--sina-red); }
.sina-divider > i { width: 8px; height: 8px; background: var(--sina-red); transform: rotate(45deg); }

/* arched product photo with a second hairline around it */
.sina-arch { padding: 12px; border: var(--sina-hairline); border-radius: var(--sina-arch); }
.sina-arch > img { display: block; width: 100%; aspect-ratio: 36 / 34; object-fit: cover; border-radius: var(--sina-arch); }

/* woven border strip (repeats seamlessly) */
.sina-band { height: 45px; background: url("../assets/pattern/border-band-tile.png") repeat-x center / auto 45px; }

/* one-colour cut-out pattern in any colour (mask) — keep it faint behind content */
.sina-pattern-mono {
  background-color: var(--sina-red);
  -webkit-mask: url("../assets/pattern/sina-zoulia-mono-tile.svg") repeat 0 0 / 400px 180px;
          mask: url("../assets/pattern/sina-zoulia-mono-tile.svg") repeat 0 0 / 400px 180px;
}