/* =========================================================
   variables.css – Museum Heritage Edition
   ========================================================= */

/* ── LIGHT THEME (Ivory / Sandstone) ──────────────────── */
:root,
[data-theme="light"] {
  --bg:           #FDFBF7;
  --bg2:          #F5F0E8;
  --bg3:          #EBE4D5;

  --surface:      rgba(0,0,0,0.02);
  --surface2:     rgba(0,0,0,0.04);
  --border:       #DDD4C5;
  --border2:      #C8BAA8;

  --accent:       #B87333;
  --accent2:      #D4A017;
  --accent3:      #8B4513;
  --accent-rgb:   184, 115, 51;
  --accent-glow:  rgba(212, 160, 23, 0.18);

  --text:         #2A2825;
  --text2:        #665D55;
  --text3:        #998F85;

  --nav-bg:       rgba(253, 251, 247, 0.92);
  --card-bg:      #FFFFFF;

  /* Stone Relief Shadows */
  --shadow-carved-in:  inset 1px 2px 6px rgba(0,0,0,0.06), inset -1px -1px 4px rgba(255,255,255,0.7);
  --shadow-carved-out: 2px 4px 12px rgba(0,0,0,0.06), -1px -1px 6px rgba(255,255,255,0.8);
  --shadow-sm:         0 2px 8px rgba(0,0,0,0.05);
  --shadow:            0 8px 24px rgba(0,0,0,0.07);
  --shadow-lg:         0 20px 48px rgba(0,0,0,0.1);

  --success:      #4a7c59;
  --error:        #9B2335;
  --bg-glow:      rgba(255, 246, 228, 0.38);
}

/* ── DARK THEME (Museum Night / Espresso + Gold) ────────── */
[data-theme="dark"] {
  --bg:           #1E1C1A;
  --bg2:          #272422;
  --bg3:          #312D2A;

  --surface:      rgba(255,255,255,0.02);
  --surface2:     rgba(255,255,255,0.04);
  --border:       #403C38;
  --border2:      #534E49;

  --accent:       #D4A017;
  --accent2:      #E8BE40;
  --accent3:      #B87333;
  --accent-rgb:   212, 160, 23;
  --accent-glow:  rgba(212, 160, 23, 0.25);

  --text:         #F2EDE6;
  --text2:        #BDB0A4;
  --text3:        #7A706A;

  --nav-bg:       rgba(30, 28, 26, 0.92);
  --card-bg:      #242220;

  --shadow-carved-in:  inset 1px 2px 8px rgba(0,0,0,0.4), inset -1px -1px 4px rgba(255,255,255,0.03);
  --shadow-carved-out: 2px 4px 16px rgba(0,0,0,0.5), -1px -1px 4px rgba(255,255,255,0.02);
  --shadow-sm:         0 2px 8px rgba(0,0,0,0.3);
  --shadow:            0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:         0 20px 48px rgba(0,0,0,0.6);

  --success:      #5a9a70;
  --error:        #c0392b;
  --bg-glow:      rgba(212, 160, 23, 0.14);
}

/* ── Shared Design Tokens ────────────────────────────── */
:root {
  --radius-xs:    10px;
  --radius-sm:    18px;
  --radius:       26px;
  --radius-lg:    36px;
  --radius-xl:    48px;
  --radius-pill:  999px;
  --brand-mark-size-lg: clamp(180px, 22vw, 320px);
  --brand-mark-size-sm: clamp(110px, 14vw, 220px);

  --nav-height:   80px;

  --transition:       0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast:  0.25s ease-out;
  --transition-slow:  1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --viewport-width: 100vw;
  --viewport-height: 100vh;
  --vh: 1vh;
  --touch-target: 42px;
  --shell-gutter: 24px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --safe-area-left: 0px;
  --safe-area-right: 0px;
}

html[data-device="tablet"] {
  --nav-height: 76px;
  --shell-gutter: 20px;
}

html[data-device="mobile"] {
  --nav-height: 72px;
  --shell-gutter: 18px;
}

html[data-device="mobile"][data-standalone="true"] {
  --nav-height: 68px;
}

/* ── Body: Warm Stone Texture Background ────────────── */
body {
  background-color: var(--bg);
  position: relative;
  min-height: var(--viewport-height);
  overflow-x: hidden;
  isolation: isolate;
}

/* Subtle warm grain/texture overlay over entire page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.34;
  background-image:
    radial-gradient(rgba(110, 84, 56, 0.08) 0.7px, transparent 0.7px),
    radial-gradient(rgba(255, 255, 255, 0.34) 0.7px, transparent 0.7px);
  background-size: 24px 24px, 32px 32px;
  background-position: 0 0, 12px 10px;
}

/* Very soft warm light from top - makes ivory glow */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  background-image:
    linear-gradient(180deg, var(--bg-glow) 0%, transparent 24%),
    linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.015) 22%, transparent 34%, transparent 66%, rgba(var(--accent-rgb), 0.015) 78%, transparent 100%),
    linear-gradient(118deg, transparent 0%, rgba(255, 247, 232, 0.05) 28%, transparent 46%, rgba(var(--accent-rgb), 0.04) 63%, transparent 82%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    center top,
    center center,
    0 0;
  background-size:
    100% 48%,
    100% 100%,
    100% 100%;
  opacity: 0.92;
  animation: none;
}

/* Ornamental background pattern for khachkar sections */
.ornament-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(45deg, var(--border2) 25%, transparent 25%, transparent 75%, var(--border2) 75%),
    linear-gradient(45deg, var(--border2) 25%, transparent 25%, transparent 75%, var(--border2) 75%);
  background-size: 80px 80px;
  background-position: 0 0, 40px 40px;
}

@media (max-width: 720px) {
  body::before {
    opacity: 0.18;
    background-size: 32px 32px, 40px 40px;
  }

  body::after {
    opacity: 0.78;
    background-size:
      100% 34%,
      100% 100%,
      100% 100%;
  }
}

html[data-device="tablet"] body::before {
  opacity: 0.24;
}

html[data-device="mobile"] body::before {
  opacity: 0.16;
  background-size: 34px 34px, 46px 46px;
}

html[data-device="mobile"] body::after {
  opacity: 0.76;
  background-size:
    100% 34%,
    118% 100%,
    100% 100%;
  background-position:
    center top,
    center center,
    50% 0;
}

html[data-device="mobile"] .ornament-bg {
  opacity: 0.028;
  background-size: 64px 64px;
}