/* ==========================================================================
   Royal Misk — Stage 1 Design System Tokens (v2 brief)
   Single source of truth for the redesign. Reference these custom
   properties everywhere instead of hardcoding colours/type/spacing.
   ========================================================================== */

:root{
  /* Core palette */
  --rm-emerald: #003E31;
  --rm-emerald-deep: #0A2A21;
  --rm-green-ink: #123B30;
  --rm-gold: #E1A710;        /* logo / accents on emerald only — never small text on light bg */
  --rm-gold-light: #E8CC5F;  /* text on emerald */
  --rm-gold-text: #8A6A12;   /* small gold text on light backgrounds (WCAG 2.2 AA safe) */
  --rm-paper: #FCFBF8;
  --rm-sage: #E9EEE7;
  --rm-section: #EEEEE5;
  --rm-tile: #F3EEE4;
  --rm-stone: #DDD7C6;
  --rm-ink: #1B1F1D;
  --rm-muted: #6E736F;
  --rm-line: #E4E2DA;

  /* Mood tints — Creation card + page backgrounds, mapped from the existing mood tag */
  --rm-mood-warm-ambery: #F4E7D3;
  --rm-mood-dark-mysterious: #E6DFDA;
  --rm-mood-fresh-clean: #E1ECEE;
  --rm-mood-floral-soft: #F3E4E6;
  --rm-mood-sweet-addictive: #F2E1D8;
  --rm-mood-untagged: var(--rm-tile);

  /* Mood dots */
  --rm-dot-warm-ambery: #C08A45;
  --rm-dot-dark-mysterious: #6B4238;
  --rm-dot-fresh-clean: #4E93A3;
  --rm-dot-floral-soft: #C27B8B;
  --rm-dot-sweet-addictive: #B8674A;

  /* Signature colour worlds */
  --rm-aura-bg: #E2ECE5;
  --rm-aura-accent: #1E5B3F;
  --rm-shadow-bg: #F4E3E0;
  --rm-shadow-accent: #B31B1B;
  --rm-crystal-blu-bg: #E1E5EF;
  --rm-crystal-blu-accent: #1C2F5E;

  /* Type */
  --rm-font-serif: 'Cormorant Garamond', 'Noto Kufi Arabic', serif;
  --rm-font-sans: 'Manrope', 'Noto Kufi Arabic', sans-serif;
  --rm-font-arabic: 'Noto Kufi Arabic', sans-serif;

  --rm-h1-size: 76px; --rm-h1-size-mobile: 44px; --rm-h1-line: 1.0;
  --rm-h2-size: 52px; --rm-h2-size-mobile: 34px; --rm-h2-line: 1.05;
  --rm-h3-size: 30px; --rm-h3-line: 1.15;
  --rm-body-size: 15.5px; --rm-body-line: 1.7;
  --rm-label-size: 12.5px; --rm-label-tracking: 0.18em; --rm-label-weight: 600;
  --rm-eyebrow-size: 11.5px; --rm-eyebrow-tracking: 0.26em;

  /* Layout */
  --rm-container: 1320px;
  --rm-pad-side: 56px; --rm-pad-side-mobile: 20px;
  --rm-pad-section: 92px; --rm-pad-section-mobile: 56px;
  --rm-radius: 0;
  --rm-shadow-overlay: 0 12px 40px rgba(18,59,48,0.18);
  --rm-motion-fade-up: 400ms ease;
}

/* Container utility, matches the token above */
.rm-container{ max-width: var(--rm-container); margin-inline:auto; padding-inline: var(--rm-pad-side); }
@media (max-width:768px){ .rm-container{ padding-inline: var(--rm-pad-side-mobile); } }

/* Type-scale utility classes for later Stage 1 component/QA work */
.rm-h1{ font-family:var(--rm-font-serif); font-size:var(--rm-h1-size); line-height:var(--rm-h1-line); }
.rm-h2{ font-family:var(--rm-font-serif); font-size:var(--rm-h2-size); line-height:var(--rm-h2-line); }
.rm-h3{ font-family:var(--rm-font-serif); font-size:var(--rm-h3-size); line-height:var(--rm-h3-line); }
.rm-body{ font-family:var(--rm-font-sans); font-size:var(--rm-body-size); line-height:var(--rm-body-line); }
.rm-label{ font-family:var(--rm-font-sans); font-size:var(--rm-label-size); letter-spacing:var(--rm-label-tracking); font-weight:var(--rm-label-weight); text-transform:uppercase; }
.rm-eyebrow{ font-family:var(--rm-font-sans); font-size:var(--rm-eyebrow-size); letter-spacing:var(--rm-eyebrow-tracking); text-transform:uppercase; }
@media (max-width:768px){
  .rm-h1{ font-size:var(--rm-h1-size-mobile); }
  .rm-h2{ font-size:var(--rm-h2-size-mobile); }
}

/* Motion: fade-up only — no parallax, no auto-sliding carousels anywhere in Stage 1+ builds */
.rm-fade-up{ opacity:0; transform:translateY(16px); transition: opacity var(--rm-motion-fade-up), transform var(--rm-motion-fade-up); }
.rm-fade-up.is-visible{ opacity:1; transform:translateY(0); }

/* Mood tint + Signature-world helper classes, consumed by the product-card rebuild (later Stage 1 tasks) */
.rm-mood--warm-ambery{ background:var(--rm-mood-warm-ambery); }
.rm-mood--dark-mysterious{ background:var(--rm-mood-dark-mysterious); }
.rm-mood--fresh-clean{ background:var(--rm-mood-fresh-clean); }
.rm-mood--floral-soft{ background:var(--rm-mood-floral-soft); }
.rm-mood--sweet-addictive{ background:var(--rm-mood-sweet-addictive); }
.rm-mood--untagged{ background:var(--rm-mood-untagged); }

.rm-world--aura{ background:var(--rm-aura-bg); color:var(--rm-aura-accent); }
.rm-world--shadow{ background:var(--rm-shadow-bg); color:var(--rm-shadow-accent); }
.rm-world--crystal-blu{ background:var(--rm-crystal-blu-bg); color:var(--rm-crystal-blu-accent); }