/* ============================================================
   YOUSSIF DESIGN SYSTEM — tokens.css
   الـ Design Tokens كاملة: الألوان، التايبوغرافي، المسافات،
   الظلال، الحركة، والـ Z-Index
   الاستخدام: @import './tokens.css'; في أول ملف CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Noto+Kufi+Arabic:wght@300;400;500;700&family=DM+Mono:wght@300;400&display=swap');

/* ── Light Mode (Default) ─────────────────────────────────── */
:root {

  /* ── PRIMITIVE: Purple Scale ── */
  --primitive-purple-50:  #F5F0FF;
  --primitive-purple-100: #EDE4FF;
  --primitive-purple-200: #D6C5FF;
  --primitive-purple-300: #B89EFF;
  --primitive-purple-400: #9270F5;
  --primitive-purple-500: #6B3FA0;
  --primitive-purple-600: #5A2D8C;
  --primitive-purple-700: #461F72;
  --primitive-purple-800: #321558;
  --primitive-purple-900: #1E0A36;
  --primitive-purple-950: #0F0520;

  /* ── PRIMITIVE: Gold Scale ── */
  --primitive-gold-50:  #FFFBF0;
  --primitive-gold-100: #FFF4D6;
  --primitive-gold-200: #FFE5A0;
  --primitive-gold-300: #F5CC6A;
  --primitive-gold-400: #E8B043;
  --primitive-gold-500: #C8922A;
  --primitive-gold-600: #A67520;
  --primitive-gold-700: #825A16;
  --primitive-gold-800: #5E400F;
  --primitive-gold-900: #3A2808;

  /* ── PRIMITIVE: Neutral Scale ── */
  --primitive-neutral-0:   #FFFFFF;
  --primitive-neutral-50:  #F8F7F5;
  --primitive-neutral-100: #F0EEE9;
  --primitive-neutral-200: #E2DDD5;
  --primitive-neutral-300: #C8C1B5;
  --primitive-neutral-400: #A89E90;
  --primitive-neutral-500: #7A7268;
  --primitive-neutral-600: #5A5448;
  --primitive-neutral-700: #3E3830;
  --primitive-neutral-800: #242018;
  --primitive-neutral-900: #120F0A;
  --primitive-neutral-950: #080604;

  /* ── SEMANTIC: Background ── */
  --color-bg-base:     var(--primitive-neutral-50);
  --color-bg-surface:  var(--primitive-neutral-0);
  --color-bg-elevated: var(--primitive-neutral-0);
  --color-bg-overlay:  rgba(18, 9, 36, 0.72);
  --color-bg-inverse:  var(--primitive-purple-900);

  /* ── SEMANTIC: Brand ── */
  --color-brand-primary:   var(--primitive-purple-600);
  --color-brand-secondary: var(--primitive-gold-400);
  --color-brand-accent:    var(--primitive-purple-400);
  --color-brand-muted:     var(--primitive-purple-100);

  /* ── SEMANTIC: Text ── */
  --color-text-primary:   var(--primitive-neutral-900);
  --color-text-secondary: var(--primitive-neutral-600);
  --color-text-tertiary:  var(--primitive-neutral-400);
  --color-text-inverse:   var(--primitive-neutral-0);
  --color-text-brand:     var(--primitive-purple-600);
  --color-text-gold:      var(--primitive-gold-600);

  /* ── SEMANTIC: Border ── */
  --color-border-subtle:  var(--primitive-neutral-200);
  --color-border-default: var(--primitive-neutral-300);
  --color-border-strong:  var(--primitive-neutral-500);
  --color-border-brand:   var(--primitive-purple-400);
  --color-border-gold:    var(--primitive-gold-300);

  /* ── SEMANTIC: Status ── */
  --color-success-bg: #EDFAF3;
  --color-success:    #1A8A4A;
  --color-warning-bg: #FFF8E6;
  --color-warning:    #B87508;
  --color-error-bg:   #FFF0F0;
  --color-error:      #C42B2B;
  --color-info-bg:    #EEF4FF;
  --color-info:       #2A5FBF;

  /* ── TYPOGRAPHY: Font Families ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-arabic:  'Noto Kufi Arabic', 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ── TYPOGRAPHY: Type Scale (Major Third ×1.25) ── */
  --text-2xs:  0.64rem;    /* 10.24px */
  --text-xs:   0.75rem;    /* 12px    */
  --text-sm:   0.875rem;   /* 14px    */
  --text-base: 1rem;       /* 16px    */
  --text-lg:   1.25rem;    /* 20px    */
  --text-xl:   1.563rem;   /* 25px    */
  --text-2xl:  1.953rem;   /* 31px    */
  --text-3xl:  2.441rem;   /* 39px    */
  --text-4xl:  3.052rem;   /* 49px    */
  --text-5xl:  3.815rem;   /* 61px    */

  /* ── TYPOGRAPHY: Line Height ── */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;
  --leading-loose:   2.0;

  /* ── TYPOGRAPHY: Letter Spacing ── */
  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* ── SPACING: 8px Grid ── */
  --space-0:   0px;
  --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;
  --space-40: 160px;
  --space-48: 192px;

  /* ── BORDER RADIUS ── */
  --radius-none:  0px;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-3xl:   32px;
  --radius-full:  9999px;

  /* ── SHADOWS ── */
  --shadow-xs:    0 1px 2px rgba(10, 5, 20, 0.06);
  --shadow-sm:    0 2px 8px rgba(10, 5, 20, 0.08);
  --shadow-md:    0 4px 20px rgba(10, 5, 20, 0.10);
  --shadow-lg:    0 8px 40px rgba(10, 5, 20, 0.14);
  --shadow-xl:    0 20px 80px rgba(10, 5, 20, 0.20);
  --shadow-brand: 0 8px 32px rgba(90, 45, 140, 0.28);
  --shadow-gold:  0 4px 24px rgba(200, 146, 42, 0.22);
  --shadow-inner: inset 0 2px 8px rgba(10, 5, 20, 0.08);

  /* ── MOTION: Easing ── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-linear: linear;

  /* ── MOTION: Duration ── */
  --duration-instant: 80ms;
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
  --duration-slowest:900ms;

  /* ── Z-INDEX ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}

/* ── Dark Mode ────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-base:     var(--primitive-purple-950);
  --color-bg-surface:  var(--primitive-purple-900);
  --color-bg-elevated: var(--primitive-purple-800);
  --color-bg-overlay:  rgba(0, 0, 0, 0.80);
  --color-bg-inverse:  var(--primitive-neutral-0);

  --color-brand-primary:   var(--primitive-purple-400);
  --color-brand-secondary: var(--primitive-gold-300);
  --color-brand-accent:    var(--primitive-purple-300);
  --color-brand-muted:     rgba(107, 63, 160, 0.20);

  --color-text-primary:   var(--primitive-neutral-50);
  --color-text-secondary: var(--primitive-neutral-300);
  --color-text-tertiary:  var(--primitive-neutral-500);
  --color-text-inverse:   var(--primitive-neutral-900);
  --color-text-brand:     var(--primitive-purple-300);
  --color-text-gold:      var(--primitive-gold-300);

  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.12);
  --color-border-strong:  rgba(255, 255, 255, 0.24);

  --shadow-brand: 0 8px 32px rgba(146, 112, 245, 0.36);
  --shadow-gold:  0 4px 24px rgba(245, 204, 106, 0.20);
}