/**
 * Urban Folk design tokens
 * Source: Urban Folk Design System, approved decisions through A-80.
 * Installable child-theme projection updated 2026-10-09.
 *
 * Do not introduce design values here independently. Revise the canonical
 * Design System first, then regenerate this file.
 */

:root {
  /* Color — exact approved tokens.json values */
  --uf-oxblood: #6f2932;
  --uf-oxblood-50: #fcf0f0;
  --uf-oxblood-100: #f8e2e3;
  --uf-oxblood-200: #f0c9cb;
  --uf-oxblood-300: #e5a8ab;
  --uf-oxblood-400: #ce7e84;
  --uf-oxblood-500: #b25760;
  --uf-oxblood-600: #8f3b45;
  --uf-oxblood-700: var(--uf-oxblood);
  --uf-oxblood-800: #561922;
  --uf-oxblood-900: #3d0f16;
  --uf-neutral-0: #ffffff;
  --uf-neutral-100: #ffffff;
  --uf-neutral-150: #f8f6f5;
  --uf-neutral-200: #eeeae9;
  --uf-neutral-300: #dcd8d7;
  --uf-neutral-400: #aca8a7;
  --uf-neutral-500: #837f7e;
  --uf-neutral-600: #6a6665;
  --uf-neutral-700: #504c4b;
  --uf-neutral-800: #383434;
  --uf-neutral-900: #1e1b1a;
  --uf-red-50: #fff0ed;
  --uf-red-500: #d64a39;
  --uf-red-700: #a01a0e;
  --uf-red-800: #840b03;
  --uf-teal-50: #e8f7f7;
  --uf-teal-500: #2c9095;
  --uf-teal-700: #00686c;
  --uf-teal-800: #015256;
  --uf-amber-50: #fbf2e4;
  --uf-amber-500: #a77610;
  --uf-amber-700: #8e6307;
  --uf-amber-800: #755003;
  --uf-blue-50: #ecf4ff;
  --uf-blue-500: #4281d0;
  --uf-blue-700: #1e5ba1;
  --uf-blue-800: #114785;
  --uf-surface-page: var(--uf-neutral-100);
  --uf-surface-card: var(--uf-neutral-0);
  --uf-surface-subtle: var(--uf-neutral-150);
  --uf-surface-sunken: var(--uf-neutral-200);
  --uf-surface-inverse: var(--uf-neutral-900);
  --uf-surface-brand: var(--uf-oxblood-700);
  --uf-surface-brand-subtle: var(--uf-oxblood-50);
  --uf-text-default: var(--uf-neutral-900);
  --uf-text-muted: var(--uf-neutral-600);
  --uf-text-disabled: var(--uf-neutral-400);
  --uf-text-inverse: var(--uf-neutral-0);
  --uf-text-link: var(--uf-oxblood-700);
  --uf-text-link-hover: var(--uf-oxblood-800);
  --uf-text-brand: var(--uf-oxblood-700);
  --uf-border-subtle: var(--uf-neutral-200);
  --uf-border-default: var(--uf-neutral-300);
  --uf-border-control: var(--uf-neutral-500);
  --uf-border-strong: var(--uf-neutral-900);
  --uf-action-primary: var(--uf-oxblood-700);
  --uf-action-primary-hover: var(--uf-oxblood-800);
  --uf-action-primary-active: var(--uf-oxblood-900);
  --uf-on-action-primary: var(--uf-neutral-0);
  --uf-action-subtle-hover: var(--uf-neutral-200);
  --uf-action-danger: var(--uf-red-700);
  --uf-action-danger-hover: var(--uf-red-800);
  --uf-on-action-danger: var(--uf-neutral-0);
  --uf-action-disabled-bg: var(--uf-neutral-200);
  --uf-action-disabled-fg: var(--uf-neutral-500);
  --uf-selection-bg: var(--uf-neutral-900);
  --uf-on-selection: var(--uf-neutral-0);
  --uf-selection-subtle-bg: var(--uf-neutral-200);
  --uf-focus-ring: var(--uf-neutral-900);
  --uf-focus-ring-inverse: var(--uf-neutral-0);
  --uf-overlay-scrim: rgba(30, 27, 26, 0.6);
  --uf-status-danger-fg: var(--uf-red-700);
  --uf-status-danger-bg: var(--uf-red-50);
  --uf-status-danger-border: var(--uf-red-500);
  --uf-status-success-fg: var(--uf-teal-700);
  --uf-status-success-bg: var(--uf-teal-50);
  --uf-status-success-border: var(--uf-teal-500);
  --uf-status-warning-fg: var(--uf-amber-700);
  --uf-status-warning-bg: var(--uf-amber-50);
  --uf-status-warning-border: var(--uf-amber-500);
  --uf-status-info-fg: var(--uf-blue-700);
  --uf-status-info-bg: var(--uf-blue-50);
  --uf-status-info-border: var(--uf-blue-500);
  /* Spacing — exact approved tokens.json values */
  --uf-space-1: 4px;
  --uf-space-2: 8px;
  --uf-space-3: 12px;
  --uf-space-4: 16px;
  --uf-space-5: 20px;
  --uf-space-6: 24px;
  --uf-space-8: 32px;
  --uf-space-10: 40px;
  --uf-space-12: 48px;
  --uf-space-16: 64px;
  --uf-space-20: 80px;
  --uf-space-24: 96px;
  /* Radius — exact approved tokens.json values */
  --uf-radius-sm: 6px;
  --uf-radius-md: 8px;
  --uf-radius-lg: 12px;
  --uf-radius-xl: 24px;
  --uf-radius-full: 9999px;
  /* Sizing — exact approved tokens.json values */
  --uf-carousel-control-target: 44px;
  --uf-carousel-arrow-visual: 32px;
  --uf-control-sm: 36px;
  --uf-control-md: 48px;
  --uf-control-lg: 56px;
  --uf-icon-sm: 16px;
  --uf-icon-md: 20px;
  --uf-icon-lg: 24px;
  /* Stroke — exact approved tokens.json values */
  --uf-stroke-1: 1px;
  --uf-stroke-2: 2px;
  /* Layout — exact approved tokens.json values */
  --uf-breakpoint-tablet: 768px;
  --uf-breakpoint-desktop: 1025px;
  --uf-breakpoint-wide: 1440px;
  --uf-container-max: 1280px;
  --uf-gutter-mobile: 24px;
  --uf-gutter-desktop: 40px;
  --uf-gutter-wide: 80px;
  --uf-measure-max: 68ch;
  --uf-dialog-width-sm: 400px;
  --uf-dialog-width-md: 560px;
  --uf-dialog-width-lg: 720px;
  /* Shadow — exact approved tokens.json values */
  --uf-shadow-tip: 0 2px 4px rgba(30, 27, 26, 0.18);
  --uf-shadow-float: 0 1px 2px rgba(30, 27, 26, 0.08), 0 6px 20px rgba(30, 27, 26, 0.12);
  --uf-shadow-overlay: 0 8px 28px rgba(30, 27, 26, 0.28);
  /* Layer — exact approved tokens.json values */
  --uf-layer-sticky: 100;
  --uf-layer-dropdown: 200;
  --uf-layer-overlay: 300;
  --uf-layer-toast: 400;
  /* Anthony-approved implementation exception, October 8, 2026:
     retain the existing dark Listeo header colour. */
  --uf-header-current: #031112;
  --uf-font-sans: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Approved type-style projections; no new design values. */
  --uf-type-display-xl-size: 56px;
  --uf-type-display-xl-line: 60px;
  --uf-type-display-xl-weight: 600;
  --uf-type-display-xl-tracking: -0.03em;
  --uf-type-display-lg-size: 44px;
  --uf-type-display-lg-line: 48px;
  --uf-type-display-lg-weight: 600;
  --uf-type-display-lg-tracking: -0.025em;
  --uf-type-display-md-size: 32px;
  --uf-type-display-md-line: 36px;
  --uf-type-display-md-weight: 600;
  --uf-type-display-md-tracking: -0.02em;
  --uf-type-heading-xl-size: 28px;
  --uf-type-heading-xl-line: 32px;
  --uf-type-heading-xl-weight: 600;
  --uf-type-heading-xl-tracking: -0.02em;
  --uf-type-heading-lg-size: 22px;
  --uf-type-heading-lg-line: 28px;
  --uf-type-heading-lg-weight: 600;
  --uf-type-heading-lg-tracking: -0.01em;
  --uf-type-heading-md-size: 18px;
  --uf-type-heading-md-line: 24px;
  --uf-type-heading-md-weight: 600;
  --uf-type-heading-md-tracking: -0.005em;
  --uf-type-heading-sm-size: 16px;
  --uf-type-heading-sm-line: 20px;
  --uf-type-heading-sm-weight: 600;
  --uf-type-heading-sm-tracking: 0;
  --uf-type-heading-xs-size: 15px;
  --uf-type-heading-xs-line: 20px;
  --uf-type-heading-xs-weight: 600;
  --uf-type-heading-xs-tracking: 0;
  --uf-type-body-lg-size: 18px;
  --uf-type-body-lg-line: 28px;
  --uf-type-body-lg-weight: 400;
  --uf-type-body-lg-tracking: 0;
  --uf-type-body-md-size: 16px;
  --uf-type-body-md-line: 24px;
  --uf-type-body-md-weight: 400;
  --uf-type-body-md-tracking: 0;
  --uf-type-body-sm-size: 14px;
  --uf-type-body-sm-line: 20px;
  --uf-type-body-sm-weight: 400;
  --uf-type-body-sm-tracking: 0;
  --uf-type-label-lg-size: 16px;
  --uf-type-label-lg-line: 20px;
  --uf-type-label-lg-weight: 600;
  --uf-type-label-lg-tracking: 0;
  --uf-type-label-md-size: 14px;
  --uf-type-label-md-line: 20px;
  --uf-type-label-md-weight: 500;
  --uf-type-label-md-tracking: 0;
  --uf-type-label-sm-size: 12px;
  --uf-type-label-sm-line: 16px;
  --uf-type-label-sm-weight: 600;
  --uf-type-label-sm-tracking: 0;
  --uf-type-caption-size: 12px;
  --uf-type-caption-line: 16px;
  --uf-type-caption-weight: 400;
  --uf-type-caption-tracking: 0;
  /* Compatibility only for existing external --ufc-* consumers. */
  --ufc-dark: var(--uf-surface-inverse);
  --ufc-surface: var(--uf-surface-card);
  --ufc-gold: var(--uf-action-primary);
  --ufc-turq: var(--uf-text-brand);
  --ufc-red: var(--uf-status-danger-fg);
  --ufc-green: var(--uf-status-success-fg);
  --ufc-blue: var(--uf-status-info-fg);
  --ufc-cloud: var(--uf-surface-sunken);
  --ufc-bg: var(--uf-surface-page);
  --ufc-beige: var(--uf-surface-subtle);
  --ufc-white: var(--uf-surface-card);
  --ufc-text: var(--uf-text-default);
  --ufc-muted: var(--uf-text-muted);
  --ufc-border: var(--uf-border-default);
  --ufc-border-2: var(--uf-border-control);
  --ufc-pill: var(--uf-radius-full);
  --ufc-r-xs: var(--uf-radius-sm);
  --ufc-r-sm: var(--uf-radius-md);
  --ufc-r-md: var(--uf-radius-lg);
  --ufc-r-lg: var(--uf-radius-xl);
  --ufc-r-xl: var(--uf-radius-xl);
  /* Listeo compatibility bridge for components that consume theme variables. */
  --listeo-primary-color: var(--uf-action-primary) !important;
  --listeo-primary-color-rgb: 111, 41, 50 !important;
}