/* ============================================================
   LuxuryDubai.ae — Design Tokens
   "Maktoum" design system v1.0
   ------------------------------------------------------------
   All design decisions live here. Change a token, the whole
   surface updates. Mirror these into Tailwind / shadcn config
   when implementing in code.
   ============================================================ */

:root {
  /* -------- Color: Light surfaces -------- */
  --ld-bg:           #faf8f3;          /* page background, warm ivory */
  --ld-paper:        #ffffff;          /* raised surfaces, cards */
  --ld-bg-2:         #f3f0e9;          /* subtle band fill */
  --ld-ink:          #0a0a0a;          /* primary text on light */
  --ld-ink-2:        #2a2724;          /* secondary text on light */
  --ld-mute:         #6b665e;          /* tertiary / captions on light */
  --ld-line:         rgba(10, 10, 10, 0.08);
  --ld-line-strong:  rgba(10, 10, 10, 0.14);

  /* -------- Color: Dark surfaces -------- */
  --ld-dark:         #0c0b09;          /* full-bleed dark section */
  --ld-dark-2:       #161310;          /* raised on dark */
  --ld-dark-3:       #221d18;          /* hover/active on dark */
  --ld-on-dark:      #f5f0e6;          /* primary text on dark */
  --ld-on-dark-2:    #d5cdbb;          /* secondary text on dark */
  --ld-on-dark-mute: #8a8275;          /* captions on dark */
  --ld-line-dark:    rgba(245, 240, 230, 0.10);

  /* -------- Color: Accent (used sparingly, like apple-blue) -------- */
  --ld-accent:       oklch(0.65 0.10 65);   /* warm bronze ≈ #b08550 */
  --ld-accent-hover: oklch(0.58 0.10 65);
  --ld-accent-soft:  oklch(0.92 0.03 80);   /* tinted ivory wash */

  /* -------- Type families -------- */
  --ld-font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --ld-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --ld-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -------- Type scale (desktop) -------- */
  --ld-fs-display:   clamp(56px, 7.2vw, 104px);
  --ld-fs-hero:      clamp(44px, 5.0vw, 72px);
  --ld-fs-h1:        clamp(34px, 3.4vw, 48px);
  --ld-fs-h2:        clamp(26px, 2.4vw, 34px);
  --ld-fs-h3:        20px;
  --ld-fs-body-lg:   19px;
  --ld-fs-body:      17px;
  --ld-fs-sm:        14px;
  --ld-fs-eyebrow:   12px;            /* mono uppercase */

  /* -------- Type weights -------- */
  --ld-w-extralight: 200;
  --ld-w-light:      300;
  --ld-w-regular:    400;
  --ld-w-medium:     500;
  --ld-w-semibold:   600;

  /* -------- Letter spacing -------- */
  --ld-tracking-display: -0.035em;
  --ld-tracking-tight:   -0.02em;
  --ld-tracking-snug:    -0.01em;
  --ld-tracking-normal:  0;
  --ld-tracking-eyebrow: 0.14em;

  /* -------- Line height -------- */
  --ld-lh-display: 0.98;
  --ld-lh-tight:   1.08;
  --ld-lh-snug:    1.2;
  --ld-lh-body:    1.5;
  --ld-lh-relaxed: 1.65;

  /* -------- Spacing (4pt scale) -------- */
  --ld-s-1:  4px;
  --ld-s-2:  8px;
  --ld-s-3:  12px;
  --ld-s-4:  16px;
  --ld-s-5:  20px;
  --ld-s-6:  24px;
  --ld-s-8:  32px;
  --ld-s-10: 40px;
  --ld-s-12: 48px;
  --ld-s-16: 64px;
  --ld-s-20: 80px;
  --ld-s-24: 96px;
  --ld-s-32: 128px;
  --ld-s-40: 160px;

  /* -------- Radii (Apple-leaning) -------- */
  --ld-r-sm:   8px;
  --ld-r-md:   14px;
  --ld-r-lg:   22px;
  --ld-r-xl:   32px;
  --ld-r-pill: 999px;

  /* -------- Container widths -------- */
  --ld-w-prose:  680px;
  --ld-w-narrow: 980px;
  --ld-w-mid:    1200px;
  --ld-w-wide:   1440px;

  /* -------- Gutters -------- */
  --ld-gutter-mobile: 20px;
  --ld-gutter-desk:   88px;

  /* -------- Elevation (kept minimal) -------- */
  --ld-shadow-hair:  0 1px 0 var(--ld-line);
  --ld-shadow-card:  0 1px 2px rgba(10,10,10,0.04), 0 12px 32px -16px rgba(10,10,10,0.10);
  --ld-shadow-pop:   0 1px 2px rgba(10,10,10,0.06), 0 28px 60px -24px rgba(10,10,10,0.18);

  /* -------- Motion -------- */
  --ld-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);    /* apple-ease */
  --ld-ease-out:cubic-bezier(0.16, 1, 0.30, 1);       /* apple ease-out for entrances */
  --ld-dur-1:   140ms;
  --ld-dur-2:   240ms;
  --ld-dur-3:   420ms;
  --ld-dur-4:   680ms;

  /* -------- Focus ring -------- */
  --ld-focus: 0 0 0 2px var(--ld-bg), 0 0 0 4px var(--ld-accent);
}