/* ==========================================================================
   Direction C — PÄRM
   Friendly local shop, like flipping a binder. Light and airy, soft
   brand-tinted surfaces, round corners, cards sit in "sleeves".
   Pairing: Rubik (display + text).
   ========================================================================== */
:root[data-direction="parm"] {
  --font-display: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Rubik", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --display-leading: 1.06;
  --label-case: none;
  --label-tracking: 0;
  --label-weight: 600;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;
  --radius-btn: 999px;

  --card-border: transparent;
  --card-radius: 24px;
  --card-pad: 10px;
  --card-shadow: 0 1px 2px rgb(20 20 40 / .05), 0 6px 18px rgb(20 20 40 / .06);
  --card-shadow-hover: 0 2px 4px rgb(20 20 40 / .06), 0 14px 30px rgb(20 20 40 / .1);
  --media-pad: 10%;
  --media-radius: 18px;
  --media-bg: color-mix(in oklab, var(--brand) 9%, var(--color-mat));
  --grid-min: 160px;
}
:root[data-direction="parm"][data-mode="light"] {
  --color-bg: #f6f6f2;
  --color-surface: #ffffff;
  --color-surface-2: #eeeee8;
  --color-text: #1c1d21;
  --color-muted: #5d6068;
  --color-border: #e2e2dc;
  --color-mat: #f1f1ec;
}
:root[data-direction="parm"][data-mode="dark"] {
  --color-bg: #131418;
  --color-surface: #1c1d22;
  --color-surface-2: #26282e;
  --color-text: #eeeff2;
  --color-muted: #a1a4ae;
  --color-border: #31333a;
  --color-mat: #22242a;
  --card-shadow: none;
  --card-shadow-hover: 0 10px 30px rgb(0 0 0 / .4);
}
/* flourishes */
[data-direction="parm"] .pcard__media { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 14%, transparent), inset 0 10px 18px -12px rgb(0 0 0 / .18); }
[data-direction="parm"] .pcard:hover { box-shadow: var(--card-shadow-hover); }
[data-direction="parm"] .hero__inner { background: var(--brand-soft); border-radius: var(--radius-l); }
[data-direction="parm"] .site-search input { border-radius: var(--radius-pill); background: var(--color-surface-2); border-color: transparent; }
[data-direction="parm"] .eyebrow { text-transform: none; letter-spacing: 0; color: var(--brand-ink); }
[data-direction="parm"] .badge { border-radius: var(--radius-pill); }
[data-direction="parm"] .section--tinted { background: var(--brand-soft); }