/*
 * ARMUS — shared theme tokens.
 * Linked by every page so the gold/cream accent palette stays
 * consistent instead of each page inventing its own colors.
 */

:root {
  --armus-gold-1: #fee06d;
  --armus-gold-2: #f6c649;
  --armus-gold-3: #dfac2e;
  --armus-gold-text: #f6c649;
  --armus-gold-gradient: linear-gradient(135deg, var(--armus-gold-1) 0%, var(--armus-gold-2) 55%, var(--armus-gold-3) 100%);
  --armus-on-gold: #0a0a0a;

  --armus-silver-1: #f7f7f5;
  --armus-silver-2: #c9c8c2;
  --armus-silver-3: #6d6c66;
  --armus-silver-gradient: linear-gradient(145deg, var(--armus-silver-1) 0%, var(--armus-silver-2) 55%, var(--armus-silver-3) 100%);
  --armus-silver-border: rgba(110, 109, 102, 0.25);
  --armus-silver-border-strong: rgba(110, 109, 102, 0.45);

  /* fully white page background, per the EnglishMaster reference - the
     gold family above is the only accent color */
  --armus-bg: #ffffff;
  --armus-panel: #ffffff;
  --armus-panel-2: #f5f5f5;
  --armus-border: #e2e2e2;
  --armus-border-soft: #ececec;

  /* text tones — for the light background these all sit on */
  --armus-ink: #0a0a0a;
  --armus-muted: #5f5f5f;
  --armus-faint: #8f8f8f;

  /* flat background on purpose - no visible gradient/glow */
  --armus-bg-glow: none;
}

/* big display headings use a serif, like the EnglishMaster reference -
   everything else (nav, body, buttons, card titles) stays on Inter */
h1, h2 {
  font-family: "Playfair Display", Georgia, serif;
}

/* the wordmark itself (.brand/.logo) is now the actual hand-drawn
   ARMUS mark (logo-black.png / logo-cream.png for the one dark
   context, class.html's room-bar) rather than styled text - sized off
   whatever font-size the surrounding .brand/.logo/.sidebar .logo/etc
   rule already declares for that context, so every page's existing
   per-context sizing keeps working without needing its own copy of
   this rule. */
.logo-img {
  display: block;
  height: 1em;
  width: auto;
}

/* plays once whenever a .logo-img mounts (every page load, since the
   logo sits in the header/sidebar markup itself rather than being
   inserted later by JS) - a soft-edged left-to-right mask wipe that
   reads as the word being written, without touching the actual
   handwriting image underneath. --reveal needs @property to animate
   smoothly between keyframes (a plain custom property just jumps). */
@property --armus-logo-reveal {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.logo-img {
  --armus-logo-reveal: 0%;
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--armus-logo-reveal) - 14%), transparent var(--armus-logo-reveal));
  mask-image: linear-gradient(to right, #000 calc(var(--armus-logo-reveal) - 14%), transparent var(--armus-logo-reveal));
  animation: armus-logo-write 1.3s cubic-bezier(.34, 0, .24, 1) forwards;
}

@keyframes armus-logo-write {
  from { --armus-logo-reveal: 0%; }
  to { --armus-logo-reveal: 114%; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-img {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}