/* ════════════════════════════════════════════════════════════════
   JOWANA ALMALKY · PREMIUM PORTFOLIO
   Design Tokens — Strict Black & White
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── PRIMARY PALETTE (B&W ONLY) ── */
  --color-black:        #000000;
  --color-near-black:   #0A0A0A;
  --color-deep:         #111111;
  --color-graphite:     #1A1A1A;
  --color-gray-900:     #2A2A2A;
  --color-gray-700:     #444444;
  --color-gray-500:     #777777;
  --color-gray-400:     #999999;
  --color-gray-300:     #BFBFBF;
  --color-gray-200:     #E8E8E8;
  --color-gray-100:     #F5F5F5;
  --color-off-white:    #FAFAFA;
  --color-white:        #FFFFFF;

  /* ── SEMANTIC TOKENS ── */
  --bg-primary:         var(--color-black);
  --bg-secondary:       var(--color-white);
  --bg-deep:            var(--color-near-black);
  --text-primary-on-black: var(--color-white);
  --text-primary-on-white: var(--color-black);
  --text-muted-on-black:  rgba(255,255,255,0.55);
  --text-muted-on-white:  rgba(0,0,0,0.55);
  --border-on-black:    rgba(255,255,255,0.10);
  --border-on-white:    rgba(0,0,0,0.10);

  /* ── TYPOGRAPHY ── */
  --font-display:       'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:          'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-mega:          clamp(72px, 13vw, 200px);   /* hero name */
  --text-hero:          clamp(56px, 9vw, 140px);
  --text-h1:            clamp(40px, 6vw, 86px);
  --text-h2:            clamp(28px, 4.2vw, 56px);
  --text-h3:            clamp(22px, 3vw, 36px);
  --text-h4:            clamp(18px, 2vw, 24px);
  --text-body-lg:       clamp(16px, 1.4vw, 19px);
  --text-body:          clamp(14px, 1.1vw, 16px);
  --text-small:         13px;
  --text-caption:       12px;
  --text-label:         11px;
  --text-micro:         10px;

  --weight-thin:        200;
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semi:        600;

  --tracking-tight:     -0.025em;
  --tracking-normal:    0;
  --tracking-wide:      0.08em;
  --tracking-ultra:     0.22em;
  --tracking-extra:     0.35em;

  --leading-tight:      0.95;
  --leading-snug:       1.15;
  --leading-normal:     1.4;
  --leading-relaxed:    1.7;
  --leading-loose:      1.9;

  /* ── SPACING ── */
  --space-2xs:   4px;
  --space-xs:    8px;
  --space-sm:    16px;
  --space-md:    32px;
  --space-lg:    64px;
  --space-xl:    96px;
  --space-2xl:   128px;
  --space-3xl:   180px;
  --space-4xl:   240px;

  --section-pad-v:        clamp(80px, 11vw, 180px);
  --section-pad-h:        clamp(24px, 6vw, 120px);
  --section-pad-h-tight:  clamp(20px, 4vw, 80px);

  --container-max:        1600px;
  --container-default:    1280px;
  --container-narrow:     960px;
  --container-text:       720px;

  /* ── EFFECTS ── */
  --filter-bw:            grayscale(100%) contrast(1.08);
  --filter-bw-soft:       grayscale(100%) contrast(1.04);
  --filter-bw-strong:     grayscale(100%) contrast(1.15);

  --transition-fast:      0.2s ease;
  --transition-base:      0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:      0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-cinematic: 1.2s cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-soft:    0 6px 24px rgba(0,0,0,0.10);
  --shadow-deep:    0 20px 60px rgba(0,0,0,0.25);

  /* ── Z-INDEX ── */
  --z-base:     1;
  --z-content:  10;
  --z-overlay:  50;
  --z-nav:      90;
  --z-modal:    100;
  --z-cursor:   999;
}