/* Prism Capital — Secondary Visual System helper utilities.
   Authoritative spec: docs/brand-placement-guide.md
   Per-asset specs:    docs/brand/production-assets-v1-readme.md
   These are asset-only utilities. Use sparingly. The PC medallion is the
   primary identity; this system is structure, atmosphere, and punctuation. */

:root {
  /* Palette tokens (antique gold family — different from primary --gold #D4AF37).
     The secondary system uses a slightly more antique gold to differentiate from
     the primary identity mark; do not redefine these in app code. */
  --pc-onyx: #050506;
  --pc-charcoal: #151517;
  --pc-parchment: #E2DDD6;
  --pc-cream: #F4EFE5;
  --pc-gold-antique: #B9974D;
  --pc-gold-highlight: #D8BC73;
  --pc-gold-shadow: #72551C;
  --pc-gold-print-main: #8A6A2F;
  --pc-gold-print-highlight: #A88944;
  --pc-gold-print-shadow: #6D4E1F;

  /* Opacity tokens — match docs/brand-placement-guide.md ranges. Pick the
     midpoint of the spec'd range so changes to one place are visible system-wide. */
  --pc-pattern-dark-opacity:        0.04;  /* spec: 3-5%, dark UI */
  --pc-pattern-print-opacity:       0.05;  /* spec: 3-6%, light/print */
  --pc-prism-seal-dark-opacity:     0.06;  /* spec: 4-8%, dark UI */
  --pc-prism-seal-print-opacity:    0.04;  /* spec: 3-6%, light/print */
  --pc-document-emblem-dark-opacity:  0.06;  /* spec: 5-8%, dark UI */
  --pc-document-emblem-print-opacity: 0.07;  /* spec: 5-10%, light/print */
}

/* ─────────────────────────────────────────────────────────────────────
   1. Background pattern tile — depth only.
   Use behind spacious surfaces (login, PDF covers, empty states).
   Never behind tables, charts, financial numbers, or dense controls.
   ───────────────────────────────────────────────────────────────────── */
.pc-pattern-dark {
  background-image: url('/brand/svg/secondary/PrismCapital_background_pattern_tile_dark.svg');
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: var(--pc-pattern-dark-opacity);
}
.pc-pattern-light {
  background-image: url('/brand/svg/secondary/PrismCapital_background_pattern_tile_light.svg');
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: var(--pc-pattern-print-opacity);
}

/* ─────────────────────────────────────────────────────────────────────
   2. Refracted line motif — premium divider / accent.
   Use one per major page section. Two variants: short and full-width.
   ───────────────────────────────────────────────────────────────────── */
.pc-refracted-line {
  display: block;
  width: 100%;
  height: 48px;                /* full-width visual minimum */
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_refracted_line_motif_dark.svg');
}
.pc-refracted-line-light {
  display: block;
  width: 100%;
  height: 48px;
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_refracted_line_motif_light.svg');
}
.pc-refracted-line--short {
  width: 240px;                /* short variant minimum */
  height: 24px;
}

/* ─────────────────────────────────────────────────────────────────────
   3. Minimal prism icon — small UI companion.
   Sizes: 16px ultra-simple, 24px default UI, 32px loading, 48px empty.
   ───────────────────────────────────────────────────────────────────── */
.pc-minimal-prism-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_minimal_prism_icon_dark.svg');
}
.pc-minimal-prism-icon-light {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_minimal_prism_icon_light.svg');
}
.pc-minimal-prism-icon--16 { width: 16px; height: 16px; }
.pc-minimal-prism-icon--24 { width: 24px; height: 24px; }
.pc-minimal-prism-icon--32 { width: 32px; height: 32px; }
.pc-minimal-prism-icon--48 { width: 48px; height: 48px; }

/* ─────────────────────────────────────────────────────────────────────
   4. Diamond / facet ornament — tiny octagonal punctuation mark.
   Sizes: 12px micro, 16px default punctuation, 24px footer/divider.
   ───────────────────────────────────────────────────────────────────── */
.pc-diamond-ornament {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_diamond_facet_ornament_dark.svg');
}
.pc-diamond-ornament-light {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_diamond_facet_ornament_light.svg');
}
.pc-diamond-ornament--12 { width: 12px; height: 12px; }
.pc-diamond-ornament--16 { width: 16px; height: 16px; }
.pc-diamond-ornament--24 { width: 24px; height: 24px; }

/* Center-divider variant: diamond ornament flanked by hairline rules.
   Pair with PRIVATE · MEMBERS ONLY style word groups, or use as a section break. */
.pc-diamond-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.pc-diamond-divider::before,
.pc-diamond-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(185, 151, 77, 0.45) 30%,
    rgba(185, 151, 77, 0.45) 70%,
    transparent 100%
  );
  max-width: 96px;
}

/* ─────────────────────────────────────────────────────────────────────
   5. Abstract prism seal — institutional atmosphere (no letters).
   Spec opacity: dark 4-8%, light/print 3-6%. Use as watermark only.
   ───────────────────────────────────────────────────────────────────── */
.pc-prism-seal {
  display: inline-block;
  width: 64px;
  height: 64px;
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_abstract_prism_seal_dark.svg');
}
.pc-prism-seal-light {
  display: inline-block;
  width: 64px;
  height: 64px;
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_abstract_prism_seal_light.svg');
}
.pc-prism-seal--watermark-dark {
  opacity: var(--pc-prism-seal-dark-opacity);
}
.pc-prism-seal--watermark-light {
  opacity: var(--pc-prism-seal-print-opacity);
}

/* ─────────────────────────────────────────────────────────────────────
   6. Secondary document emblem — formal non-letter seal.
   Spec opacity (watermark): dark 5-8%, light/print 5-10%.
   Use for OA, Member Guide, compliance, statements, voting records.
   ───────────────────────────────────────────────────────────────────── */
.pc-document-emblem {
  display: inline-block;
  width: 64px;
  height: 64px;
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_secondary_document_emblem_dark.svg');
}
.pc-document-emblem-light {
  display: inline-block;
  width: 64px;
  height: 64px;
  background: center / contain no-repeat
    url('/brand/svg/secondary/PrismCapital_secondary_document_emblem_light.svg');
}
.pc-document-emblem--watermark-dark {
  opacity: var(--pc-document-emblem-dark-opacity);
}
.pc-document-emblem--watermark-light {
  opacity: var(--pc-document-emblem-print-opacity);
}