/* ============================================================
   PuniCodex — Design Tokens & Brand Utilities
   v1.0 · 2026 · The Unicode Pantheon
   Drop into your global stylesheet. All asset paths assume the
   kit is served from /assets/brand/ — adjust as needed.
   ============================================================ */

:root {
  /* ---- colour: core ---- */
  --pc-obsidian:        #0A0A0C;  /* page background            */
  --pc-temple-black:    #121216;  /* card / panel background    */
  --pc-temple-raise:    #1A1A20;  /* raised elements, hover     */
  --pc-gold:            #D4AF37;  /* primary brand gold         */
  --pc-gold-highlight:  #F5E3A8;  /* gradient top / glow        */
  --pc-gold-mid:        #C9A23F;  /* gradient middle            */
  --pc-gold-deep:       #8C6A22;  /* gradient base / strokes    */
  --pc-ivory:           #F4EFE4;  /* primary text on dark       */
  --pc-ash:             #9A968C;  /* secondary text             */
  --pc-ash-dim:         #6B685F;  /* tertiary text, captions    */

  /* ---- colour: functional ---- */
  --pc-line:            rgba(212, 175, 55, 0.22);  /* hairlines     */
  --pc-line-strong:     rgba(212, 175, 55, 0.45);  /* active borders*/
  --pc-gold-ghost:      rgba(212, 175, 55, 0.08);  /* tinted fills  */

  /* ---- gradients ---- */
  --pc-grad-gold: linear-gradient(180deg,
      var(--pc-gold-highlight) 0%,
      var(--pc-gold-mid) 45%,
      var(--pc-gold-deep) 100%);
  --pc-grad-gold-text: linear-gradient(180deg, #F5E3A8 0%, #C9A23F 45%, #8C6A22 100%);
  --pc-grad-obsidian: radial-gradient(ellipse 80% 60% at 50% 0%,
      rgba(212, 175, 55, 0.07) 0%, transparent 60%);

  /* ---- typography ---- */
  --pc-font-display: "Cinzel", "Times New Roman", serif;      /* wordmark, hero caps */
  --pc-font-serif:   "Cormorant Garamond", Georgia, serif;    /* editorial, kickers  */
  --pc-font-sans:    "Inter", system-ui, -apple-system, sans-serif; /* UI body       */

  /* type scale (rem) */
  --pc-text-hero:   clamp(3rem, 8vw, 6.5rem);
  --pc-text-h1:     clamp(2.25rem, 5vw, 3.75rem);
  --pc-text-h2:     clamp(1.6rem, 3vw, 2.4rem);
  --pc-text-kicker: 0.78rem;
  --pc-text-body:   1.0625rem;
  --pc-text-small:  0.875rem;

  --pc-track-kicker: 0.42em;   /* letterspacing for kickers   */
  --pc-track-caps:   0.16em;   /* display caps                */

  /* ---- shape & depth ---- */
  --pc-radius-card:  6px;
  --pc-radius-pill:  999px;
  --pc-shadow-card:  0 18px 50px rgba(0, 0, 0, 0.55);
  --pc-shadow-gold:  0 6px 30px rgba(212, 175, 55, 0.18);
  --pc-ring-medallion: 0 0 0 1px var(--pc-line), 0 0 40px rgba(212,175,55,0.10);

  /* ---- layout ---- */
  --pc-maxw: 1280px;
  --pc-gutter: clamp(1.25rem, 4vw, 4rem);
  --pc-section-y: clamp(4rem, 10vw, 8rem);
}

/* ============================================================
   Utilities
   ============================================================ */

/* Section kicker — "THE COLLECTION" style */
.pc-kicker {
  font-family: var(--pc-font-serif);
  font-size: var(--pc-text-kicker);
  letter-spacing: var(--pc-track-kicker);
  text-transform: uppercase;
  color: var(--pc-gold);
}

/* Display heading with metallic gold gradient text */
.pc-display {
  font-family: var(--pc-font-display);
  letter-spacing: var(--pc-track-caps);
  background: var(--pc-grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary CTA — gold gradient slab */
.pc-btn-gold {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 2.2em;
  font-family: var(--pc-font-sans);
  font-weight: 600; font-size: var(--pc-text-small);
  color: #14110A;
  background: var(--pc-grad-gold);
  border: none; border-radius: 4px; cursor: pointer;
  box-shadow: var(--pc-shadow-gold);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pc-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 38px rgba(212,175,55,.28); }

/* Secondary CTA — ghost outline */
.pc-btn-ghost {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 2.2em;
  font-family: var(--pc-font-sans);
  font-weight: 600; font-size: var(--pc-text-small);
  color: var(--pc-gold);
  background: transparent;
  border: 1px solid var(--pc-line-strong);
  border-radius: 4px; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.pc-btn-ghost:hover { border-color: var(--pc-gold); background: var(--pc-gold-ghost); }

/* Temple card */
.pc-card {
  background: var(--pc-temple-black);
  border: 1px solid rgba(212, 175, 55, 0.10);
  border-radius: var(--pc-radius-card);
  box-shadow: var(--pc-shadow-card);
  transition: border-color .2s ease, transform .2s ease;
}
.pc-card:hover { border-color: var(--pc-line-strong); transform: translateY(-4px); }

/* Portrait medallion (circular deity portraits) */
.pc-medallion {
  border-radius: 50%;
  box-shadow: var(--pc-ring-medallion);
  background: var(--pc-temple-black);
  object-fit: cover;
}
/* Empty state: use the kit placeholder art */
.pc-medallion--empty {
  background-image: url("/assets/brand/03-ornaments/punicodex-empty-portrait.png");
  background-size: cover;
}

/* Diamond divider (image-free CSS version) */
.pc-divider {
  display: flex; align-items: center; gap: 1rem;
  margin: var(--pc-section-y) auto; max-width: 640px;
}
.pc-divider::before, .pc-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pc-line-strong));
}
.pc-divider::after {
  background: linear-gradient(90deg, var(--pc-line-strong), transparent);
}
.pc-divider span {
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--pc-grad-gold); flex: none;
}

/* Greek key frieze band (uses kit strip, tiles horizontally) */
.pc-keyband {
  height: 56px;
  background-image: url("/assets/brand/03-ornaments/punicodex-greek-key-strip.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center;
  opacity: .8;
}

/* Hero gold glow + dust atmosphere */
.pc-atmosphere {
  position: relative; isolation: isolate;
}
.pc-atmosphere::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("/assets/brand/03-ornaments/punicodex-glow-gold-radial.png");
  background-size: min(90vw, 1100px);
  background-position: 50% -10%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.pc-atmosphere::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: url("/assets/brand/03-ornaments/punicodex-gold-dust-overlay.png");
  background-size: cover; opacity: .5;
  pointer-events: none;
}

/* Tier pill (matches existing chips, upgraded) */
.pc-tier {
  display: inline-block;
  font-family: var(--pc-font-sans);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .35em .9em;
  border: 1px solid var(--pc-line-strong);
  border-radius: 3px;
  color: var(--pc-gold);
  background: var(--pc-gold-ghost);
}
.pc-tier--dual { color: var(--pc-ivory); border-color: rgba(244,239,228,.4); }