/* ============================================================
   DESIGN SYSTEM – CSS CUSTOM PROPERTIES
   Cinematic Maritime Aesthetic – GreenCoast
============================================================ */
:root {

  /* ── New Cinematic Palette ─────────────────────────────── */
  --teal:        #1DBBB0;
  --teal-light:  #5FE3D6;
  --teal-dark:   #157892;
  --navy:        #0A2733;
  --navy-2:      #0E3340;
  --navy-3:      #123D4C;
  --ink:         #11262E;
  --ink-soft:    #3C5560;
  --paper:       #F7FAFC;
  --paper-2:     #EEF4F6;
  --white:       #FFFFFF;
  --line:        #DCE6E9;

  --grad:        linear-gradient(135deg, #1DBBB0 0%, #157892 100%);
  --grad-soft:   linear-gradient(135deg, rgba(29,187,176,.12), rgba(21,120,146,.12));

  --shadow:      0 20px 50px -20px rgba(10,39,51,.35);
  --shadow-sm:   0 10px 24px -12px rgba(10,39,51,.25);

  --radius:      14px;
  --radius-sm:   8px;
  --ease:        cubic-bezier(.4, 0, .2, 1);

  /* ── Backward-Compat Aliases (لا تُحذف – تُستخدم في كل CSS) */
  --color-primary:    var(--navy);
  --color-secondary:  var(--teal);
  --color-accent:     var(--teal-dark);
  --color-bg:         var(--paper);
  --color-text-dark:  var(--ink);
  --color-text-light: var(--white);
  --color-border:     var(--line);
  --color-card-bg:    var(--white);
  --color-overlay:    rgba(10,39,51,.75);

  /* ── Typography ────────────────────────────────────────── */
  --font-heading-en:  'Poppins', sans-serif;
  --font-heading-ar:  'Cairo',   sans-serif;
  --font-body:        'Inter',   sans-serif;

  /* ── Spacing & Layout ──────────────────────────────────── */
  --section-padding:        88px 0;
  --section-padding-mobile: 56px 0;
  --container-max:          1280px;
  --card-padding:           28px;
  --transition:             0.35s var(--ease);
  --header-height:          84px;
}