/* Hallmark · macrostructure: Marquee Hero (dark) · tone: luxury-maritime · anchor hue: navy/gold
 * theme: custom (vibe: "ميناء ليلي — كحلي عميق وذهب نحاسي وحِرفة سعودية"
 *   · paper #06172B (dark band) · accent #C9A45E warm-gold · display Amiri + body Tajawal + mono IBM Plex)
 * axes: paper-band=dark / display-style=classical-arabic-serif / accent-hue=warm-gold
 * project: سفان لصناعة القوارب واليخوت — saffan.sa
 */

:root {
  /* ===== لوحة الميناء الليلي ===== */
  --navy-950: #040F1E;
  --navy-900: #06172B;   /* الأساس */
  --navy-800: #0B2138;   /* سطح مرتفع */
  --navy-700: #102A45;   /* بطاقات داكنة */
  --line-navy: #1D3450;  /* خط شعري على الداكن */

  --ivory: #F3EEE2;      /* نص أساسي على الداكن */
  --ivory-dim: #A4B1C2;  /* نص ثانوي على الداكن */

  --gold: #C9A45E;       /* الذهبي النحاسي — هوية سفان */
  --gold-deep: #948152;
  --gold-ink: #8F7440;   /* ذهبي داكن للنص الصغير على الفاتح (تباين AA) */
  --gold-soft: rgba(201, 164, 94, .13);
  --gold-grad: linear-gradient(135deg, #E9CA85 0%, #C9A45E 46%, #9A7B45 100%);

  /* ===== الورق الكريمي (بطاقات المواصفات) ===== */
  --cream: #F1EDE1;
  --cream-card: #FFFFFF;
  --cream-ink: #10233A;
  --cream-ink-2: #55677C;
  --cream-line: #C9BFA8;

  /* ===== الحالات ===== */
  --ok: #57B894;
  --warn: #E0B15C;
  --err: #D96C5F;

  /* ===== أدوار دلالية ===== */
  --bg: var(--navy-900);
  --bg-2: var(--navy-800);
  --card: var(--navy-700);
  --text: var(--ivory);
  --text-2: var(--ivory-dim);
  --line: var(--line-navy);
  --accent: var(--gold);

  /* ===== الخطوط ===== */
  --font-display: 'Zain', 'Tajawal', sans-serif;
  --font-body: 'Tajawal', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Tajawal', monospace;

  /* ===== السلم الطباعي ===== */
  --t-hero: clamp(3.4rem, 8vw, 7.2rem);
  --t-statement: clamp(2.6rem, 6.2vw, 5.2rem);
  --t-h2: clamp(2.1rem, 4.2vw, 3.3rem);
  --t-h3: clamp(1.25rem, 2vw, 1.5rem);
  --t-lead: 1.1875rem;
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-cap: .8125rem;
  --lh-body: 1.85;
  --lh-tight: 1.35;

  /* ===== المسافات (4pt) ===== */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 144px;
  --sec-pad: clamp(96px, 11vw, 168px);
  --pad-x: clamp(20px, 5vw, 72px);
  --maxw: 1360px;

  /* ===== الأقطار ===== */
  --r-s: 4px;
  --r-m: 10px;
  --r-full: 999px;

  /* ===== الظلال والتوهج ===== */
  --shadow-deep: 0 1px 2px rgba(2, 10, 20, .5), 0 16px 48px rgba(2, 10, 20, .45);
  --shadow-card: 0 1px 2px rgba(2, 10, 20, .35), 0 10px 30px rgba(2, 10, 20, .30);
  --glow-gold: 0 0 0 1px rgba(201, 164, 94, .35), 0 6px 24px rgba(201, 164, 94, .12);

  /* ===== الحركة ===== */
  --ease-out: cubic-bezier(.22, .61, .2, 1);
  --ease-io: cubic-bezier(.45, 0, .2, 1);
  --d-fast: 200ms;
  --d-mid: 320ms;
  --d-slow: 520ms;
}