/* Prime By Design - cascade layer 3 (loads FIRST on this static site, site.css consumes it).
   brand:"custom" - this file IS the Prime By Design brand: the tokens from their own
   Design System page (violet on deep plum, Anton + Montserrat), plus a light version.
   Dark is the brand default. Light follows the device, or the header toggle (pbd_theme).
   Edit colours HERE, never in site.css. */

@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/anton-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url("/assets/fonts/montserrat-latin-wght-italic.woff2") format("woff2"); }

:root {
  /* type */
  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* brand constants (same in both modes) */
  --violet: #9A4DEB;          /* --pbd-accent */
  --violet-strong: #7A2BC4;   /* --pbd-accent-strong */
  --violet-soft: #C49BF0;     /* --pbd-accent-soft */
  --violet-ink: #5B1E93;
  --plum: #140A24;            /* --pbd-bg */
  --plum-deep: #0F0719;       /* --pbd-bg-deep */
  --star: #FFC83D;            /* --pbd-star */
  --ok: #7ED8A6;

  /* dark (brand default) */
  --bg: #140A24;
  --bg-deep: #0C0615;
  --bg-alt: #1B0F33;
  --surface: #1E1238;
  --surface-2: #221542;
  --fg: #FFFFFF;
  --fg-body: #CDBFE2;
  --fg-muted: #9F8CC0;
  --accent: #9A4DEB;
  --accent-text: #C49BF0;     /* accent used AS text: soft violet reads on plum */
  --line: rgba(154, 77, 235, .18);
  --line-strong: rgba(154, 77, 235, .42);
  --tint: rgba(154, 77, 235, .14);
  --glass: rgba(20, 10, 36, .72);
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --shadow-cta: 0 14px 40px rgba(122, 43, 196, .55);
  --grid: rgba(196, 155, 240, .07);
  --photo-wash: linear-gradient(180deg, rgba(20, 10, 36, .15) 0%, rgba(20, 10, 36, .55) 55%, #140A24 100%);
  --map-filter: grayscale(1) invert(1) brightness(.62) contrast(1.15) sepia(.35) hue-rotate(225deg) saturate(2.1);
  --cta-gradient: linear-gradient(135deg, #7A2BC4 0%, #9A4DEB 100%);
  --hero-glow: radial-gradient(60% 55% at 78% 22%, rgba(154, 77, 235, .38), transparent 70%);

  /* aliases the shared system (core.css, the portal brand board) consumes */
  --fg-subtle: var(--fg-muted);
  --border: var(--line-strong);
  --border-neutral: var(--line);
  --on-accent: #FFFFFF;
  --shadow-card: var(--shadow);

  /* shape + rhythm */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --gutter: clamp(18px, 4.5vw, 44px);
  --maxw: 1220px;
  --section-y: clamp(72px, 10vw, 136px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

/* Light: lavender paper, plum ink, the deeper violet for anything that must pass contrast. */
html[data-theme="light"] {
  --bg: #F8F4FD;
  --bg-deep: #EFE6FA;
  --bg-alt: #F2EBFB;
  --surface: #FFFFFF;
  --surface-2: #FBF8FF;
  --fg: #140A24;
  --fg-body: #3E2F58;
  --fg-muted: #6B5A8C;
  --accent: #7A2BC4;
  --accent-text: #6A22B0;
  --line: rgba(122, 43, 196, .16);
  --line-strong: rgba(122, 43, 196, .38);
  --tint: rgba(154, 77, 235, .10);
  --glass: rgba(248, 244, 253, .80);
  --shadow: 0 22px 50px rgba(60, 20, 110, .14);
  --shadow-cta: 0 14px 34px rgba(122, 43, 196, .35);
  --grid: rgba(122, 43, 196, .07);
  --photo-wash: linear-gradient(180deg, rgba(20, 10, 36, .10) 0%, rgba(20, 10, 36, .50) 60%, rgba(20, 10, 36, .86) 100%);
  --map-filter: grayscale(1) brightness(1.04) contrast(.92) sepia(.25) hue-rotate(225deg) saturate(1.6);
  --hero-glow: radial-gradient(60% 55% at 78% 22%, rgba(154, 77, 235, .22), transparent 70%);
  color-scheme: light;
}
