/* direction-d.css — Hướng D: "Phối lại có chủ đích" (deliberate recombination of A/B/C) */
/* Usage in a Tailwind v4 project:  @import "tailwindcss";  @import "./direction-d.css"; */

/* ===== WF-RAMP-V1 BEGIN — source of truth: docs/design-system/01-brand-core.md.
   Do not edit here; edit brand-core and re-paste this block verbatim. ===== */
:root {
  /* red — sampled from logo-wfvn.png, hue 22.9deg constant */
  --wf-red-50: #ffe4e0;   /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-100: #ffd7d3;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-200: #ffc3be;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-300: #ffa5a1;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-400: #ff807d;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-500: #f1585a;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-600: #de293a;  /* sampled: logo-wfvn.png core px, n=32084 */
  --wf-red-700: #ad252f;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-800: #841d23;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-900: #5d1418;  /* derived: OKLCH ramp from --wf-red-600 */

  /* green — sampled from logo-wfvn.png, hue 161.2deg constant */
  --wf-green-50: #e3fdee;   /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-100: #d1f2e0;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-200: #b9e2cc;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-300: #98cbb0;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-400: #6fb190;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-500: #449871;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-600: #217d57;  /* sampled: logo-wfvn.png core px, n=6831 */
  --wf-green-700: #286348;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-800: #204f39;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-900: #173b2a;  /* derived: OKLCH ramp from --wf-green-600 */

  /* neutral — warm OKLCH hue 75deg, low chroma; 900 pushed darker for focus contrast */
  --wf-neutral-50: #f8f5f1;   /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-100: #ede9e4;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-200: #ddd8d2;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-300: #c6c1b9;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-400: #aca59b;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-500: #928a7f;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-600: #797167;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-700: #605a52;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-800: #4a463f;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-900: #1c1a17;  /* derived: warm neutral ramp, hue 75, deepened for --color-focus */

  /* amber — warning only, not a full ramp */
  --wf-amber-100: #ffe5bf;  /* estimated: warning hue tuned in OKLCH, not brand-sourced */
  --wf-amber-500: #bc7c00;  /* estimated: warning hue tuned in OKLCH, not brand-sourced */
  --wf-amber-700: #7f4f00;  /* estimated: warning hue tuned in OKLCH, not brand-sourced */

  --wf-white: #ffffff;  /* estimated: pure white constant, no brand source */
}
/* ===== WF-RAMP-V1 END ===== */

:root {
  /* direction D — deliberate recombination, see 02-direction-d.md:
     typography from A · colour alias mapping + spacing/radius/density/container from B ·
     shadows + button clip-path signature from C · font swapped off Be Vietnam Pro (competitor
     collision with eduwingglobal.com) to Source Sans 3, one family for heading+body per A's
     discipline. */
  --wf-font-heading: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --wf-font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  /* type scale — copied verbatim from 02-direction-a.md, incl. line-height/letter-spacing */
  --wf-size-display: 2.5rem;    /* 40px */
  --wf-size-h1: 2rem;           /* 32px */
  --wf-size-h2: 1.5rem;         /* 24px */
  --wf-size-h3: 1.25rem;        /* 20px */
  --wf-size-body-lg: 1.125rem;  /* 18px */
  --wf-size-body: 1rem;         /* 16px */
  --wf-size-caption: 0.875rem;  /* 14px */

  --wf-lh-display: 1.2;
  --wf-lh-h1: 1.25;
  --wf-lh-h2: 1.3;
  --wf-lh-h3: 1.35;
  --wf-lh-body-lg: 1.6;
  --wf-lh-body: 1.6;
  --wf-lh-caption: 1.45;

  --wf-ls-display: -0.01em;
  --wf-ls-h1: -0.01em;
  --wf-ls-h2: -0.005em;
  --wf-ls-h3: 0em;
  --wf-ls-body-lg: 0em;
  --wf-ls-body: 0em;
  --wf-ls-caption: 0.01em;

  --wf-weight-heading: 700;
  --wf-weight-body: 400;
  --wf-weight-emphasis: 600;

  /* spacing — copied verbatim from 02-direction-b.md, airy rhythm opening up past space-4 */
  --wf-space-1: 0.25rem;   /* 4px */
  --wf-space-2: 0.5rem;    /* 8px */
  --wf-space-3: 0.875rem;  /* 14px */
  --wf-space-4: 1.25rem;   /* 20px */
  --wf-space-5: 1.75rem;   /* 28px */
  --wf-space-6: 2.25rem;   /* 36px */
  --wf-space-8: 3rem;      /* 48px */
  --wf-space-12: 4.5rem;   /* 72px */
  --wf-space-16: 6rem;     /* 96px */
  --wf-space-24: 9rem;     /* 144px */

  /* shape — copied verbatim from 02-direction-b.md, generous rounding */
  --wf-radius-xs: 0.25rem;   /* 4px */
  --wf-radius-sm: 0.5rem;    /* 8px */
  --wf-radius-md: 0.875rem;  /* 14px */
  --wf-radius-lg: 1.5rem;    /* 24px */
  --wf-radius-full: 9999px;

  /* shadows — copied verbatim from 02-direction-c.md: hard-offset solid, no blur.
     Usage is deliberately narrow (see 02-direction-d.md §7, seam 1): shadow-sm sits at rest
     only on .btn-primary; shadow-md appears on .btn-primary:hover and on .card:hover/
     :focus-visible; shadow-lg is reserved for the legal-trust block. .card at rest, .input,
     .badge and .chip never carry a shadow — this keeps D reading "clean with one confident
     signature" instead of busy. */
  --wf-shadow-sm: 2px 2px 0 0 var(--wf-neutral-900);
  --wf-shadow-md: 4px 4px 0 0 var(--wf-green-900);
  --wf-shadow-lg: 8px 8px 0 0 var(--wf-green-900);

  /* border — from B, hairline default keeps D calm; component layer never uses C's 2px/4px */
  --wf-border-width: 1px;
  --wf-border-width-strong: 2px;

  --wf-container: 80rem; /* 1280px — from B */
}


