/* ==========================================================================
   Sobha Seinna — Design Tokens
   Single source of truth for colour, type, spacing, elevation and motion.
   Change values here to re-skin the entire website.
   ========================================================================== */

:root {
  /* ---- Colour: warm neutral base, charcoal ink, restrained gold accent ---- */
  --color-bg: #faf8f4;
  --color-bg-alt: #f3efe8;
  --color-surface: #ffffff;
  --color-surface-sunken: #f7f4ee;

  --color-ink: #1a1917;
  --color-ink-soft: #4d4842;
  --color-muted: #7a746a;
  --color-inverse: #f6f3ed;

  --color-accent: #9c7a35;
  --color-accent-strong: #7e6026;
  --color-accent-soft: #f0e7d5;

  --color-dark: #16150f;
  --color-dark-alt: #211f18;

  --color-border: #e4ded2;
  --color-border-strong: #cfc6b5;
  --color-border-dark: rgba(246, 243, 237, 0.16);

  --color-success: #2f6b46;
  --color-success-bg: #e8f2eb;
  --color-error: #a32e25;
  --color-error-bg: #fbeceb;
  --color-notice-bg: #fdf7e8;
  --color-notice-border: #e8d6a8;

  --color-whatsapp: #128c7e;

  /* ---- Typography ---- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.8125rem;   /* 13px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.0625rem;   /* 17px */
  --fs-lg: 1.1875rem;   /* 19px */
  --fs-xl: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --fs-h3: clamp(1.25rem, 1.08rem + 0.8vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --fs-h1: clamp(2rem, 1.4rem + 3vw, 3.75rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.65;

  --ls-wide: 0.16em;
  --ls-mid: 0.08em;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-pad: clamp(3rem, 1.5rem + 6vw, 6rem);

  /* ---- Layout ---- */
  --container-width: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  --header-height: 68px;
  --mobile-bar-height: 62px;

  /* ---- Shape & elevation ---- */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26, 25, 23, 0.05), 0 2px 8px rgba(26, 25, 23, 0.04);
  --shadow-md: 0 6px 24px rgba(26, 25, 23, 0.08);
  --shadow-lg: 0 18px 48px rgba(26, 25, 23, 0.14);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  /* ---- Z-index ladder ---- */
  --z-header: 60;
  --z-mobilebar: 70;
  --z-float: 65;
  --z-drawer: 80;
  --z-modal: 90;
  --z-lightbox: 95;
}