/* brand.css
 *
 * The PyaarMilan brand as tokens, one file every public page shares.
 * Source: the founder's own Instagram posts (IMG_8826, IMG_8828, IMG_8842,
 * IMG_8846), decided 2026-10-01 on GitHub #34.
 *
 *   Black #000000 is the ground. White #FFFFFF sections carry long reading.
 *   Red #980000 is sampled from the hand-drawn hearts. It is used for two
 *   things only: the hearts, and the one primary call to action on a page.
 *   No red links, labels, rules, or focus rings.
 *   League Spartan (bold) for headings, Jost for body, Noto Sans Devanagari
 *   (light) for प्यार मिलन. Labels are wide-tracked capitals, like the
 *   COLLECTIVE line in the wordmark.
 *   The only ornament is the two hand-drawn hearts (/heart-large.png,
 *   /heart-small.png). No gradients, textures, photos, or glass.
 *
 * Change the tokens, not the rules.
 */
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;700&family=Jost:wght@300;400;500&family=Noto+Sans+Devanagari:wght@300&display=swap");

:root {
  /* Colour */
  --pm-black: #000000;
  --pm-white: #ffffff;
  --pm-red: #980000;          /* hearts and the single primary CTA */
  --pm-red-press: #7a0000;    /* the same CTA while pressed or hovered */

  /* Text on black (contrast on #000: 21, 11.2, 7.0) */
  --pm-on-black: #ffffff;
  --pm-on-black-muted: #bdbdbd;
  --pm-on-black-faint: #949494;
  --pm-line-on-black: rgba(255, 255, 255, .2);

  /* Text on white (contrast on #fff: 21, 11.6, 7.0) */
  --pm-on-white: #000000;
  --pm-on-white-muted: #3b3b3b;
  --pm-on-white-faint: #5e5e5e;
  --pm-line-on-white: rgba(0, 0, 0, .14);

  /* Type */
  --pm-font-head: "League Spartan", "Helvetica Neue", Arial, sans-serif;
  --pm-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --pm-font-deva: "Noto Sans Devanagari", sans-serif;
  --pm-head-weight: 700;
  --pm-head-leading: .92;     /* the wordmark sets its two lines nearly touching */
  --pm-head-tracking: -.02em;
  --pm-label-tracking: .32em; /* C O L L E C T I V E */

  /* Shape */
  --pm-radius: 0;             /* the posts are all straight edges */
  --pm-focus: 2px solid currentColor;
}

/* ── Components ─────────────────────────────────────────────────────────── */

/* Wide-tracked capitals, the COLLECTIVE line. */
.pm-label {
  font-family: var(--pm-font-body);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: var(--pm-label-tracking);
  text-transform: uppercase;
}

/* The one red button on a page. White on #980000 is 9.0:1. */
.pm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: 1rem 2rem;
  border: 0;
  border-radius: var(--pm-radius);
  background: var(--pm-red);
  color: var(--pm-white);
  font-family: var(--pm-font-body);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.pm-btn-primary:hover,
.pm-btn-primary:active { background: var(--pm-red-press); }
.pm-btn-primary:focus-visible { outline: 2px solid var(--pm-white); outline-offset: 3px; }
.pm-btn-primary:disabled { opacity: .55; cursor: not-allowed; }

/* Hand-drawn hearts, as decoration only. Always aria-hidden with empty alt. */
.pm-heart { display: block; height: auto; pointer-events: none; user-select: none; }

.pm-deva { font-family: var(--pm-font-deva); font-weight: 300; letter-spacing: .5em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}