/* ============================================
   VARIABLES.CSS — Global Design Tokens
   Liventra Interior Design | Warm Red & Beige Theme
   Inspired by logo: Deep Red · Warm Beige · Terracotta · Rose
   ============================================ */

:root {

  /* ── BASE / BACKGROUND COLOURS ── */
  /* Warm beige / cream backgrounds replacing black */
  --black-deep:    #2d1f1a;   /* deep warm espresso — main bg         */
  --black-rich:    #251812;   /* darker espresso                      */
  --black-card:    #3a2820;   /* warm dark card surface               */
  --black-surface: #321f18;   /* card hover surface                   */
  --black-border:  #5a3a2e;   /* warm dark border                     */
  --black-muted:   #7a5040;   /* muted warm divider                   */

  /* ── PRIMARY — DEEP RED (logo main colour) ── */
  --gold-primary:  #c0392b;   /* deep crimson red                     */
  --gold-bright:   #e74c3c;   /* bright accent red                    */
  --gold-light:    #f1948a;   /* soft rose-pink                       */
  --gold-dim:      #96281b;   /* dark muted red                       */
  --gold-glow:     rgba(192, 57, 43, 0.12);
  --gold-glow-md:  rgba(192, 57, 43, 0.28);
  --gold-glow-lg:  rgba(192, 57, 43, 0.48);

  /* ── TEXT COLOURS ── */
  /* Dark warm brown text on cream backgrounds */
  --white-pure:    #f5ece6;   /* warm off-white — headings             */
  --white-soft:    #e8d8d0;   /* soft warm white                       */
  --white-muted:   #c4a898;   /* muted warm tone                       */
  --white-dim:     #9a7868;   /* dim warm                              */

  --text-primary:   #f5ece6;  /* warm off-white — main text            */
  --text-secondary: #d4beb4;  /* soft warm secondary text              */
  --text-muted:     #a08878;  /* muted warm                            */

  --success: #2e7d52;
  --error:   #c94c4c;

  /* ── GRADIENTS ── */
  /* Red-to-terracotta gradients replacing gold */
  --grad-gold:        linear-gradient(135deg, #c0392b 0%, #e8846a 50%, #c0392b 100%);
  --grad-gold-subtle: linear-gradient(135deg, #96281b 0%, #c0392b 100%);
  --grad-dark:        linear-gradient(180deg, #251812 0%, #2d1f1a 100%);
  --grad-card:        linear-gradient(145deg, #3a2820 0%, #321f18 100%);
  --grad-hero:        linear-gradient(to bottom, rgba(44,24,16,0.18) 0%, rgba(44,24,16,0.65) 100%);
  --grad-section:     linear-gradient(180deg, #251812 0%, #2d1f1a 50%, #251812 100%);

  /* ── TYPOGRAPHY ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Jost', 'Segoe UI', sans-serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif;

  --text-xs:   0.70rem;
  --text-sm:   0.813rem;
  --text-base: 0.938rem;
  --text-md:   1.063rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.75rem;
  --text-5xl:  5rem;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.85;

  --tracking-tight:  -0.03em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.15em;
  --tracking-widest: 0.25em;

  /* ── SPACING ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── SECTION PADDING ── */
  --section-py: clamp(3rem, 5vw, 5rem);
  --section-px: clamp(1.25rem, 5vw, 4rem);

  /* ── LAYOUT ── */
  --container-max: 1280px;
  --container-sm:  900px;
  --container-xs:  640px;

  /* ── BORDER RADIUS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── BORDERS ── */
  --border-thin:    1px solid var(--black-border);
  --border-medium:  1px solid var(--black-muted);
  --border-gold:    1px solid var(--gold-dim);
  --border-gold-md: 1px solid var(--gold-primary);

  /* ── SHADOWS — warm tinted ── */
  --shadow-sm:      0 2px 8px rgba(100,40,20,0.10);
  --shadow-md:      0 8px 24px rgba(100,40,20,0.15);
  --shadow-lg:      0 20px 50px rgba(100,40,20,0.20);
  --shadow-xl:      0 32px 80px rgba(100,40,20,0.25);
  --shadow-gold:    0 0 24px var(--gold-glow-md);
  --shadow-gold-lg: 0 0 48px var(--gold-glow-lg);
  --shadow-inset:   inset 0 1px 0 rgba(192,57,43,0.10);

  /* ── TRANSITIONS ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:  cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --trans-fast:   0.25s var(--ease-out);
  --trans-base:   0.5s  var(--ease-out);
  --trans-slow:   0.8s  var(--ease-out);
  --trans-slower: 1.1s  var(--ease-out);

  /* ── Z-INDEX ── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  50;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-float:   500;

  /* ── NAVBAR ── */
  --nav-height:          88px;
  --nav-height-scrolled: 76px;

  /* ── WHATSAPP ── */
  --wa-color:      #25D366;
  --wa-color-dark: #128C7E;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1008; }
::-webkit-scrollbar-thumb {
  background: var(--gold-dim);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-primary); }

/* ── TEXT SELECTION ── */
::selection {
  background: var(--gold-glow-md);
  color: var(--gold-bright);
}