/* =========================================================================
   Cengiz Emlak — Design Tokens
   Premium Dubai real-estate aesthetic: midnight base, champagne gold,
   editorial serif display + grotesk body. RTL-aware. WCAG AA contrast.
   ========================================================================= */

:root {
  /* — Brand: Champagne gold spectrum — */
  --gold-50:  #FBF7EC;
  --gold-100: #F2E9CC;
  --gold-200: #E4CF94;
  --gold-300: #D5B871;
  --gold-400: #C9A961;   /* PRIMARY */
  --gold-500: #B0904A;
  --gold-600: #8A7138;
  --gold-700: #5C4A22;

  /* — Surface: deep midnight w/ subtle warm undertone — */
  --ink-50:  #F7F5EF;    /* warm off-white */
  --ink-100: #E9E5D7;
  --ink-200: #C7C2B0;
  --ink-300: #8B8775;
  --ink-400: #565344;
  --ink-500: #2F2D24;
  --ink-600: #1B1F2C;
  --ink-700: #131725;
  --ink-800: #0D1120;
  --ink-900: #080B16;    /* deepest */

  /* — Semantic surfaces — */
  --bg:           var(--ink-900);
  --bg-elevated:  var(--ink-800);
  --bg-card:      var(--ink-700);
  --bg-overlay:   rgba(8, 11, 22, 0.78);

  /* — Semantic text — */
  --text:         var(--ink-50);
  --text-muted:   #B5B0A0;
  --text-dim:     #80796A;
  --text-inverse: var(--ink-900);

  /* — Accents — */
  --accent:       var(--gold-400);
  --accent-hover: var(--gold-300);
  --accent-deep:  var(--gold-600);
  --accent-soft:  rgba(201, 169, 97, 0.08);

  /* — Strokes — */
  --line:         rgba(201, 169, 97, 0.14);
  --line-strong:  rgba(201, 169, 97, 0.28);
  --line-soft:    rgba(245, 241, 232, 0.06);

  /* — Status — */
  --success: #6BAE7E;
  --warning: #E4B062;
  --danger:  #C25E5E;
  --info:    #6A93C1;

  /* — Typography —
     Display: Fraunces (variable serif, modern editorial, optical sizing).
     Body:    Manrope (premium grotesk sans, high legibility).
     Arabic:  Tajawal (modern naskh, sans-companion for AR).
  */
  --font-display: 'Fraunces', 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body:    'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-arabic:  'Tajawal', 'Noto Naskh Arabic', 'Amiri', serif;

  /* — Type scale (perfect-fourth-ish, custom) — */
  --fs-xxs:  0.6875rem;   /* 11 */
  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.375rem;    /* 22 */
  --fs-xl:   1.75rem;     /* 28 */
  --fs-2xl:  2.25rem;     /* 36 */
  --fs-3xl:  3rem;        /* 48 */
  --fs-4xl:  4rem;        /* 64 */
  --fs-5xl:  5.5rem;      /* 88 */
  --fs-6xl:  7.5rem;      /* 120 */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;
  --tracking-xwide: 0.18em;

  /* — Spacing scale (4px base) — */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;
  --s-40: 10rem;
  --s-48: 12rem;

  /* — Layout — */
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --gutter:        clamp(1rem, 2vw, 2rem);

  /* — Radii — */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-4:   12px;
  --r-5:   20px;
  --r-full: 9999px;

  /* — Elevation — */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.55);
  --shadow-3: 0 24px 60px -20px rgba(0,0,0,.65);
  --shadow-gold: 0 12px 40px -16px rgba(201, 169, 97, 0.35);

  /* — Motion — */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 0.99, 0.3);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  520ms;
  --dur-xslow: 900ms;

  /* — Z-index — */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* RTL token overrides (Arabic prefers slightly more line-height for diacritics) */
:root[dir="rtl"] {
  --font-body:    var(--font-arabic);
  --font-display: var(--font-arabic);
  --lh-base:  1.7;
  --tracking-tight: 0;
  --tracking-snug:  0;
}