/* ================================================================
   NicNac Icon System — No emojis. Gold + navy palette. Pure CSS.
   Each icon is a geometric mark from the NicNac design language.
   ================================================================ */

:root {
  --nn-gold: #ba8a23;
  --nn-gold-light: #f5c95c;
  --nn-navy: #0f1e35;
  --nn-cream: #f8f7f3;
}

/* ---- base ---- */
.nn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  vertical-align: -0.1em;
  flex-shrink: 0;
  color: inherit;
}

/* ---- beam — the NicNac signature mark (diamond with inner glow) ---- */
.nn-beam::before {
  content: '';
  display: block;
  width: 0.65em;
  height: 0.65em;
  background: var(--nn-gold);
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(186,138,35,0.4);
}

/* ---- star — eight-point gold star ---- */
.nn-star::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-bottom: 0.5em solid var(--nn-gold);
  position: relative;
}
.nn-star::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.5em solid var(--nn-gold);
  top: 0.1em;
}

/* ---- play — gold right-pointing chevron ---- */
.nn-play::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 0.35em solid transparent;
  border-bottom: 0.35em solid transparent;
  border-left: 0.6em solid var(--nn-gold);
  margin-left: 0.15em;
}

/* ---- check — gold mark ---- */
.nn-check {
  position: relative;
}
.nn-check::before {
  content: '';
  position: absolute;
  width: 0.3em;
  height: 0.55em;
  border-right: 2px solid var(--nn-gold);
  border-bottom: 2px solid var(--nn-gold);
  transform: rotate(42deg);
  top: -0.1em;
}

/* ---- close — navy X ---- */
.nn-close::before,
.nn-close::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 0.8em;
  background: var(--nn-navy);
}
.nn-close::before { transform: rotate(45deg); }
.nn-close::after { transform: rotate(-45deg); }

/* ---- menu — three gold lines ---- */
.nn-menu {
  flex-direction: column;
  gap: 2px;
}
.nn-menu::before {
  content: '';
  width: 0.9em;
  height: 2px;
  background: var(--nn-gold);
  box-shadow: 0 4px 0 var(--nn-gold), 0 8px 0 var(--nn-gold);
}

/* ---- heart — gold heart ---- */
.nn-heart {
  color: var(--nn-gold);
  font-family: serif;
}
.nn-heart::before {
  content: '\2665'; /* ♥ hearts suit — clean glyph */
  font-size: 1.1em;
}

/* ---- sun — gold circle with subtle ring ---- */
.nn-sun {
  position: relative;
}
.nn-sun::before {
  content: '';
  display: block;
  width: 0.65em;
  height: 0.65em;
  background: var(--nn-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(186,138,35,0.3);
}

/* ---- moon — navy crescent ---- */
.nn-moon {
  position: relative;
}
.nn-moon::before {
  content: '';
  display: block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--nn-navy);
  box-shadow: 3px -1px 0 0 var(--nn-gold);
}

/* ---- energy — gold bolt ---- */
.nn-energy {
  color: var(--nn-gold);
}
.nn-energy::before {
  content: '\26A1'; /* ⚡ with text presentation */
  font-weight: bold;
}

/* ---- audio — gold waveform lines ---- */
.nn-audio {
  flex-direction: row;
  align-items: flex-end;
  gap: 1.5px;
  height: 0.7em;
}
.nn-audio::before {
  content: '';
  width: 2px;
  height: 0.3em;
  background: var(--nn-gold);
  box-shadow:
    4px 0 0 var(--nn-gold),
    8px 0 0 var(--nn-gold);
}
.nn-audio::after {
  content: '';
  width: 2px;
  height: 0.6em;
  background: var(--nn-gold);
  box-shadow: 4px 0 0 var(--nn-gold);
}

/* ---- note — gold music note ---- */
.nn-note {
  color: var(--nn-gold);
  font-family: serif;
}
.nn-note::before {
  content: '\266A'; /* ♪ eighth note */
  font-size: 1.1em;
}

/* ---- plus — gold cross ---- */
.nn-plus::before,
.nn-plus::after {
  content: '';
  position: absolute;
  background: var(--nn-gold);
}
.nn-plus::before { width: 2px; height: 0.7em; }
.nn-plus::after { width: 0.7em; height: 2px; }

/* ---- diamond — gold outlined diamond ---- */
.nn-diamond::before {
  content: '';
  display: block;
  width: 0.55em;
  height: 0.55em;
  border: 1.5px solid var(--nn-gold);
  transform: rotate(45deg);
}

/* ---- lens — gold circle with center dot ---- */
.nn-lens {
  position: relative;
}
.nn-lens::before {
  content: '';
  display: block;
  width: 0.6em;
  height: 0.6em;
  border: 1.5px solid var(--nn-gold);
  border-radius: 50%;
}
.nn-lens::after {
  content: '';
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background: var(--nn-gold);
  border-radius: 50%;
}

