/*
 * PointMintz brand tokens — canonical design system, loaded by every
 * public-facing platform surface BEFORE its page-specific CSS so page-
 * specific styles can consume `var(--pm-*)` tokens.
 *
 * Source of truth + rationale: /BRAND.md
 * Last updated: 2026-04-20
 */

:root {
  /* Pin platform surfaces to light mode — prevents browser dark-chrome
     leaks (form controls, scrollbars, canvas) when the user's system
     is dark. See platform-index.css for the same declaration. */
  color-scheme: light;

  /* ── Color — platform palette ─────────────────────────── */
  --pm-ink: #0f172a;
  --pm-ink-2: #1e293b;
  --pm-ink-muted: #475569;
  --pm-ink-subtle: #475569;
  --pm-surface: #ffffff;
  --pm-surface-2: #f8fafc;
  --pm-surface-3: #f1f5f9;
  --pm-surface-alt: #eef2ff;
  --pm-line: #e2e8f0;
  --pm-line-2: #cbd5e1;

  --pm-accent: #7cf5d2;        /* Electric mint — ties to the "Mintz" wordmark */
  --pm-accent-2: #1ac3a6;      /* Darker mint for hover/pressed fills */
  --pm-accent-text: #047857;   /* Mint tone safe for text on white (AA) */
  --pm-accent-ink: #064e42;    /* Text on mint backgrounds (WCAG AA) */
  --pm-accent-warm: #f59e0b;   /* Amber — urgency / signup energy */
  --pm-accent-warm-2: #d97706;

  --pm-success: #047857;
  --pm-danger: #b91c1c;
  --pm-warning: #92400e;
  --pm-info: #0369a1;

  /* ── Type ─────────────────────────────────────────────── */
  --pm-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pm-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pm-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --pm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pm-text-xs: 0.72rem;
  --pm-text-sm: 0.875rem;
  --pm-text-base: 1rem;
  --pm-text-md: 1.125rem;
  --pm-text-lg: 1.375rem;
  --pm-text-xl: 1.75rem;
  --pm-text-2xl: clamp(2rem, 4vw, 2.75rem);
  --pm-text-3xl: clamp(2.5rem, 5vw, 3.75rem);
  --pm-text-4xl: clamp(3rem, 6vw, 5rem);

  --pm-leading-tight: 1.1;
  --pm-leading-snug: 1.25;
  --pm-leading-normal: 1.55;
  --pm-leading-relaxed: 1.7;

  --pm-tracking-tight: -0.025em;
  --pm-tracking-kicker: 0.14em;

  /* ── Radius ───────────────────────────────────────────── */
  --pm-radius-sm: 8px;
  --pm-radius-md: 14px;
  --pm-radius-lg: 22px;
  --pm-radius-xl: 32px;
  --pm-radius-pill: 999px;

  /* ── Shadow ───────────────────────────────────────────── */
  --pm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --pm-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --pm-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);
  --pm-shadow-xl: 0 32px 90px rgba(15, 23, 42, 0.18);
  --pm-shadow-glow: 0 0 0 3px rgba(124, 245, 210, 0.28);
  --pm-shadow-glow-warm: 0 0 0 3px rgba(245, 158, 11, 0.24);

  /* ── Motion ───────────────────────────────────────────── */
  --pm-ease: cubic-bezier(.2, .8, .2, 1);
  --pm-duration-fast: 140ms;
  --pm-duration-med: 220ms;
  --pm-duration-slow: 400ms;

  /* ── Layout ───────────────────────────────────────────── */
  --pm-shell: 1200px;
  --pm-shell-wide: 1320px;
  --pm-gutter: clamp(18px, 3vw, 32px);
  --pm-tap-target: 44px;
}

/* ── Focus ring (keyboard) — mint glow plus explicit outline for every platform surface ─── */
:focus-visible {
  outline: 3px solid var(--pm-accent-2);
  outline-offset: 3px;
  box-shadow: var(--pm-shadow-glow);
  border-radius: inherit;
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* ── Shared utilities consumable by page-specific CSS ──────── */
.pm-wordmark-accent {
  color: var(--pm-accent-ink);
}
.pm-kicker {
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-xs);
  font-weight: 700;
  letter-spacing: var(--pm-tracking-kicker);
  text-transform: uppercase;
}
.pm-display {
  font-family: var(--pm-font-display);
  letter-spacing: var(--pm-tracking-tight);
  line-height: var(--pm-leading-tight);
}
.pm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pm-tap-target);
  padding: 0 22px;
  border-radius: var(--pm-radius-pill);
  background: linear-gradient(135deg, var(--pm-ink), var(--pm-ink-2));
  color: var(--pm-surface);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: var(--pm-shadow-md);
  transition: transform var(--pm-duration-fast) var(--pm-ease),
    box-shadow var(--pm-duration-fast) var(--pm-ease);
}
.pm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--pm-shadow-lg);
}
.pm-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pm-tap-target);
  padding: 0 22px;
  border-radius: var(--pm-radius-pill);
  background: var(--pm-accent);
  color: var(--pm-accent-ink);
  font-family: var(--pm-font-ui);
  font-size: var(--pm-text-sm);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(124, 245, 210, 0.28);
  transition: transform var(--pm-duration-fast) var(--pm-ease),
    box-shadow var(--pm-duration-fast) var(--pm-ease),
    background var(--pm-duration-fast) var(--pm-ease);
}
.pm-btn-accent:hover {
  transform: translateY(-1px);
  background: var(--pm-accent-2);
  color: var(--pm-surface);
  box-shadow: 0 14px 32px rgba(26, 195, 166, 0.32);
}

/* Platform brand-logo <img> in nav headers.
 * Height-locked, width auto to preserve aspect ratio of whatever logo
 * the platform admin uploads. Default is the wide PointMintz wordmark
 * at /platform/images/logo-white.png; custom uploads may be square. */
.brand-logo-img {
  object-fit: contain;
  object-position: center;
  height: 32px;
  width: auto;
  max-width: 180px;
  display: inline-block;
  vertical-align: middle;
}

/* Mobile tap-target floor for inline links.
 * Ensures mailto/tel links in copy paragraphs hit the 44px min target
 * recommended by WCAG 2.5.5. Expands the hit area without changing the
 * visual footprint, via negative margin + padding pair. (Mobile audit PR.) */
@media (max-width: 767px) {
  .copy a,
  a[href^="mailto:"],
  a[href^="tel:"] {
    display: inline-block;
    padding: 10px 4px;
    margin: -10px -4px;
    line-height: 1.4;
  }
}