/*
 * PTM design tokens — the ONE cross-repo visual contract.
 *
 * This file is the single source of truth for the Place to Mingle color / spacing /
 * radius / type / elevation ramp, as pure CSS custom properties on :root. It is
 * consumed two ways from ONE file so the two front doors cannot drift:
 *   - PTM.UX  (Angular SPA)  — styles/app.scss does `@use './tokens.css';`
 *                              (Sass loads a plain .css module, same mechanism it
 *                              already uses for primeicons.css / primeflex.css).
 *   - PTM.Social (Razor apex) — PTM.Social.csproj copies this file to
 *                              wwwroot/css/tokens.css at build time and links it
 *                              ahead of site.css.
 *
 * ⚠ Custom properties ONLY. No Sass. The five breakpoint mixins live in
 *   _tokens.scss (Sass), which is a separate concern — a .css file cannot carry
 *   @mixin. Keep the two apart: colours here, mixins there.
 *
 * ⚠ Do NOT hand-copy these values into any other stylesheet. That is exactly the
 *   silent drift the split exists to end (demonstrated once already by
 *   PublicGroupCard.MemberCount going missing from a hand-copy for three weeks).
 *   Change a token HERE and both front doors pick it up.
 *
 * Extracted verbatim from _tokens.scss on 2026-07-25. Spec:
 * STS_Notes/meetup-style-redesign-plan-2026-06-07.md §2.1.
 */

:root {
  /* ── Color ───────────────────────────────────────────────────────── */
  --c-accent: #6b3fa0;          /* purple — links, active pills, secondary CTA */
  --c-accent-hover: #5c3590;
  --c-accent-active: #4b2a75;
  --c-accent-ink: #ffffff;      /* text/icon on an accent fill */
  --c-accent-wash: #f4eefb;     /* subtle purple bg — active pill, badge, hover */

  --c-primary: #1b1b1f;         /* near-black — primary CTA pill */
  --c-primary-hover: #000000;
  --c-primary-ink: #ffffff;

  --c-surface: #ffffff;         /* cards / sheets */
  --c-surface-2: #f5f7f9;       /* inset / hover ground */
  --c-bg: #f5f7f9;              /* app background */
  --c-line: #e6e8eb;            /* hairline borders / dividers */
  --c-line-strong: #d1d9e1;

  --c-text: #1b1b1f;
  --c-text-muted: #6a6f76;      /* secondary meta — date, "by [group]" */
  --c-text-faint: #767c83;      /* darkened from #9aa0a6 → ≥4.5:1 on white (WCAG AA) */
  --c-icon-faint: #9aa0a6;      /* purely-decorative chevrons / icon strokes — contrast non-critical */

  --c-danger: #b13344;
  --c-danger-hover: #9a2b3a;
  --c-danger-wash: #fdecef;
  --c-success: #2e7d57;
  /* low-alpha success tint — messages "sent" success wash, inline confirmations.
     Mirrors --c-danger-wash's role on the success side; derived from --c-success
     so it tracks the ramp if the success hue is ever retuned. */
  --c-success-wash: color-mix(in srgb, var(--c-success) 12%, transparent);
  --c-warn: #b26a00;
  /* Pale amber tint matching --c-warn — illustrative/"sample" badge backgrounds,
     inline warning washes. Mirrors --c-danger-wash / --c-success-wash on the
     warn side. */
  --c-warn-wash: #fdf2df;

  /* Return-to-origin highlight (nav back) — a purple ring mirroring the accent,
     so the pulse reads as "here's the card you came from". */
  --c-return-highlight: rgba(107, 63, 160, 0.55);

  --c-focus-ring: #6b3fa0;
  --c-focus-hi: #ffe082;        /* high-contrast focus (skip-link etc.) */

  /* Overlay scrim — the ONE dimmed-backdrop color behind sheets/modals. */
  --c-scrim: rgba(20, 28, 38, 0.45);

  /* ── Calendar role coding (personal-calendar arc 2026-06-10) ────────
     One hue per relationship the caller has to a calendar entry; each
     ships base (dot/legend) + ink (text on wash) + wash (chip bg).
     'group' is deliberately quiet — a neutral OUTLINE treatment in the
     calendar — so unengaged group events read softer than commitments. */
  --c-cal-organizer: #6b3fa0;       /* purple — mirrors --c-accent */
  --c-cal-organizer-ink: #53307e;
  --c-cal-organizer-wash: #f1e9fa;
  --c-cal-going: #2e7d57;           /* green — mirrors --c-success */
  --c-cal-going-ink: #1e5e3f;
  --c-cal-going-wash: #e2f3ea;
  --c-cal-personal: #0e7490;        /* teal — PRIVATE personal entries */
  --c-cal-personal-ink: #0b5c73;
  --c-cal-personal-wash: #e0f3f8;
  --c-cal-interested: #b26a00;      /* amber — mirrors --c-warn */
  --c-cal-interested-ink: #8a5300;
  --c-cal-interested-wash: #fdf2df;
  --c-cal-wait: #5a6168;            /* grey */
  --c-cal-wait-ink: #494f55;
  --c-cal-wait-wash: #eceff2;
  --c-cal-group: #5b6b7c;           /* neutral slate — outline style */
  --c-cal-group-ink: #46535f;
  --c-cal-group-wash: #f6f8fa;

  /* ── Spacing ─────────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;

  /* ── Radius (collapses the 6/8/4/10/12/999 radius zoo) ───────────── */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;

  /* ── Type ────────────────────────────────────────────────────────── */
  --fs-xs: 0.75rem;  --fs-sm: 0.85rem;  --fs-md: 0.95rem;  --fs-lg: 1.1rem;  --fs-xl: 1.25rem;
  --lh-tight: 1.25;  --lh-normal: 1.5;
  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;

  /* ── Elevation ───────────────────────────────────────────────────── */
  --shadow-1: 0 1px 3px rgba(20, 28, 38, 0.08);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.18);

  /* ── Z-ladder ────────────────────────────────────────────────────── */
  --z-sticky: 100;  --z-nav: 200;  --z-sheet: 1000;

  /* ── Mobile chrome heights + safe areas ──────────────────────────── */
  --appbar-h: 56px;
  --actionbar-h: 64px;
  --nav-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ── Fluid layout (responsiveness polish 2026-06-10) ─────────────────
     --w-content : max width of a centered content column.
     --page-pad-x: fluid horizontal page gutter — 16px on a 320px phone,
                   growing to 24px on larger screens. Used as the inline
                   padding on page/content wrappers so a column never bleeds
                   to the very edge nor forces horizontal overflow. Combine
                   with the safe-area insets where chrome reaches the edge. */
  --w-content: 1200px;
  --page-pad-x: clamp(16px, 4vw, 24px);
}