/* ---------------------------------------------------------------------------
   Layer 2b — the SAME aliases as the @theme inline block below, mirrored as
   ordinary custom properties.
   Why this exists: `@theme` is an unknown at-rule to a browser, so a browser
   loading this file directly (no Tailwind build) silently discards the whole
   block and every var(--color-*) used by the components below resolves to
   nothing — buttons render transparent. Tailwind still reads @theme inline for
   utility generation. Values are identical; edit both together.
   --------------------------------------------------------------------------- */
:root {
  --color-brand: var(--wf-green-600);
  --color-brand-strong: var(--wf-green-700);
  --color-accent: var(--wf-red-600);
  --color-bg: var(--wf-neutral-50);
  --color-bg-subtle: var(--wf-white);
  --color-surface: var(--wf-white);
  --color-text: var(--wf-neutral-900);
  --color-text-muted: var(--wf-neutral-700);
  --color-border: var(--wf-neutral-300);
  --color-border-strong: var(--wf-neutral-500);
  --color-success: var(--wf-green-700);
  --color-warning: var(--wf-amber-700);
  --color-danger: var(--wf-red-700);
  --color-info: var(--wf-neutral-700);
  --color-brand-ink: var(--wf-green-600);
  --color-brand-surface: var(--wf-green-500);
  --color-on-brand: var(--wf-white);
  --color-on-accent: var(--wf-white);
  --color-success-surface: var(--wf-green-100);
  --color-warning-surface: var(--wf-amber-100);
  --color-danger-surface: var(--wf-red-100);
  --color-info-surface: var(--wf-neutral-100);
  --color-focus: var(--wf-neutral-900);
  --color-disabled-bg: var(--wf-neutral-200);
  --color-disabled-text: var(--wf-neutral-400);
  --font-heading: var(--wf-font-heading);
  --font-body: var(--wf-font-body);
  --text-display: var(--wf-size-display);
  --text-h1: var(--wf-size-h1);
  --text-h2: var(--wf-size-h2);
  --text-h3: var(--wf-size-h3);
  --text-body-lg: var(--wf-size-body-lg);
  --text-body: var(--wf-size-body);
  --text-caption: var(--wf-size-caption);
  --leading-display: var(--wf-lh-display);
  --leading-h1: var(--wf-lh-h1);
  --leading-h2: var(--wf-lh-h2);
  --leading-h3: var(--wf-lh-h3);
  --leading-body-lg: var(--wf-lh-body-lg);
  --leading-body: var(--wf-lh-body);
  --leading-caption: var(--wf-lh-caption);
  --tracking-display: var(--wf-ls-display);
  --tracking-h1: var(--wf-ls-h1);
  --tracking-h2: var(--wf-ls-h2);
  --tracking-h3: var(--wf-ls-h3);
  --tracking-body-lg: var(--wf-ls-body-lg);
  --tracking-body: var(--wf-ls-body);
  --tracking-caption: var(--wf-ls-caption);
  --spacing-1: var(--wf-space-1);
  --spacing-2: var(--wf-space-2);
  --spacing-3: var(--wf-space-3);
  --spacing-4: var(--wf-space-4);
  --spacing-5: var(--wf-space-5);
  --spacing-6: var(--wf-space-6);
  --spacing-8: var(--wf-space-8);
  --spacing-12: var(--wf-space-12);
  --spacing-16: var(--wf-space-16);
  --spacing-24: var(--wf-space-24);
  --radius-xs: var(--wf-radius-xs);
  --radius-sm: var(--wf-radius-sm);
  --radius-md: var(--wf-radius-md);
  --radius-lg: var(--wf-radius-lg);
  --radius-full: var(--wf-radius-full);
  --shadow-sm: var(--wf-shadow-sm);
  --shadow-md: var(--wf-shadow-md);
  --shadow-lg: var(--wf-shadow-lg);
}