/* ---- hex — gold hexagon ---- */
.nn-hex {
  position: relative;
}
.nn-hex::before {
  content: '';
  display: block;
  width: 0.6em;
  height: 0.52em;
  background: var(--nn-gold);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* ---- swap — two gold arrows ---- */
.nn-swap {
  position: relative;
}
.nn-swap::before {
  content: '\21C4'; /* ⇄ */
  color: var(--nn-gold);
  font-size: 1.1em;
}

/* ---- square — gold filled square ---- */
.nn-square::before {
  content: '';
  display: block;
  width: 0.55em;
  height: 0.55em;
  background: var(--nn-gold);
}

/* ---- flourish — gold floral/ornament mark ---- */
.nn-flourish {
  color: var(--nn-gold);
  font-family: serif;
}
.nn-flourish::before {
  content: '\2736'; /* ✶ six-pointed star */
}

/* ---- spark — small gold spark ---- */
.nn-spark::before {
  content: '';
  display: block;
  width: 0.35em;
  height: 0.35em;
  background: var(--nn-gold-light);
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(186,138,35,0.5);
}

/* ---- tool — Dog a Bone mark (stylized bone) ---- */
.nn-tool {
  position: relative;
}
.nn-tool::before {
  content: '';
  display: block;
  width: 0.8em;
  height: 0.3em;
  background: var(--nn-gold);
  border-radius: 3px;
  box-shadow:
    -0.25em -0.15em 0 var(--nn-gold),
    -0.25em 0.15em 0 var(--nn-gold),
    0.25em -0.15em 0 var(--nn-gold),
    0.25em 0.15em 0 var(--nn-gold);
}

/* ---- caution — gold outlined alert ---- */
.nn-caution {
  position: relative;
}
.nn-caution::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-bottom: 0.55em solid var(--nn-gold);
  top: -0.05em;
}
.nn-caution::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 0.25em;
  background: var(--nn-navy);
  top: 0.3em;
}

/* ---- mark — bold gold emphasis dot ---- */
.nn-mark::before {
  content: '';
  display: block;
  width: 0.4em;
  height: 0.4em;
  background: var(--nn-gold);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(186,138,35,0.4);
}

/* ---- edit — gold pencil mark ---- */
.nn-edit::before {
  content: '';
  display: block;
  width: 0.15em;
  height: 0.65em;
  background: var(--nn-gold);
  transform: rotate(-25deg);
  border-radius: 1px;
}

/* ---- ring — gold circle outline ---- */
.nn-ring::before {
  content: '';
  display: block;
  width: 0.55em;
  height: 0.55em;
  border: 1.5px solid var(--nn-gold);
  border-radius: 50%;
}

/* ---- prism — gold triangle ---- */
.nn-prism::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-bottom: 0.55em solid var(--nn-gold);
}

/* ---- balance — interlocking half circles ---- */
.nn-balance {
  color: var(--nn-navy);
}
.nn-balance::before {
  content: '\25D1'; /* ◑ right half black circle */
  font-size: 1.1em;
}

/* ---- infinity ---- */
.nn-infinity {
  color: var(--nn-gold);
}
.nn-infinity::before {
  content: '\221E'; /* ∞ */
  font-weight: bold;
}

/* ---- triangle — gold upward triangle ---- */
.nn-triangle::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-bottom: 0.5em solid var(--nn-gold);
}

/* ---- arrow — gold right arrow ---- */
.nn-arrow::before {
  content: '\2192'; /* → */
  color: var(--nn-gold);
}

/* ================================================================
   Large icon variants — for service cards, hero moments
   ================================================================ */
.nn-icon.nn-lg {
  font-size: 2rem;
  width: 1.2em;
  height: 1.2em;
}

.nn-icon.nn-xl {
  font-size: 3rem;
  width: 1.2em;
  height: 1.2em;
}

/* ================================================================
   For text-based UI that needs glyphs (canvas-safe)
   ================================================================ */
.nn-glyph {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  color: var(--nn-gold);
}

/* ================================================================
   State variants
   ================================================================ */
.nn-icon.navy { color: var(--nn-navy); }
.nn-icon.navy::before,
.nn-icon.navy::after { background: var(--nn-navy); border-color: var(--nn-navy); }

.nn-icon.light { color: var(--nn-cream); }
.nn-icon.light::before,
.nn-icon.light::after { background: var(--nn-cream); border-color: var(--nn-cream); }

.nn-icon.gold-light::before,
.nn-icon.gold-light::after { background: var(--nn-gold-light); border-color: var(--nn-gold-light); }