/* ============================================================
   RUSHABH ORNA — Design Tokens
   Soft elegant light theme · warm cream / sage / antique gold
   ============================================================ */

:root {
  /* ---- Colors · Light (default) ---- */
  --ro-bg: #faf6f1;               /* warm cream page background */
  --ro-bg-alt: #e7d8ca;           /* deeper sand for alternate sections */
  --ro-surface: #fffdfa;          /* card / raised surface */
  --ro-surface-2: #f5ebe0;        /* soft inset surface */
  --ro-ink: #16130f;              /* primary text — warm charcoal */
  --ro-t1: #16130f;               /* heading text */
  --ro-t2: #57504a;               /* body text */
  --ro-t3: #8c8279;               /* muted / caption text */
  --ro-tw: #faf6f1;               /* text on dark surfaces */
  --ro-accent: #b5876a;           /* warm rudraksha brown — primary accent */
  --ro-accent-deep: #8d6249;      /* brown hover */
  --ro-gold: #b5876a;             /* antique gold — secondary accent */
  --ro-gold-soft: #d9bfa7;        /* pale gold */
  --ro-line: #ded0c3;             /* hairline borders */
  --ro-line-soft: #ece1d6;        /* softer divider */
  --ro-dark: #121110;             /* deep brown band sections / footer */
  --ro-dark-2: #262220;
  --ro-overlay: rgba(46, 43, 37, 0.45);

  /* ---- Typography ---- */
  --ro-fh: "Cormorant Garamond", "Times New Roman", serif;
  --ro-fb: "Jost", "Segoe UI", sans-serif;
  --ro-fa: "Italianno", cursive;              /* accent script */

  --ro-fs-h1: clamp(2.6rem, 5.5vw, 4.4rem);
  --ro-fs-h2: clamp(2rem, 3.8vw, 3rem);
  --ro-fs-h3: clamp(1.35rem, 2.2vw, 1.7rem);
  --ro-fs-body: 1.125rem;
  --ro-fs-small: 1rem;
  --ro-fs-label: 1rem;

  /* ---- Spacing ---- */
  --ro-sp-xs: 4px;
  --ro-sp-sm: 8px;
  --ro-sp-md: 16px;
  --ro-sp-lg: 32px;
  --ro-sp-xl: 64px;
  --ro-sp-2xl: 96px;
  --ro-sp-3xl: 128px;

  /* ---- Radius ---- */
  --ro-r-sm: 6px;
  --ro-r-md: 12px;
  --ro-r-lg: 20px;
  --ro-r-xl: 32px;
  --ro-r-full: 9999px;
  --ro-r-arch: 200px 200px 12px 12px;   /* jewellery-arch image frame */

  /* ---- Shadows ---- */
  --ro-shadow-sm: 0 2px 8px rgba(60, 52, 38, 0.06);
  --ro-shadow-md: 0 10px 30px rgba(60, 52, 38, 0.10);
  --ro-shadow-lg: 0 24px 60px rgba(60, 52, 38, 0.14);
  --ro-shadow-glow: 0 8px 32px rgba(176, 141, 87, 0.35);

  /* ---- Motion ---- */
  --ro-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ro-duration: 0.45s;

  /* ---- Layout ---- */
  --ro-container: 1440px;
  --ro-nav-h: 84px;
}

/* ---- Colors · Dark ---- */
[data-theme="dark"] {
  --ro-bg: #211f1b;
  --ro-bg-alt: #262420;
  --ro-surface: #2b2823;
  --ro-surface-2: #32302a;
  --ro-ink: #ece7dc;
  --ro-t1: #ece7dc;
  --ro-t2: #c3bcae;
  --ro-t3: #948d7f;
  --ro-tw: #faf6f1;
  --ro-accent: #bd9a72;
  --ro-accent-deep: #d0ad84;
  --ro-gold: #c9a56c;
  --ro-gold-soft: #a5895f;
  --ro-line: #3d3a33;
  --ro-line-soft: #363329;
  --ro-dark: #1a1815;
  --ro-dark-2: #24211c;
  --ro-overlay: rgba(10, 9, 7, 0.55);

  --ro-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --ro-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
  --ro-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --ro-shadow-glow: 0 8px 32px rgba(201, 165, 108, 0.25);
}