/*
 * FFL Filters: plugin UI design tokens (v0.1 LOCKED: Paul, Nov 10, 2026, 3:53 PM ET)
 * Style guide: STYLE-GUIDE.md. Contrast figures: contrast.json (src/contrast.py).
 *
 * The default is neutral. It inherits the theme's font and colour and loads no webfonts,
 * so it sits quietly in any theme. v0.1 ships the neutral style only, with no gold setting (ruling c, 3:59 PM ET).
 * The gold brand style (.ffl-filters--brand) below is FUTURE, NOT IN v0.1; it stays documented for a later version.
 * Theme adapters, such as kadence-adapter.css, remap these tokens and never redefine components.
 */
:where(.ffl-filters) {
  /* Brand constants, read from the locked t1 logo SVGs (logo/icon/ffl-filters-icon.svg). Don't change. */
  --ffl-filters-brand-ink-blue: #0F1B2D;   /* icon tile */
  --ffl-filters-brand-pill: #33455F;       /* icon pills, full art */
  --ffl-filters-brand-pill-small: #4A6185; /* icon pills, 32 px art */
  --ffl-filters-brand-gold: #D4A017;       /* chevrons */
  --ffl-filters-brand-gold-text: #8A6500;  /* gold that passes AA on white; FUTURE, NOT IN v0.1 (brand style only) */

  /* Neutral default UI */
  --ffl-filters-font: inherit;             /* the theme font; the plugin ships no webfont */
  --ffl-filters-font-fallback: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ffl-filters-font-size: 16px;
  --ffl-filters-font-size-sm: 14px;
  --ffl-filters-line-height: 1.4;

  --ffl-filters-surface: #FFFFFF;          /* panel and control background */
  --ffl-filters-surface-alt: #F5F6F8;      /* hover, group header, open list */
  --ffl-filters-text: #1F2933;             /* 14.76:1 on surface, AAA */
  --ffl-filters-muted: #52606D;            /* counts, hints; 6.46:1 on surface, AA */
  --ffl-filters-border: #8A94A3;           /* control edges; 3.07:1 on surface, meets the 3:1 UI rule */
  --ffl-filters-border-subtle: #D3D8DF;    /* dividers only, never the only edge of a control */

  --ffl-filters-accent: #0F1B2D;           /* checked boxes, slider fill, active chip; neutral ink by default */
  --ffl-filters-accent-contrast: #FFFFFF;  /* text on accent; 17.28:1 */
  --ffl-filters-focus-ring: #0F1B2D;
  --ffl-filters-focus-ring-width: 2px;
  --ffl-filters-focus-ring-offset: 2px;

  --ffl-filters-radius: 6px;               /* fields, panels */
  --ffl-filters-radius-pill: 999px;        /* chips, the dropdown pill look */

  --ffl-filters-space-1: 4px;
  --ffl-filters-space-2: 8px;
  --ffl-filters-space-3: 12px;
  --ffl-filters-space-4: 16px;
  --ffl-filters-space-5: 24px;
  --ffl-filters-space-6: 32px;

  --ffl-filters-control-height: 44px;      /* touch target; never below 40px */
  --ffl-filters-control-padding-x: 12px;

  --ffl-filters-chevron-size: 12px;
  --ffl-filters-chevron-stroke: 2px;
  --ffl-filters-chevron-color: var(--ffl-filters-muted);

  --ffl-filters-chip-bg: var(--ffl-filters-surface-alt);
  --ffl-filters-chip-text: var(--ffl-filters-text);
  --ffl-filters-chip-border: var(--ffl-filters-border);
  --ffl-filters-chip-active-bg: var(--ffl-filters-accent);
  --ffl-filters-chip-active-text: var(--ffl-filters-accent-contrast);
  --ffl-filters-chip-active-border: var(--ffl-filters-accent);

  --ffl-filters-transition: 120ms ease-out;
}

/* FUTURE, NOT IN v0.1: gold brand style. v0.1 ships no setting and never adds this class (ruling c).
   Kept documented so a later version can turn it on. */
:where(.ffl-filters.ffl-filters--brand) {
  --ffl-filters-chevron-color: var(--ffl-filters-brand-gold-text);       /* 5.33:1 on white */
  --ffl-filters-chip-active-bg: var(--ffl-filters-brand-ink-blue);
  --ffl-filters-chip-active-text: #FFFFFF;
  --ffl-filters-chip-active-border: var(--ffl-filters-brand-gold);        /* gold edge as the active mark */
  --ffl-filters-focus-ring: var(--ffl-filters-brand-ink-blue);
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  :where(.ffl-filters) { --ffl-filters-transition: 0ms; }
}