/* Design tokens - generated by Kigen ("5 Collections", 2026-09-18), adapted for AutoHX.
   Dark-mode block re-keyed from [data-theme='Dark'] to body.dark to match the
   existing toggle in public/v2/assets/js/main.js (guarded by
   platform-e2e/ui/tests/journeys/theme-dark-class.spec.js). */

:root {
  /* Danger */
  --danger-50: #ffddd9;
  --danger-100: #ffc9c2;
  --danger-200: #ffa299;
  --danger-300: #fb736b;
  --danger-400: #ef4444;
  --danger-500: #ef4444;
  --danger-600: #a8544e;
  --danger-700: #933f3a;
  --danger-800: #7a0510;
  --danger-900: #560000;
  --danger-950: #350002;

  /* Warning */
  --warning-50: #ffeee2;
  --warning-100: #ffd9be;
  --warning-200: #ffb975;
  --warning-300: #f59e0b;
  --warning-400: #dd8e09;
  --warning-500: #be7906;
  --warning-600: #9b6204;
  --warning-700: #764a02;
  --warning-800: #523201;
  --warning-900: #2e1a00;
  --warning-950: #1c0e00;

  /* Primary */
  --primary-50: #ffede9;
  --primary-100: #fed7ce;
  --primary-200: #feb49f;
  --primary-300: #fd936b;
  --primary-400: #f97316;
  --primary-500: #dd6512;
  --primary-600: #b6520d;
  --primary-700: #8d3e07;
  --primary-800: #622903;
  --primary-900: #381401;
  --primary-950: #220a00;

  /* Secondary */
  --secondary-50: #eef0fe;
  --secondary-100: #d4dafc;
  --secondary-200: #aab7fa;
  --secondary-300: #8399f8;
  --secondary-400: #587df6;
  --secondary-500: #2563eb;
  --secondary-600: #1f55cc;
  --secondary-700: #1642a3;
  --secondary-800: #0d2e76;
  --secondary-900: #051948;
  --secondary-950: #020e30;

  /* Success */
  --success-50: #c5fed1;
  --success-100: #42fe81;
  --success-200: #28e06c;
  --success-300: #22c55e;
  --success-400: #1eb254;
  --success-500: #189847;
  --success-600: #117c39;
  --success-700: #0b5f2a;
  --success-800: #05411a;
  --success-900: #02240c;
  --success-950: #011505;

  /* Neutral */
  --neutral-background: #f9fafb;
  --neutral-surface: #ffffff;
  --neutral-border: #e5e7eb;
  --neutral-disabled: #9ca3af;
  --neutral-secondary-text: #6b7280;
  --neutral-primary-text: #111827;

  /* Family */
  --family-primary: Inter;

  /* Weights */
  --weights-thin: 100;
  --weights-extralight: 200;
  --weights-light: 300;
  --weights-regular: 400;
  --weights-medium: 500;
  --weights-semibold: 600;
  --weights-bold: 700;
  --weights-extrabold: 800;
  --weights-black: 900;

  /* Heading, Body, Caption font-sizes/line-heights are in rem, not the px
     Kigen exported them as -- Fomantic sets `html{font-size:14px}` (see
     public/v2/dist/semantic.min.css), not the 16px browser default Kigen's
     own px numbers assume, so a naive /16 rem conversion would render
     smaller than designed and a straight px copy would stop scaling with
     the user's font-size setting. Every value below is (intended px)/14,
     so e.g. --body-body-2-fontsize still renders at exactly 14px here. */

  /* Heading */
  --heading-h1-fontsize: 2.2857rem; /* 32px */
  --heading-h1-lineheight: 2.8571rem; /* 40px */
  --heading-h1-letterspacing: 0;
  --heading-h2-fontsize: 1.7143rem; /* 24px */
  --heading-h2-lineheight: 2.2857rem; /* 32px */
  --heading-h2-letterspacing: 0;
  --heading-h3-fontsize: 1.4286rem; /* 20px */
  --heading-h3-lineheight: 2rem; /* 28px */
  --heading-h3-letterspacing: 0;
  --heading-h4-fontsize: 1.2857rem; /* 18px */
  --heading-h4-lineheight: 1.8571rem; /* 26px */
  --heading-h4-letterspacing: 0;
  --heading-h5-fontsize: 1.1429rem; /* 16px */
  --heading-h5-lineheight: 1.7143rem; /* 24px */
  --heading-h5-letterspacing: 0;

  /* Body */
  --body-body-1-fontsize: 1.1429rem; /* 16px */
  --body-body-1-lineheight: 1.7143rem; /* 24px */
  --body-body-1-letterspacing: 0;
  --body-body-2-fontsize: 1rem; /* 14px */
  --body-body-2-lineheight: 1.4286rem; /* 20px */
  --body-body-2-letterspacing: 0;

  /* Caption */
  --caption-caption-1-fontsize: 0.8571rem; /* 12px */
  --caption-caption-1-lineheight: 1.1429rem; /* 16px */
  --caption-caption-1-letterspacing: 0;
  --caption-caption-2-fontsize: 0.7143rem; /* 10px */
  --caption-caption-2-lineheight: 0.8571rem; /* 12px */
  --caption-caption-2-letterspacing: 0;

  /* Radius */
  --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: 999px;

  /* Space */
  --space-zero: 0;
  --space-px: 1px;
  --space-xxs: 2px;
  --space-xs2: 4px;
  --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 */
  --size-zero: 0;
  --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;

  /* Heading (aliases) */
  --heading-h1-fontfamily: var(--family-primary);
  --heading-h2-fontfamily: var(--family-primary);
  --heading-h3-fontfamily: var(--family-primary);
  --heading-h4-fontfamily: var(--family-primary);
  --heading-h5-fontfamily: var(--family-primary);

  /* Body (aliases) */
  --body-body-1-fontfamily: var(--family-primary);
  --body-body-2-fontfamily: var(--family-primary);

  /* Caption (aliases) */
  --caption-caption-1-fontfamily: var(--family-primary);
  --caption-caption-2-fontfamily: var(--family-primary);

  /* Semantic aliases - the names components should actually use.
     base/hover/active map to the *-500/*-600/*-700 steps, matching the
     state pattern already used by .ahx-btn (see flow-builder.css) so
     migrating those components is a straight rename, not a redesign.
     These resolve against whichever theme block (:root or body.dark) is
     active, except --color-on-accent, which stays constant because
     filled buttons keep white text in both themes today. */
  --color-primary: var(--primary-500);
  --color-primary-hover: var(--primary-600);
  --color-primary-active: var(--primary-700);
  --color-primary-surface: var(--primary-50);

  --color-secondary: var(--secondary-500);
  --color-secondary-hover: var(--secondary-600);
  --color-secondary-active: var(--secondary-700);

  --color-success: var(--success-500);
  --color-success-hover: var(--success-600);
  --color-success-active: var(--success-700);

  --color-danger: var(--danger-500);
  --color-danger-hover: var(--danger-600);
  --color-danger-active: var(--danger-700);
  --color-danger-surface: var(--danger-50);

  --color-warning: var(--warning-500);
  --color-warning-surface: var(--warning-50);
  --color-warning-border: var(--warning-200);
  --color-warning-text: var(--warning-600);

  --color-on-accent: #ffffff;
  --color-disabled: var(--neutral-disabled);
  --color-disabled-fg: #ffffff;

  --color-bg: var(--neutral-background);
  --color-surface: var(--neutral-surface);
  --color-border: var(--neutral-border);
  --color-text: var(--neutral-primary-text);
  --color-text-secondary: var(--neutral-secondary-text);
}

