/*
 * MERIDIAN × CS DISPLAY
 *
 * cs-display draws the directory, the profile page and the job pages from
 * --cs-* tokens and nothing else. This file is the whole of Meridian's
 * contribution to them: one token set, restated at (0,3,0) so it beats the
 * plugin's skin block (:root:not([data-cs-never]), 0,2,0) and its dark-mode
 * block (0,2,0) whichever prints last.
 *
 * Two values are NOT the design's. --cs-positive / -caution / -critical are
 * the plugin's light-paper greens, ambers and reds, which fail contrast on
 * #0d0d0c, so they are lifted here. --cs-accent-ink must stay dark: the
 * accent is a light sand and white text on it reads at 1.7:1.
 */

:root:root:root {
  --cs-font-display: "Syne", system-ui, sans-serif;
  --cs-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cs-paper: #0d0d0c;
  --cs-paper-2: #161615;
  --cs-paper-3: #1f1f1d;
  --cs-ink: #f2f0eb;
  --cs-ink-2: #b8b6b0;
  --cs-ink-3: #8a8882;
  --cs-rule: #2a2a27;
  --cs-accent: #d8c3a0;
  --cs-accent-ink: #0d0d0c;

  --cs-positive: #7fcf9b;
  --cs-caution: #e0b45a;
  --cs-critical: #f08a7e;

  --cs-radius: 16px;
  --cs-radius-pill: 999px;
  --cs-border-width: 1px;
  --cs-border-width-heavy: 2px;

  --cs-tracking-tight: -0.03em;
  --cs-label-tracking: 0.08em;
  --cs-label-size: 0.72rem;
  --cs-label-weight: 700;

  --cs-card-image-share: 0.62;
  --cs-card-rows: 62fr 38fr;
  --cs-card-image-ratio: 4 / 5;
  --cs-card-min-width: 16rem;
  --cs-card-gap: 0.75rem;
  --cs-container: 90rem;

  --cs-focus-color: #d8c3a0;
  color-scheme: dark;
}

/* The page behind a cs-display template is the theme's, not the plugin's. */
main.cs { background: transparent; padding-block: 2rem 6rem; }
.cs-container { padding-inline: clamp(20px, 4vw, 56px); }

:is(h1, h2, h3, h4).cs-page-head__title,
.cs-page-head__title {
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.cs-drawer__scrim { background: rgb(0 0 0 / 0.6); }

/* Buttons and chips the plugin draws take the sand accent, pill-shaped. */
.cs-btn, button.cs-btn, a.cs-btn { border-radius: 999px; }