/* NAVEEN JEWELLERS — brand tokens (v1.1). Do not edit values without the brand owner. */
:root {
  /* colour */
  --nj-ink: #1A1917;
  --nj-ivory: #F7F3EA;
  --nj-gold: #A8874F;
  --nj-gold-deep: #8A6A38;
  --nj-stone: #D8D2C6;
  --nj-white: #FFFFFF;
  --nj-paper: #EDE8DE;

  /* semantic */
  --nj-text: var(--nj-ink);
  --nj-bg: var(--nj-ivory);
  --nj-rule: var(--nj-stone);
  --nj-accent: var(--nj-gold-deep);   /* display + rules only */

  /* type */
  --nj-font-display: "Cormorant", Georgia, "Times New Roman", serif;
  --nj-font-ui: "Jost", "Helvetica Neue", Arial, sans-serif;
  --nj-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nj-display-size: clamp(2.25rem, 5vw, 3.5rem);
  --nj-heading-size: clamp(1.625rem, 3vw, 2rem);
  --nj-body-size: clamp(1rem, 1.1vw, 1.0625rem);
  --nj-nav-size: 0.875rem;
  --nj-label-size: 0.75rem;

  /* logo sizing — never below these */
  --nj-logo-height: 40px;       /* 36–44 desktop */
  --nj-logo-height-mobile: 30px;/* 28–32 mobile */
  --nj-logo-clear: 0.5;         /* multiplier applied as padding around the lockup */

  /* space + motion */
  --nj-space-1: 4px;  --nj-space-2: 8px;  --nj-space-3: 12px; --nj-space-4: 16px;
  --nj-space-5: 24px; --nj-space-6: 32px; --nj-space-7: 48px; --nj-space-8: 64px;
  --nj-ease: cubic-bezier(.22,.61,.36,1);
  --nj-dur: 220ms;

  /* layout */
  --nj-gutter: clamp(16px, 4vw, 48px);
  --nj-max: 1320px;
  --nj-header-h: 84px;
}

@media (max-width: 720px) {
  :root { --nj-header-h: 64px; --nj-logo-height: var(--nj-logo-height-mobile); }
}

/* ---------- base primitives the agent can use directly ---------- */
.nj-label {
  font-family: var(--nj-font-ui);
  font-size: var(--nj-label-size);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nj-text);
  opacity: .72;
}
.nj-display {
  font-family: var(--nj-font-display);
  font-weight: 500;
  font-size: var(--nj-display-size);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--nj-text);
  text-wrap: balance;
}
.nj-heading {
  font-family: var(--nj-font-display);
  font-weight: 500;
  font-size: var(--nj-heading-size);
  line-height: 1.16;
}
.nj-body {
  font-family: var(--nj-font-body);
  font-size: var(--nj-body-size);
  line-height: 1.62;
  max-width: 68ch;
}
.nj-rule { height: 1px; background: var(--nj-rule); border: 0; }

/* the only correct way to place the logo: an <img> with fixed height, width auto */
.nj-logo { display: block; height: var(--nj-logo-height); width: auto; }
.nj-logo--mark { height: var(--nj-space-6); width: auto; }

/* dark surfaces */
.nj-dark { background: var(--nj-ink); color: var(--nj-ivory); }
.nj-dark .nj-label { color: var(--nj-ivory); }