/* Dark theme - toggled via body.dark, see public/v2/assets/js/main.js */
body.dark {
  /* Danger */
  --danger-50: #4d0b03;
  --danger-100: #5f0e04;
  --danger-200: #7d1005;
  --danger-300: #9f130b;
  --danger-400: #ba1818;
  --danger-500: #ba1818;
  --danger-600: #ab5c56;
  --danger-700: #bd6964;
  --danger-800: #f36b78;
  --danger-900: #fa8484;
  --danger-950: #fb9da0;

  /* Warning */
  --warning-50: #471f03;
  --warning-100: #622b04;
  --warning-200: #984e06;
  --warning-300: #e69813;
  --warning-400: #eda121;
  --warning-500: #f0ab38;
  --warning-600: #f3b651;
  --warning-700: #f6c26d;
  --warning-800: #f9cc87;
  --warning-900: #fbd4a2;
  --warning-950: #fcd5af;

  /* Primary */
  --primary-50: #410e03;
  --primary-100: #551405;
  --primary-200: #781f06;
  --primary-300: #9f3209;
  --primary-400: #de640f;
  --primary-500: #e47222;
  --primary-600: #e9853f;
  --primary-700: #f09a5d;
  --primary-800: #f6ad7c;
  --primary-900: #f9bc9b;
  --primary-950: #fbc3ab;

  /* Secondary */
  --secondary-50: #060d3b;
  --secondary-100: #09134e;
  --secondary-200: #0b1b6e;
  --secondary-300: #0e258c;
  --secondary-400: #1035ac;
  --secondary-500: #1c54d1;
  --secondary-600: #3266d8;
  --secondary-700: #507de0;
  --secondary-800: #7197ea;
  --secondary-900: #92aff3;
  --secondary-950: #a2b9f7;

  /* Success */
  --success-50: #055c18;
  --success-100: #09be46;
  --success-200: #26cd64;
  --success-300: #38d572;
  --success-400: #46d87c;
  --success-500: #59de8a;
  --success-600: #6ee59a;
  --success-700: #83eca9;
  --success-800: #97f3b7;
  --success-900: #acf7c2;
  --success-950: #b7f9c4;

  /* Neutral */
  --neutral-background: #0e1015;
  --neutral-surface: #171a21;
  --neutral-border: #2a2f3a;
  --neutral-disabled: #4b5163;
  --neutral-secondary-text: #9aa3b2;
  --neutral-primary-text: #f3f5f7;

  /* Semantic aliases - redeclared here on purpose. An alias defined only in
     :root (e.g. --color-surface: var(--neutral-surface)) gets resolved once
     against html's (light) --neutral-surface and that already-substituted
     value is what inherits down -- redefining --neutral-surface on body.dark
     does NOT make :root's --color-surface re-resolve. Every alias that
     references a primitive must be repeated wherever the primitive changes.
     --color-on-accent and --color-disabled-fg are omitted: they're literal
     #fff, not var() references, so there's nothing to re-resolve. */
  --color-primary: var(--primary-500);
  --color-primary-hover: var(--primary-600);
  --color-primary-active: var(--primary-700);
  --color-primary-surface: var(--primary-50);

  --color-secondary: var(--secondary-500);
  --color-secondary-hover: var(--secondary-600);
  --color-secondary-active: var(--secondary-700);

  --color-success: var(--success-500);
  --color-success-hover: var(--success-600);
  --color-success-active: var(--success-700);

  --color-danger: var(--danger-500);
  --color-danger-hover: var(--danger-600);
  --color-danger-active: var(--danger-700);
  --color-danger-surface: var(--danger-50);

  --color-warning: var(--warning-500);
  --color-warning-surface: var(--warning-50);
  --color-warning-border: var(--warning-200);
  --color-warning-text: var(--warning-600);

  --color-disabled: var(--neutral-disabled);
  --color-bg: var(--neutral-background);
  --color-surface: var(--neutral-surface);
  --color-border: var(--neutral-border);
  --color-text: var(--neutral-primary-text);
  --color-text-secondary: var(--neutral-secondary-text);
}