/* ================================================================
   Sehaty · Design Tokens (Slate and Emerald)
   ================================================================ */

:root {

  /* ---------- Brand colors ---------- */
  --primary:            #047857;
  --primary-hover:      #065F46;
  --primary-light:      #D1FAE5;
  --primary-tint:       #ECFDF5;

  --accent:             #34D399;   /* used only on dark bands */
  --accent-light:       #A7F3D0;

  /* ---------- Status colors ---------- */
  --success:            #10B981;
  --success-bg:         #D1FAE5;
  --warning:            #D97706;
  --warning-bg:         #FEF3C7;
  --danger:             #DC2626;
  --danger-bg:          #FEE2E2;

  /* ---------- Surfaces ---------- */
  --bg:                 #F8FAFC;
  --bg-alt:             #EEF2F6;
  --bg-dark:            #0F172A;
  --card:               #FFFFFF;

  /* ---------- Text ---------- */
  --text:               #0F172A;
  --text-mid:           #475569;
  --text-muted:         #94A3B8;
  --text-on-dark:       #F1F5F9;
  --text-on-dark-mid:   #94A3B8;
  --text-on-dark-muted: #64748B;

  /* ---------- Borders ---------- */
  --border:             #E2E8F0;
  --border-strong:      #CBD5E1;
  --border-on-dark:     #1E293B;

  /* ---------- Typography ---------- */
  --font-en:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ar:            'Tajawal', 'Inter', sans-serif;
  --font-display:       'Fraunces', 'Inter', Georgia, serif;
  --font-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-hero:            clamp(38px, 6vw, 76px);
  --fs-display:         clamp(80px, 14vw, 180px);
  --fs-h2:              clamp(28px, 3.5vw, 44px);
  --fs-h3:              16px;
  --fs-body:            15px;
  --fs-body-lg:         17px;
  --fs-meta:            13px;
  --fs-eyebrow:         11px;

  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  --lh-tight:           1.05;
  --lh-heading:         1.15;
  --lh-body:            1.6;
  --lh-loose:           1.7;

  /* ---------- Spacing ---------- */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            20px;
  --space-6:            24px;
  --space-8:            32px;
  --space-10:           40px;
  --space-12:           48px;
  --space-14:           56px;
  --space-16:           64px;
  --space-20:           80px;
  --space-24:           96px;
  --space-32:           128px;

  /* ---------- Radius ---------- */
  --radius-sm:          4px;
  --radius-md:          6px;
  --radius-lg:          10px;
  --radius-pill:        999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:          0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:          0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md:          0 4px 12px rgba(15, 23, 42, 0.08);

  /* ---------- Layout ---------- */
  --container-max:      1180px;
  --container-pad:      20px;
  --header-height:      60px;

  /* ---------- Motion ---------- */
  --t-fast:             0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:             0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Dark theme ---------- */
html.dark {
  --bg:                 #0B1220;
  --bg-alt:             #111827;
  --bg-dark:            #050810;
  --card:               #1A2333;

  --text:               #F1F5F9;
  --text-mid:           #94A3B8;
  --text-muted:         #64748B;

  --border:             #1E293B;
  --border-strong:      #334155;
  --border-on-dark:     #1E293B;

  --primary-light:      #064E3B;
  --primary-tint:       #022C22;

  --accent:             #34D399;
  --accent-light:       #065F46;
}