/* LIO is the application theme; component hosts keep tokens available in isolated previews. */
:root,
.lio-component-scope,
.lio-btn,
.lio-card,
.lio-metric-card,
.lio-review-card,
.lio-email-selector,
.lio-sender-card,
.lio-choice-card-group,
.lio-file-dropzone,
.lio-tooltip,
.lio-field,
.lio-select,
.lio-calendar,
.lio-date-picker,
.lio-advanced-calendar,
.lio-time-picker,
.lio-date-time-picker,
.lio-badge,
.lio-small-chip,
.lio-checkbox,
.lio-radio,
.lio-radio-group,
.lio-switch,
.lio-indicator,
.lio-progress,
.lio-tabs,
.lio-title-subtitle,
.lio-stepper,
.lio-table,
.lio-table-cell,
.lio-organization-button,
.lio-header,
.lio-header-inside,
.lio-design-header,
.lio-shimmer,
.lio-workflow-screen,
.lio-nav,
.lio-popover,
.lio-alert-dialog-layer,
.lio-dialog-layer {
  --primary-50:#ffeffb; --primary-100:#ffd9f5; --primary-200:#ffb0e9;
  --primary-300:#ff7edc; --primary-400:#ff3eca; --primary-500:#ff04ba;
  --primary-600:#d9009d; --primary-700:#af007f; --primary-800:#850060;
  --primary-900:#580842; --primary-950:#28001d;
  --primary: var(--primary-900);

  --accent-50:#ffefea; --accent-100:#ffded5; --accent-200:#ffbeab;
  --accent-300:#ff997a; --accent-400:#ff683a; --accent-500:#ff3b00;
  --accent-600:#d83200; --accent-700:#b02900; --accent-800:#892000;
  --accent-900:#661800; --accent-950:#2e0b00;

  --stone-50:#fafaf9; --stone-200:#e7e5e4; --stone-950:#0c0a09;
  --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-200:#e4e4e7;
  --zinc-500:#71717a; --zinc-600:#52525b;
  --neutral-100:#f5f5f5; --neutral-400:#a3a3a3; --neutral-800:#262626;
  --neutral-900:#171717; --neutral-950:#0a0a0a;
  --white:#ffffff; --black:#000000;

  --red-50:#fef2f2; --red-100:#fee2e2; --red-300:#fca5a5; --red-400:#f87171;
  --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c;
  --green-100:#dcfce7; --green-200:#bbf7d0; --green-300:#86efac; --green-400:#4ade80;
  --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d;
  --orange-100:#ffedd5; --orange-200:#fed7aa; --orange-300:#fdba74; --orange-400:#fb923c;
  --orange-500:#f97316; --orange-600:#ea580c; --orange-700:#c2410c;
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-300:#93c5fd; --blue-400:#60a5fa;
  --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;

  --alpha-light-500:#1a1a1a7a; --alpha-light-700:#1a1a1ab2;
  --alpha-dark-500:#ffffff7a;

  --bg: var(--stone-50);
  --surface: var(--white);
  --surface-hover: var(--neutral-100);
  --surface-disabled: var(--neutral-100);
  --surface-selected: var(--zinc-100);
  --surface-pressed: var(--zinc-200);
  --surface-secondary: var(--zinc-50);
  --surface-secondary-hover: var(--zinc-100);
  --surface-secondary-selected: var(--zinc-200);

  --neutral-surface: var(--zinc-200);
  --neutral-surface-secondary: var(--zinc-600);
  --neutral-surface-tertiary: var(--neutral-800);

  --text: var(--neutral-950);
  --text-secondary: var(--zinc-600);
  --text-tertiary: var(--zinc-500);
  --text-disabled: var(--neutral-400);
  --text-brand: var(--primary-950);
  --text-brand-secondary: var(--primary);
  --text-inverse: var(--white);

  --border: var(--stone-200);
  --border-subtle: var(--zinc-100);
  --border-secondary: var(--neutral-400);
  --border-tertiary: var(--zinc-600);
  --border-disabled: var(--zinc-200);
  --border-brand: var(--primary);
  --border-brand-hover: var(--primary-700);
  --border-brand-selected: var(--primary-950);
  --border-brand-secondary: var(--stone-950);
  --border-inverse: var(--white);

  --icon: var(--zinc-600);
  --icon-secondary: var(--neutral-900);
  --icon-disabled: var(--neutral-400);
  --icon-brand: var(--black);
  --icon-brand-secondary: var(--primary);
  --icon-inverse: var(--white);
  --icon-inverse-secondary: var(--neutral-100);
  --icon-inverse-tertiary: var(--zinc-600);

  --brand-surface: var(--primary-50);
  --brand-surface-hover: var(--primary-300);
  --brand-surface-selected: var(--primary-100);
  --brand-surface-pressed: var(--primary-200);
  --brand-solid: var(--primary);
  --brand-solid-hover: var(--primary-950);
  --brand-solid-selected: var(--primary-800);
  --brand-solid-disabled: var(--primary-200);
  --brand-tertiary: var(--accent-500);
  --brand-tertiary-hover: var(--accent-600);
  --brand-tertiary-selected: var(--accent-700);
  --brand-tertiary-disabled: var(--accent-200);
  --brand-quaternary: var(--black);

  --error-bg: var(--red-50);         --error-bg-hover: var(--red-100);
  --error-solid: var(--red-600);     --error-solid-hover: var(--red-700);
  --error-text: var(--red-600);      --error-text-hover: var(--red-700);
  --error-icon: var(--red-600);
  --error-border: var(--red-500);    --error-border-subtle: var(--red-300);

  --success-bg: var(--green-100);    --success-bg-hover: var(--green-200);
  --success-solid: var(--green-600); --success-solid-hover: var(--green-700);
  --success-text: var(--green-600);  --success-text-hover: var(--green-700);
  --success-icon: var(--green-600);
  --success-border: var(--green-500);--success-border-subtle: var(--green-300);

  --warning-bg: var(--orange-100);   --warning-bg-hover: var(--orange-200);
  --warning-solid: var(--orange-600);--warning-solid-hover: var(--orange-700);
  --warning-text: var(--orange-600); --warning-text-hover: var(--orange-700);
  --warning-icon: var(--orange-600);
  --warning-border: var(--orange-500);--warning-border-subtle: var(--orange-300);

  --info-bg: var(--blue-50);         --info-bg-hover: var(--blue-100);
  --info-solid: var(--blue-600);     --info-solid-hover: var(--blue-700);
  --info-text: var(--blue-600);      --info-text-hover: var(--blue-700);
  --info-icon: var(--blue-600);
  --info-border: var(--blue-500);    --info-border-subtle: var(--blue-300);

  --radius-none:0; --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  --radius-xl:12px; --radius-2xl:16px; --radius-3xl:24px; --radius-4xl:32px;
  --radius-5xl:48px; --radius-full:9999px;

  --space-zero:0; --space-px:1px; --space-xxs:2px; --space-xs2:4px; --space-xs3:6px;
  --space-xs:8px; --space-sm:12px; --space-base:16px; --space-md:20px; --space-lg:24px;
  --space-xl:28px; --space-xl2:32px; --space-xl3:40px; --space-xl4:48px;
  --space-xl5:60px; --space-xl6:72px;

  --size-xxs:2px; --size-xs:4px; --size-sm:8px; --size-base:12px; --size-lg:16px;
  --size-xl:20px; --size-2xl:24px; --size-3xl:32px; --size-4xl:40px;
  --size-5xl:48px; --size-6xl:56px;

  --data-viz-min-inline-size:720px;

  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px;
  --control-radius:10px;

  --border-w:1px; --border-w-05:0.5px; --border-w-133:1.33px; --border-w-2:2px;
  --opacity-0:0; --opacity-5:.05; --opacity-10:.1; --opacity-20:.2; --opacity-25:.25;
  --opacity-30:.3; --opacity-40:.4; --opacity-50:.5; --opacity-60:.6; --opacity-70:.7;
  --opacity-80:.8; --opacity-90:.9; --opacity-95:.95; --opacity-100:1;
  --opacity-disabled: var(--opacity-50);

  --shadow-2xs: 0 1px 0 0 rgb(0 0 0 / .05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .10), 0 1px 2px -1px rgb(0 0 0 / .10);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .10);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .10), 0 4px 6px -4px rgb(0 0 0 / .10);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .10), 0 8px 10px -6px rgb(0 0 0 / .10);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);

  --ring-brand: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
  --ring-error: 0 0 0 3px color-mix(in srgb, var(--red-500) 30%, transparent);

  --overlay: rgb(0 0 0 / .5);

  --font: "Graphie", "Inter", system-ui, sans-serif;
  --font-geist: "Geist", "Graphie", "Inter", system-ui, sans-serif;
  --display-2xl: 800 88px/1.1 var(--font);
  --display-xl: 600 64px/70px var(--font);
  --display-l: 600 56px/64px var(--font);
  --display-m: 700 48px/1.15 var(--font);
  --display-s: 700 40px/1.15 var(--font);
  --display-xs: 700 32px/1.2 var(--font);
  --display-2xs: 700 24px/32px var(--font);
  --heading-2xl: 600 24px/1.3 var(--font);
  --heading-xl: 600 18px/1.3 var(--font);
  --heading-l: 600 16px/24px var(--font);
  --heading-m: 600 14px/1.3 var(--font);
  --body-xl: 400 18px/25px var(--font);
  --body-l: 400 16px/24px var(--font);
  --body-l-prominent: 600 16px/24px var(--font);
  --body-m: 400 14px/22px var(--font);
  --body-m-prominent: 600 14px/1.4 var(--font);
  --tracking-body-m: .01em;
  --body-s: 400 12px/18px var(--font);
  --body-s-prominent: 600 12px/1.4 var(--font);

}