/* PsychHelp catalog brand tokens.
   Loaded only on public catalog pages (.theme-catalog). Ops dashboard stays on theme-ops.
   Sampled from branding/psychhelp-og.jpg + psychhelp-logo.jpg + psychhelp-brand.svg. */

.theme-catalog {
  color-scheme: light;

  /* --- Color: identity --- */
  /* Official lockup teal (JPG corners and SVG fill rgb(29,108,113)). Not the older #136A71. */
  --ph-teal: #1D6C71;
  /* Cream wordmark on teal plates (OG / full logo JPG). */
  --ph-cream: #EDE8D5;

  /* --- Color: surfaces --- */
  --background: #eef2f1;
  --foreground: #15202b;
  --card: #ffffff;
  --card-foreground: #15202b;
  --popover: #ffffff;
  --popover-foreground: #15202b;
  --secondary: #e4ecea;
  --secondary-foreground: #15202b;
  --muted: #e6eeec;
  /* Dark enough for WCAG AA normal text on --background and --card (~5.7:1). */
  --muted-foreground: #3f525c;
  --accent: #d8f0ec;
  --accent-foreground: #0f3d3a;
  --destructive: #b42318;
  --destructive-foreground: #fff8f5;
  --warning: #9a3b08;
  --warning-foreground: #fff8f0;
  --border: #d0dcd8;
  --input: #c8d6d2;
  --overlay: rgba(15, 32, 43, 0.45);
  --shadow: 0 8px 28px rgba(15, 32, 43, 0.08);
  --shadow-hover: 0 14px 36px rgba(15, 32, 43, 0.12);

  /* Primary actions (buttons, current nav, wordmark). Cream-tint foreground on teal. */
  --primary: var(--ph-teal);
  --primary-foreground: var(--ph-cream);
  --success: var(--ph-teal);
  --ring: var(--ph-teal);

  /* --- Color: links --- */
  /* Primary = same teal as buttons/nav. Secondary = slate, still AA, not a second teal. */
  --link: var(--ph-teal);
  --link-muted: #345056;

  /* --- Type --- */
  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Wordmark only (matches OG/logo serif). UI stays Outfit. */
  --font-brand: "Playfair Display", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-serif: var(--font-brand);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-md: 0.92rem;
  --text-lg: 1.08rem;
  --text-xl: 1.35rem;
  --text-hero: clamp(1.65rem, 3vw, 2.25rem);
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-bold: 700;

  /* --- Space (4px grid) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space: var(--space-2);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --tap: 44px;
  --mark-size: 32px;

  /* --- Occupancy (pins + pills); text/border chosen for AA on their fills --- */
  --occ-open-bg: #e8f6ee;
  --occ-open-border: #2f6f4e;
  --occ-open-fg: #1d4a34;
  --occ-wait-bg: #fff4e0;
  --occ-wait-border: #9a3b08;
  --occ-wait-fg: #7a3408;
  --occ-full-bg: #fde8ec;
  --occ-full-border: #b42318;
  --occ-full-fg: #8a1c14;
  --occ-unknown-bg: #e8ecee;
  --occ-unknown-border: #5c6b73;
  --occ-unknown-fg: #2f3b42;

  /* --- Pills --- */
  --badge-font: 0.68rem;
  --badge-pad-y: 0.12rem;
  --badge-pad-x: 0.45rem;
}

.theme-catalog a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.theme-catalog a:hover { opacity: 0.88; }
.theme-catalog a.btn {
  color: var(--secondary-foreground);
  text-decoration: none;
}
.theme-catalog a.btn:hover { opacity: 1; }
.theme-catalog a.btn-primary {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: transparent;
}
.theme-catalog a.link-muted,
.theme-catalog .link-muted {
  color: var(--link-muted);
}
.theme-catalog .site-footer a {
  color: var(--link-muted);
}