@theme inline {
  /* semantic colour aliases — defaults from brand-core §6, not re-pointed in this direction
     (green stays the structural colour, red stays a narrow accent — mapping taken from B) */
  --color-brand: var(--wf-green-600);
  --color-brand-strong: var(--wf-green-700);
  --color-accent: var(--wf-red-600);

  --color-bg: var(--wf-neutral-50);
  --color-bg-subtle: var(--wf-white);
  --color-surface: var(--wf-white);

  --color-text: var(--wf-neutral-900);
  --color-text-muted: var(--wf-neutral-700);

  --color-border: var(--wf-neutral-300);
  --color-border-strong: var(--wf-neutral-500);

  --color-success: var(--wf-green-700);
  --color-warning: var(--wf-amber-700);
  --color-danger: var(--wf-red-700);
  --color-info: var(--wf-neutral-700);

  --color-brand-ink: var(--wf-green-600);
  --color-brand-surface: var(--wf-green-500);
  --color-on-brand: var(--wf-white);
  --color-on-accent: var(--wf-white);

  --color-success-surface: var(--wf-green-100);
  --color-warning-surface: var(--wf-amber-100);
  --color-danger-surface: var(--wf-red-100);
  --color-info-surface: var(--wf-neutral-100);

  --color-focus: var(--wf-neutral-900);

  --color-disabled-bg: var(--wf-neutral-200);
  --color-disabled-text: var(--wf-neutral-400);

  /* Tailwind namespace mappings */
  --font-heading: var(--wf-font-heading);
  --font-body: var(--wf-font-body);

  --text-display: var(--wf-size-display);
  --text-h1: var(--wf-size-h1);
  --text-h2: var(--wf-size-h2);
  --text-h3: var(--wf-size-h3);
  --text-body-lg: var(--wf-size-body-lg);
  --text-body: var(--wf-size-body);
  --text-caption: var(--wf-size-caption);

  --leading-display: var(--wf-lh-display);
  --leading-h1: var(--wf-lh-h1);
  --leading-h2: var(--wf-lh-h2);
  --leading-h3: var(--wf-lh-h3);
  --leading-body-lg: var(--wf-lh-body-lg);
  --leading-body: var(--wf-lh-body);
  --leading-caption: var(--wf-lh-caption);

  --tracking-display: var(--wf-ls-display);
  --tracking-h1: var(--wf-ls-h1);
  --tracking-h2: var(--wf-ls-h2);
  --tracking-h3: var(--wf-ls-h3);
  --tracking-body-lg: var(--wf-ls-body-lg);
  --tracking-body: var(--wf-ls-body);
  --tracking-caption: var(--wf-ls-caption);

  --spacing-1: var(--wf-space-1);
  --spacing-2: var(--wf-space-2);
  --spacing-3: var(--wf-space-3);
  --spacing-4: var(--wf-space-4);
  --spacing-5: var(--wf-space-5);
  --spacing-6: var(--wf-space-6);
  --spacing-8: var(--wf-space-8);
  --spacing-12: var(--wf-space-12);
  --spacing-16: var(--wf-space-16);
  --spacing-24: var(--wf-space-24);

  --radius-xs: var(--wf-radius-xs);
  --radius-sm: var(--wf-radius-sm);
  --radius-md: var(--wf-radius-md);
  --radius-lg: var(--wf-radius-lg);
  --radius-full: var(--wf-radius-full);

  --shadow-sm: var(--wf-shadow-sm);
  --shadow-md: var(--wf-shadow-md);
  --shadow-lg: var(--wf-shadow-lg);
}

