/* =============================================================
   lamporia.ae — Design Tokens
   Single source of truth for all visual values.
============================================================= */

:root {

  /* ── Palette ──────────────────────────────────────────── */
  --color-primary:     #111111;
  --color-bg:          #FAF9F6;
  --color-white:       #FFFFFF;
  --color-muted:       #737373;
  --color-border:      #E8E5DF;
  --color-gold:        #B8955A;
  --color-gold-lt:     #F5E6C8;
  --color-gold-dk:     #9E7D47;
  --color-surface:     #F4F1EB;
  --color-surface-2:   #EBE7DF;
  --color-ph:          #ECEBE5;   /* placeholder background */
  --color-footer:      #111111;
  --color-footer-text: #8F8C85;
  --color-footer-rule: #242220;
  --color-ok:          #3D7A52;
  --color-err:         #B83030;

  /* ── Typography ───────────────────────────────────────── */
  --f-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-sans:  'Jost', 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Type scale ───────────────────────────────────────── */
  --t-xs:   0.6875rem;  /* 11 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 1rem;       /* 16 */
  --t-md:   1.0625rem;  /* 17 */
  --t-lg:   1.1875rem;  /* 19 */
  --t-xl:   1.375rem;   /* 22 */
  --t-2xl:  1.75rem;    /* 28 */
  --t-3xl:  2.125rem;   /* 34 */
  --t-4xl:  2.75rem;    /* 44 */
  --t-5xl:  3.5rem;     /* 56 */
  --t-6xl:  4.5rem;     /* 72 */

  /* ── Weights ──────────────────────────────────────────── */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ── Line heights ─────────────────────────────────────── */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* ── Spacing ──────────────────────────────────────────── */
  --s1:  0.25rem;   /*  4px */
  --s2:  0.5rem;    /*  8px */
  --s3:  0.75rem;   /* 12px */
  --s4:  1rem;      /* 16px */
  --s5:  1.25rem;   /* 20px */
  --s6:  1.5rem;    /* 24px */
  --s8:  2rem;      /* 32px */
  --s10: 2.5rem;    /* 40px */
  --s12: 3rem;      /* 48px */
  --s14: 3.5rem;    /* 56px */
  --s16: 4rem;      /* 64px */
  --s20: 5rem;      /* 80px */
  --s24: 6rem;      /* 96px */

  /* ── Section rhythm ───────────────────────────────────── */
  --sec:    clamp(4rem, 8vw, 8rem);
  --sec-sm: clamp(2.5rem, 5vw, 5rem);

  /* ── Container ────────────────────────────────────────── */
  --cx:    clamp(1.25rem, 4vw, 4.5rem);   /* inline padding */
  --c-max: 1280px;
  --c-mid: 1060px;

  /* ── Radii ────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-2xl:  26px;
  --r-pill: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --sh-xs: 0 1px 4px rgba(17,17,17,.05);
  --sh-sm: 0 2px 12px rgba(17,17,17,.07);
  --sh-md: 0 6px 24px rgba(17,17,17,.09);
  --sh-lg: 0 14px 48px rgba(17,17,17,.12);
  --sh-xl: 0 24px 72px rgba(17,17,17,.14);

  /* ── Easings ──────────────────────────────────────────── */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease2:  cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Transitions ──────────────────────────────────────── */
  --tf: 120ms var(--ease);   /* fast */
  --tb: 220ms var(--ease);   /* base */
  --ts: 380ms var(--ease);   /* slow */

  /* ── Z-index ──────────────────────────────────────────── */
  --z-nav:     200;
  --z-overlay: 300;
  --z-drawer:  400;
  --z-toast:   500;

  /* ── Nav ──────────────────────────────────────────────── */
  --nav-h:    72px;
  --nav-h-sm: 60px;
}

/* ── Aliases for backward compatibility ───────────────── */
/* Some templates still reference the long form names     */
:root {
  --color-background: var(--color-bg);
  --font-heading: var(--f-serif);
  --font-body:    var(--f-sans);
  --color-surface:        #F4F1EB;
  --color-surface-2:      #EBE7DF;
  --color-gold-light:     var(--color-gold-lt);
  --color-gold-hover:     var(--color-gold-dk);
  --color-placeholder-bg: var(--color-ph);
  --color-footer-bg:      var(--color-footer);
  --color-footer-text:    #8F8C85;
  --color-footer-border:  var(--color-footer-rule);
  --color-success:        var(--color-ok);
  --color-error:          var(--color-err);
  --nav-height:    var(--nav-h);
  --nav-height-sm: var(--nav-h-sm);
  --section-gap:    var(--sec);
  --section-gap-sm: var(--sec-sm);
  --container-px:  var(--cx);
  --container-wide: var(--c-max);
  --container-base: var(--c-mid);
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --radius-2xl:  var(--r-2xl);
  --radius-full: var(--r-pill);
  --shadow-xs: var(--sh-xs);
  --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md);
  --shadow-lg: var(--sh-lg);
  --shadow-xl: var(--sh-xl);
  --transition-fast: var(--tf);
  --transition-base: var(--tb);
  --transition-slow: var(--ts);
  --ease-out:   var(--ease);
  --ease-in-out: var(--ease2);
  --weight-light:    var(--w-light);
  --weight-regular:  var(--w-regular);
  --weight-medium:   var(--w-medium);
  --weight-semibold: var(--w-semibold);
  --weight-bold:     var(--w-bold);
  --leading-tight:  var(--lh-tight);
  --leading-snug:   var(--lh-snug);
  --leading-normal: var(--lh-normal);
  --leading-loose:  var(--lh-loose);
  --text-xs:   var(--t-xs);
  --text-sm:   var(--t-sm);
  --text-base: var(--t-base);
  --text-md:   var(--t-md);
  --text-lg:   var(--t-lg);
  --text-xl:   var(--t-xl);
  --text-2xl:  var(--t-2xl);
  --text-3xl:  var(--t-3xl);
  --text-4xl:  var(--t-4xl);
  --text-5xl:  var(--t-5xl);
  --text-6xl:  var(--t-6xl);
  --space-1:  var(--s1);
  --space-2:  var(--s2);
  --space-3:  var(--s3);
  --space-4:  var(--s4);
  --space-5:  var(--s5);
  --space-6:  var(--s6);
  --space-8:  var(--s8);
  --space-10: var(--s10);
  --space-12: var(--s12);
  --space-14: var(--s14);
  --space-16: var(--s16);
  --space-20: var(--s20);
  --space-24: var(--s24);
  --z-sticky:  var(--z-nav);
  --z-overlay: var(--z-overlay);
  --z-modal:   var(--z-drawer);
  --z-toast:   var(--z-toast);
}