/* ═══════════════════════════════════════════════════════════════════════════
   Palace Oriental Rugs — Design System Tokens & Base Styles
   ═══════════════════════════════════════════════════════════════════════════
   Single source of truth for the entire site. Every page links this file.
   DO NOT hardcode hex, px, or font values in page-level <style> blocks.
   Use these variables instead.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── COLOR SYSTEM ────────────────────────────────────────────────────────── */

:root {
  /* Core palette */
  --color-bg:           #FAF8F5;     /* warm off-white — primary background     */
  --color-surface:      #F2EDE6;     /* warm cream — cards, sections             */
  --color-border:       #E0D8CE;     /* warm light — dividers, borders           */
  --color-text:         #1C1917;     /* near black — primary text                */
  --color-text-muted:   #78716C;     /* warm gray — secondary text               */
  --color-accent:       #7A684E;     /* tobacco / aged leather — CTAs, links     */
  --color-accent-dark:  #6B5237;     /* darker leather — hover states            */
  --color-white:        #FFFFFF;

  /* Legacy aliases — existing pages use these names.
     As pages migrate, prefer the --color-* canonical names above. */
  --bg:     var(--color-bg);
  --text:   var(--color-text);
  --muted:  var(--color-text-muted);
  --hair:   var(--color-border);
  --accent: var(--color-accent);
}


/* ── TYPOGRAPHY SYSTEM ───────────────────────────────────────────────────── */

:root {
  /* Families */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;

  /* Scale (fluid) */
  --font-size-xs:   clamp(0.75rem,  1vw,   0.875rem);
  --font-size-sm:   clamp(0.875rem, 1.2vw, 1rem);
  --font-size-base: clamp(1rem,     1.5vw, 1.125rem);
  --font-size-md:   clamp(1.125rem, 2vw,   1.375rem);
  --font-size-lg:   clamp(1.375rem, 2.5vw, 1.75rem);
  --font-size-xl:   clamp(1.75rem,  3.5vw, 2.5rem);
  --font-size-2xl:  clamp(2.5rem,   5vw,   3.75rem);
  --font-size-3xl:  clamp(3rem,     7vw,   5rem);
}


/* ── SPACING SYSTEM ──────────────────────────────────────────────────────── */

:root {
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
}


/* ── LAYOUT SYSTEM ───────────────────────────────────────────────────────── */

:root {
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  26px;
  --radius-full: 999px;
}


/* ── MOTION SYSTEM ───────────────────────────────────────────────────────── */

:root {
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-reveal:  600ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BASE RESETS & ELEMENT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Focus ring — visible, accessible, consistent */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container widths */
.container       { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-6); }
.container--sm   { max-width: var(--container-sm); margin-inline: auto; padding-inline: var(--space-6); }
.container--md   { max-width: var(--container-md); margin-inline: auto; padding-inline: var(--space-6); }
.container--lg   { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-6); }
.container--2xl  { max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--space-6); }

/* Section spacing */
.section {
  padding-block: var(--space-16);
}

/* Screen reader only (accessible hiding) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SHARED COMPONENT BASES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Primary CTA button */
.btn-primary {
  display: inline-block;
  padding: 14px 36px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-accent);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.btn-primary:hover {
  background: var(--color-accent-dark);
}

/* Outline variant */
.btn-outline {
  display: inline-block;
  padding: 12px 34px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: transparent;
  border: 1.5px solid var(--color-accent);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-outline:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

/* Section kicker (small caps label above headings) */
.kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

/* Decorative divider line */
.divider {
  width: 48px;
  height: 1px;
  background: var(--color-accent);
}