@layer components {
  @keyframes wf-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* two-tone focus ring, copied from 02-direction-c.md: a halo matching --color-bg sits right
     against the control, then a wider --color-focus ring outside it. On a light surface the
     halo blends in and only the dark outer ring reads (15.98:1 vs --color-bg, 17.36:1 vs
     --color-surface); on --color-brand/--color-brand-surface (the two green surfaces D actually
     places controls on) the outer ring alone still clears 3:1 (3.42:1 and 4.94:1, verified with
     contrast.py) — see 02-direction-d.md §7, seam 2. */
  .btn:focus-visible,
  .input:focus-visible,
  .card:focus-visible,
  .chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-focus);
  }

  /* ---- button ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wf-space-2);
    font-family: var(--font-body);
    font-weight: var(--wf-weight-emphasis);
    font-size: var(--text-body);
    line-height: 1;
    border-radius: var(--radius-md);
    border: var(--wf-border-width) solid transparent;
    padding: var(--wf-space-3) var(--wf-space-5);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
      box-shadow 150ms ease;
  }
  .btn-sm {
    padding: var(--wf-space-2) var(--wf-space-4);
    font-size: var(--text-caption);
  }
  .btn-md {
    padding: var(--wf-space-3) var(--wf-space-5);
    font-size: var(--text-body);
  }
  .btn-lg {
    padding: var(--wf-space-4) var(--wf-space-6);
    font-size: var(--text-body-lg);
  }

  /* .btn-primary is the one component that carries the hard-shadow signature at rest (see
     shadow usage note above). Bottom-left notch, copied verbatim from 02-direction-c.md, using
     D's own --wf-space-3 (14px) — the one deliberate borrowing of C's button silhouette.
     Usage rule (02-direction-d.md §7, seam 2): only place .btn-primary on --color-bg,
     --color-surface or --color-bg-subtle. Never directly on --color-brand/--color-brand-surface
     — the shadow tints (neutral-900 / green-900) measure 2.44–4.94:1 there against 11.4–17.4:1
     on light backgrounds, so the "hard graphic" signature would visibly weaken. On a green
     section, use .btn-secondary instead. */
  /* KHÔNG đặt box-shadow lên .btn-primary: `clip-path` cắt bỏ hoàn toàn box-shadow
     (đo thực tế bằng headless Chrome — pixel ngay cạnh phải nút là trắng thuần, không có
     bóng). Đã thử `filter: drop-shadow()` trên chính nút: `clip-path` áp SAU `filter`
     nên cũng bị cắt. Đã thử tạo notch bằng gradient trong suốt để drop-shadow bám alpha:
     bóng hắt ngược vào trong notch, tạo hiệu ứng "gấp góc" xấu. Kết luận: notch và bóng
     đặc không sống chung trên một phần tử nếu không thêm thẻ bọc — mà thẻ bọc thì phá
     "paste-and-go". Nút giữ NOTCH (chữ ký hình học); bóng đặc chuyển sang .btn-secondary,
     .card và khối tin cậy pháp lý, nơi nó hiển thị được thật. */
  .btn-primary {
    background-color: var(--color-brand);
    color: var(--color-on-brand);
    border-color: var(--color-brand);
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--wf-space-3) 100%, 0 calc(100% - var(--wf-space-3)));
  }
  .btn-primary:hover {
    background-color: var(--color-brand-strong);
    border-color: var(--color-brand-strong);
  }
  .btn-primary:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    border-color: var(--color-disabled-bg);
    box-shadow: none;
    clip-path: none;
    cursor: not-allowed;
  }
  .btn-primary.is-loading {
    color: transparent;
    position: relative;
  }
  .btn-primary.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: var(--radius-full);
    border: var(--wf-border-width-strong) solid var(--color-on-brand);
    border-top-color: transparent;
    animation: wf-spin 700ms linear infinite;
  }

  /* .btn-secondary không có clip-path nên GIỮ được bóng đặc — đây là nơi chữ ký bóng
     của hướng D xuất hiện trên nút (xem ghi chú ở .btn-primary về xung đột clip-path). */
  .btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-brand-ink);
    border-color: var(--color-border-strong);
    box-shadow: var(--wf-shadow-sm);
  }
  .btn-secondary:hover {
    box-shadow: var(--wf-shadow-md);
  }
  .btn-secondary:hover {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-brand-ink);
  }
  .btn-secondary:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    border-color: var(--color-disabled-bg);
    cursor: not-allowed;
  }
  .btn-secondary.is-loading {
    color: transparent;
    position: relative;
  }
  .btn-secondary.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: var(--radius-full);
    border: var(--wf-border-width-strong) solid var(--color-brand-ink);
    border-top-color: transparent;
    animation: wf-spin 700ms linear infinite;
  }

  .btn-ghost {
    background-color: transparent;
    color: var(--color-brand-ink);
    border-color: transparent;
  }
  .btn-ghost:hover {
    background-color: var(--color-bg-subtle);
  }
  .btn-ghost:disabled {
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }

  /* ---- input (also textarea, select) ---- */
  .input {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: var(--wf-border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--wf-space-3) var(--wf-space-4);
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .input::placeholder {
    color: var(--color-text-muted);
  }
  .input:focus {
    outline: none;
    border-color: var(--color-brand-ink);
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-focus);
  }
  .input.is-error {
    border-color: var(--color-danger);
  }
  .input.is-error:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-danger);
  }
  .input:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    border-color: var(--color-disabled-bg);
    cursor: not-allowed;
  }

  /* ---- card ---- */
  /* Deliberately flat at rest — no shadow, no corner motif (the vòng+tam giác watermark from C
     was tried and rejected: user found it noisy on the news-card corner). B's calm rhythm wins
     at rest; C's hard shadow only appears on hover/focus, when the card is acting as a link, so
     the signature reads as "confident on interaction" rather than "busy by default". See
     02-direction-d.md §5 and §7 (seam 1). */
  /* Bóng đặc hiện NGAY Ở TRẠNG THÁI NGHỈ, không chỉ khi hover. Lý do: khán giả thật là
     lao động phổ thông dùng điện thoại — trên cảm ứng KHÔNG CÓ hover, nên bóng chỉ xuất
     hiện lúc hover là vô hình với đúng nhóm người dùng chính. Đây cũng là nơi chữ ký
     "bóng đặc" của hướng D đọc rõ nhất. */
  .card {
    background-color: var(--color-surface);
    border: var(--wf-border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--wf-space-6);
    box-shadow: var(--wf-shadow-sm);
    transition: box-shadow 150ms ease, border-color 150ms ease;
  }
  .card:hover,
  .card:focus-visible {
    border-color: var(--color-brand);
    box-shadow: var(--wf-shadow-md);
  }

  /* ---- badge — 3-state recruitment contract, colour is channel 4 only ---- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-2);
    font-family: var(--font-body);
    font-weight: var(--wf-weight-emphasis);
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    padding: var(--wf-space-1) var(--wf-space-3);
    border-radius: var(--radius-full);
  }
  .badge::before {
    display: inline-block;
    line-height: 1;
  }

  .badge-open {
    border: var(--wf-border-width) solid var(--wf-green-800);
    background-color: var(--wf-green-300);
    color: var(--wf-green-800);
  }
  .badge-open::before {
    content: "\25CF"; /* ● filled disc */
  }

  .badge-closing {
    border: var(--wf-border-width) dashed var(--wf-white);
    background-color: var(--wf-amber-700);
    color: var(--wf-white);
  }
  .badge-closing::before {
    content: "\25B2"; /* ▲ triangle */
  }

  .badge-closed {
    border: none;
    background-color: var(--wf-neutral-900);
    color: var(--wf-white);
  }
  .badge-closed::before {
    content: "\2298"; /* U+2298 — slashed circle (glyph per shared contract) */
  }

  /* ---- chip (filter chip) ---- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-2);
    font-family: var(--font-body);
    font-weight: var(--wf-weight-body);
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    background-color: var(--color-bg-subtle);
    border: var(--wf-border-width) solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--wf-space-2) var(--wf-space-4);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .chip:hover {
    border-color: var(--color-brand-ink);
    color: var(--color-brand-ink);
  }
  .chip.is-active {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-on-brand);
  }
}