/* Maps VERBA DS v1 variables onto FLX palette 0. Load order: verba.css, flx-tokens.css, this file.
   Controls come from Verba; colour, type and shape come from FLX. */
:root, [data-theme] {
  --background: var(--flx-bg);
  --foreground: var(--flx-ink);
  --card: var(--flx-bg);
  --card-foreground: var(--flx-ink);
  --popover: var(--flx-bg);
  --popover-foreground: var(--flx-ink);
  --primary: var(--flx-accent);             /* the one action colour */
  --primary-foreground: var(--flx-on-accent);
  --secondary: var(--flx-surface);
  --secondary-foreground: var(--flx-ink);
  --muted: var(--flx-surface);
  --muted-foreground: var(--flx-muted);
  --accent: var(--flx-surface);
  --accent-foreground: var(--flx-ink);
  --border: color-mix(in oklab, var(--flx-ink) 14%, var(--flx-bg));
  --input: color-mix(in oklab, var(--flx-ink) 22%, var(--flx-bg));
  --ring: var(--flx-focus);
  --destructive: var(--flx-danger);
  --destructive-foreground: #ffffff;
  --brand-1: var(--flx-field-aqua);
  --brand-2: var(--flx-field-lemon);
  --brand-3: var(--flx-accent);
  --chart-1: var(--flx-field-aqua);
  --chart-2: var(--flx-navy-900);
  --chart-3: var(--flx-accent);
  --chart-4: var(--flx-field-lemon);
  --chart-5: var(--flx-muted);
  --sidebar: var(--flx-navy-900);
  --sidebar-foreground: var(--flx-neutral-d12);
  --sidebar-accent: var(--flx-navy-850);
  --sidebar-accent-foreground: var(--flx-neutral-d12);
  --sidebar-primary: var(--flx-lemon-300);
  --sidebar-primary-foreground: var(--flx-navy-900);
  --sidebar-border: var(--flx-navy-850);
  --font-body: var(--flx-font);
  --font-display: var(--flx-font);
  --display-weight: 800;
  --display-tracking: -0.02em;
  --radius: 6px;
}
/* Links are ink + underline: orange text on light grounds fails contrast. */
a { color: var(--foreground); }
/* FLX button shape: one pill. */
.btn { border-radius: var(--flx-radius-full); font-weight: 700; }
/* Select: own chevron with room on the end side (native arrow sat on the edge). Drawn in currentColor so it follows the theme. */
.select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 55%, calc(100% - .85rem) 55%;
  background-size: .35rem .35rem; background-repeat: no-repeat; }
[dir="rtl"] .select { background-position: .85rem 55%, 1.2rem 55%; }