/* LidFly UI Kit 2026 tokens (--lf-*): the shared site header, its buttons (landing-buttons.css), the section
   row (page-nav.css) and the phone bottom bar (bottom-cta.css). Every page with /css/site-header.css links this
   file next to it (scripts/lib/site-header.mjs); the older design system stays in tokens.css. */
:root {
  --lf-bg-canvas: #fafaf7;
  --lf-bg-surface: #ffffff;
  --lf-bg-subtle: #f3f2ee;
  --lf-bg-glass: rgb(255 255 255 / 0.72);
  --lf-bg-hover: rgb(28 27 30 / 0.06);
  --lf-bg-muted: #e8e7e1;
  --lf-bg-brand-soft: #eefad4;
  --lf-status-warning: #bb550d;
  --lf-pastel-lime: #def6af;
  /* Text on --lf-pastel-lime (badges): the kit's Badge component, not in the spec table. */
  --lf-pastel-lime-text: #3c5f15;
  --lf-text-primary: #1c1b1e;
  --lf-text-secondary: #555458;
  --lf-text-tertiary: #6e6d72;
  --lf-border-subtle: #e8e7e1;
  --lf-border-default: #d6d4cc;
  --lf-border-focus: #48a8ef;
  --lf-action-primary: #1c1b1e;
  --lf-action-primary-hover: #434244;
  --lf-action-on-primary: #ffffff;
  --lf-action-gray: #f3f2ee;
  --lf-action-gray-hover: #e8e7e1;
  /* Button Brand of the kit (the section-row action); the text on it is --lf-action-on-primary. */
  --lf-action-brand: #0f7342;
  --lf-action-brand-hover: #0d5c36;
  /* Tinted of the kit (the current chip of the section row on the phone). */
  --lf-action-tinted: #def6af;
  --lf-action-on-tinted: #0a452a;
  --lf-radius-sm: 8px;
  --lf-radius-md: 12px;
  --lf-radius-lg: 16px;
  --lf-radius-xl: 20px;
  --lf-radius-full: 999px;
  --lf-shadow-elevation-1: 0 1px 2px rgb(28 27 30 / 0.04), 0 4px 16px rgb(28 27 30 / 0.05);
  --lf-shadow-elevation-3: 0 8px 24px rgb(28 27 30 / 0.08), 0 24px 64px rgb(28 27 30 / 0.14);
  /* Glass = a light top edge and a soft drop shadow; panels stacked into one (header + section row) use the parts. */
  --lf-shadow-glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.7);
  --lf-shadow-glass-drop: 0 8px 24px rgb(28 27 30 / 0.06);
  --lf-shadow-glass: var(--lf-shadow-glass-highlight), var(--lf-shadow-glass-drop);
  /* Focus of every interactive element: a surface gap, then the focus colour. */
  --lf-focus-ring: 0 0 0 2px var(--lf-bg-surface), 0 0 0 4px var(--lf-border-focus);
  --lf-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark theme. The kit has no dark --lf-pastel-lime, so it and its text keep the light pair. */
:root[data-theme="dark"] {
  --lf-bg-canvas: #111013;
  --lf-bg-surface: #1c1b1e;
  --lf-bg-subtle: #2c2b2e;
  --lf-bg-glass: rgb(28 27 30 / 0.72);
  --lf-bg-hover: rgb(255 255 255 / 0.12);
  --lf-bg-muted: #434244;
  --lf-bg-brand-soft: #0a452a;
  --lf-status-warning: #fbc185;
  --lf-text-primary: #fafafb;
  --lf-text-secondary: #d2d2d6;
  --lf-text-tertiary: #aeadb2;
  --lf-border-subtle: #434244;
  --lf-border-default: #555458;
  --lf-border-focus: #84c4f6;
  --lf-action-primary: #ffffff;
  --lf-action-primary-hover: #e8e8eb;
  --lf-action-on-primary: #1c1b1e;
  --lf-action-gray: #434244;
  --lf-action-gray-hover: #555458;
  --lf-action-brand: #3ec27a;
  --lf-action-brand-hover: #7dd6a1;
  --lf-action-tinted: #0a452a;
  --lf-action-on-tinted: #def6af;
}