/* ── Dark theme (report item #9) ─────────────────────────────────────────────
   Overrides ONLY the color tokens when <html data-theme="dark"> is set (by
   ThemeService). Spacing / radius / type / z / chrome are theme-independent and
   stay on :root. Surfaces darken, text/line invert, accent lightens for contrast
   on dark ground, and washes flip to low-light tints. Components that consume
   var(--c-*) flip automatically; components still carrying legacy hardcoded hex
   are migrated to tokens separately (the incremental hex→token pass). */
:root[data-theme='dark'] {
  --c-accent: #b892e6;          /* lighter purple — links/accents readable on dark */
  --c-accent-hover: #c9a9ee;
  --c-accent-active: #d9c2f4;
  --c-accent-ink: #1c0e2e;      /* dark ink on a light-purple fill */
  --c-accent-wash: #2a1f3d;     /* dark purple wash — active pill / hover */

  --c-primary: #f0f0f2;         /* light — the near-black CTA pill inverts */
  --c-primary-hover: #ffffff;
  --c-primary-ink: #1b1b1f;     /* dark text on the light pill */

  --c-surface: #1a1c22;         /* cards / sheets */
  --c-surface-2: #23262e;       /* inset / hover ground */
  --c-bg: #121319;              /* app background (darkest) */
  --c-line: #30343d;            /* hairline borders / dividers */
  --c-line-strong: #3d424d;

  --c-text: #e9eaed;
  --c-text-muted: #a8adb5;
  --c-text-faint: #8b9199;
  --c-icon-faint: #6b7178;

  --c-danger: #e2687a;
  --c-danger-hover: #ec8090;
  --c-danger-wash: #3a1f26;
  --c-success: #5cbd8f;
  --c-success-wash: color-mix(in srgb, var(--c-success) 20%, transparent);
  --c-warn: #d9a24a;
  --c-warn-wash: #33280f;

  --c-return-highlight: rgba(184, 146, 230, 0.6);

  --c-focus-ring: #b892e6;
  --c-focus-hi: #ffe082;

  --c-scrim: rgba(0, 0, 0, 0.62);

  /* Calendar role coding — dark washes + lighter inks so chips stay legible. */
  --c-cal-organizer: #b892e6;
  --c-cal-organizer-ink: #d9c2f4;
  --c-cal-organizer-wash: #2a1f3d;
  --c-cal-going: #5cbd8f;
  --c-cal-going-ink: #9fdcc0;
  --c-cal-going-wash: #16301f;
  --c-cal-personal: #4bb4cf;
  --c-cal-personal-ink: #a7e0ee;
  --c-cal-personal-wash: #10333d;
  --c-cal-interested: #d9a24a;
  --c-cal-interested-ink: #f0cf98;
  --c-cal-interested-wash: #33280f;
  --c-cal-wait: #9aa2ab;
  --c-cal-wait-ink: #c3c9cf;
  --c-cal-wait-wash: #262a31;
  --c-cal-group: #9aa8b8;
  --c-cal-group-ink: #c3ccd6;
  --c-cal-group-wash: #1e2229;

  /* Deeper elevation shadows read better on a dark ground. */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.6);
}