/*
 * Généré par `rake hoot:sync` depuis @gammeo/hoot 20.8.0-beta.1.
 * NE PAS ÉDITER À LA MAIN — toute retouche part à la prochaine synchro.
 * Les écarts propres à Vision se déclarent dans vision-tokens.css.
 */
html {
  /**
   * Color/Background
   */
  --hoot-color-background-app: linear-gradient(160deg, rgba(26, 35, 126, 1) 25%, rgba(141, 141, 179, 1) 100%);
  --hoot-color-background-app-mobile:
    radial-gradient(258.7% 60.22% at 50% -41.07%, #3552ff 0%, #fafaff 100%), var(--hoot-color-surface-brand, #fafaff);

  /**
   * Color/Base
   */
  --hoot-color-base-white: #ffffff;
  --hoot-color-base-black: #0d0d0d;
  --hoot-color-base-overlay: #00000080; // equivalent to rgba(0, 0, 0, 0.5);

  /**
   * Color/neutral
   */
  --hoot-color-neutral-25: #f6f8fa;
  --hoot-color-neutral-50: #eceff1;
  --hoot-color-neutral-100: #cfd8dc;
  --hoot-color-neutral-200: #b0bec5;
  --hoot-color-neutral-300: #90a4ae;
  --hoot-color-neutral-400: #78909c;
  --hoot-color-neutral-500: #607d8b;
  --hoot-color-neutral-600: #546e7a;
  --hoot-color-neutral-700: #455a64;
  --hoot-color-neutral-800: #37474f;
  --hoot-color-neutral-900: #1d2a31;

  /**
   * Color/brand
   */
  --hoot-color-brand-25: #fafaff;
  --hoot-color-brand-50: #e8eaf6;
  --hoot-color-brand-100: #c5cae9;
  --hoot-color-brand-200: #9fa8da;
  --hoot-color-brand-300: #7986cb;
  --hoot-color-brand-400: #5c6bc0;
  --hoot-color-brand-500: #3f51b5;
  --hoot-color-brand-600: #3949ab;
  --hoot-color-brand-700: #303f9f;
  --hoot-color-brand-800: #283593;
  --hoot-color-brand-900: #1a237e;

  /**
   * Color/secondary
   */
  --hoot-color-secondary-25: #f5feff;
  --hoot-color-secondary-50: #ecfdff;
  --hoot-color-secondary-100: #cff9fe;
  --hoot-color-secondary-200: #a5f0fc;
  --hoot-color-secondary-300: #67e3f9;
  --hoot-color-secondary-400: #22ccee;
  --hoot-color-secondary-500: #06aed4;
  --hoot-color-secondary-600: #088ab2;
  --hoot-color-secondary-700: #0e7090;
  --hoot-color-secondary-800: #155b75;
  --hoot-color-secondary-900: #164c63;

  /**
   * Color/tertiary
   */
  --hoot-color-tertiary-25: #fefdf0;
  --hoot-color-tertiary-50: #fefbe8;
  --hoot-color-tertiary-100: #fef7c3;
  --hoot-color-tertiary-200: #feee95;
  --hoot-color-tertiary-300: #fde272;
  --hoot-color-tertiary-400: #fac515;
  --hoot-color-tertiary-500: #eaaa08;
  --hoot-color-tertiary-600: #ca8504;
  --hoot-color-tertiary-700: #a15c07;
  --hoot-color-tertiary-800: #854a0e;
  --hoot-color-tertiary-900: #713b12;

  /**
   * Color/success
   */
  --hoot-color-success-25: #f6fef9;
  --hoot-color-success-50: #edfcf2;
  --hoot-color-success-100: #d3f8df;
  --hoot-color-success-200: #aaf0c4;
  --hoot-color-success-300: #73e2a3;
  --hoot-color-success-400: #3ccb7f;
  --hoot-color-success-500: #16b364;
  --hoot-color-success-600: #099250;
  --hoot-color-success-700: #0b673e;
  --hoot-color-success-800: #095c37;
  --hoot-color-success-900: #084c2e;

  /**
   * Color/warning
   */
  --hoot-color-warning-25: #fefdf0;
  --hoot-color-warning-50: #fff8e1;
  --hoot-color-warning-100: #ffecb3;
  --hoot-color-warning-200: #ffe082;
  --hoot-color-warning-300: #ffd54f;
  --hoot-color-warning-400: #ffca28;
  --hoot-color-warning-500: #ffc107;
  --hoot-color-warning-600: #ffb300;
  --hoot-color-warning-700: #ea9300;
  --hoot-color-warning-800: #ee8500;
  --hoot-color-warning-900: #a44700;

  /**
   * Color/danger
   */
  --hoot-color-danger-25: #fff5f6;
  --hoot-color-danger-50: #ffebee;
  --hoot-color-danger-100: #ffcdd2;
  --hoot-color-danger-200: #ef9a9a;
  --hoot-color-danger-300: #e57373;
  --hoot-color-danger-400: #ef5350;
  --hoot-color-danger-500: #f44336;
  --hoot-color-danger-600: #e53935;
  --hoot-color-danger-700: #d32f2f;
  --hoot-color-danger-800: #c62828;
  --hoot-color-danger-900: #b71c1c;

  /**
   * Color/Pink
   */
  --hoot-color-pink-25: #fcf7f9;
  --hoot-color-pink-50: #fef1f6;
  --hoot-color-pink-100: #fde6f0;
  --hoot-color-pink-200: #fdcde1;
  --hoot-color-pink-300: #fda4c7;
  --hoot-color-pink-400: #fa6ca1;
  --hoot-color-pink-500: #f43f7e;
  --hoot-color-pink-600: #e41e59;
  --hoot-color-pink-700: #c61041;
  --hoot-color-pink-800: #a41036;
  --hoot-color-pink-900: #881331;

  /**
   * Color/Purple
   */
  --hoot-color-purple-25: #f4f6ff;
  --hoot-color-purple-50: #edf0ff;
  --hoot-color-purple-100: #dfe2ff;
  --hoot-color-purple-200: #c5caff;
  --hoot-color-purple-300: #a2a7ff;
  --hoot-color-purple-400: #7f7dfc;
  --hoot-color-purple-500: #6c5ef6;
  --hoot-color-purple-600: #5d41ea;
  --hoot-color-purple-700: #5033cf;
  --hoot-color-purple-800: #422ca7;
  --hoot-color-purple-900: #382b84;

  /**
   * Color/ElectricViolet
   */
  --hoot-color-electric-violet-25: #fdf6ff;
  --hoot-color-electric-violet-50: #fcf4ff;
  --hoot-color-electric-violet-100: #f7e6ff;
  --hoot-color-electric-violet-200: #f0d1ff;
  --hoot-color-electric-violet-300: #e5aeff;
  --hoot-color-electric-violet-400: #d57aff;
  --hoot-color-electric-violet-500: #c547ff;
  --hoot-color-electric-violet-600: #b623fa;
  --hoot-color-electric-violet-700: #aa17eb;
  --hoot-color-electric-violet-800: #8515b4;
  --hoot-color-electric-violet-900: #6d1390;
}

html {
  /**
   * color/text/p
   */
  --hoot-color-text-p-main: var(--hoot-color-neutral-900);
  --hoot-color-text-p-dark: var(--hoot-color-neutral-700);
  --hoot-color-text-p-light: var(--hoot-color-neutral-500);
  --hoot-color-text-p-contrast: var(--hoot-color-base-white);
  --hoot-color-text-p-disabled: var(--hoot-color-neutral-200);
  --hoot-color-text-p-brand-light: var(--hoot-color-brand-300);
  --hoot-color-text-p-brand-main: var(--hoot-color-brand-500);
  --hoot-color-text-p-brand-dark: var(--hoot-color-brand-900);

  /**
   * color/text/management
   */
  --hoot-color-text-management-neutral: var(--hoot-color-neutral-900);
  --hoot-color-text-management-neutral-contrast: var(--hoot-color-neutral-25);
  --hoot-color-text-management-success: var(--hoot-color-success-700);
  --hoot-color-text-management-succes-contrast: var(--hoot-color-success-50);
  --hoot-color-text-management-warning: var(--hoot-color-warning-900);
  --hoot-color-text-management-warning-contrast: var(--hoot-color-warning-50);
  --hoot-color-text-management-danger: var(--hoot-color-danger-500);
  --hoot-color-text-management-danger-contrast: var(--hoot-color-danger-50);

  /**
   * color/text/accent
   */
  --hoot-color-text-accent-secondary-light: var(--hoot-color-secondary-300);
  --hoot-color-text-accent-secondary-main: var(--hoot-color-secondary-500);
  --hoot-color-text-accent-secondary-dark: var(--hoot-color-secondary-900);
  --hoot-color-text-accent-tertiary-light: var(--hoot-color-tertiary-300);
  --hoot-color-text-accent-tertiary-main: var(--hoot-color-tertiary-500);
  --hoot-color-text-accent-tertiary-dark: var(--hoot-color-tertiary-900);

  /**
   * color/text/link
   */
  --hoot-color-text-link: var(--hoot-color-secondary-400);
  --hoot-color-text-link-visited: var(--hoot-color-brand-400);

  /**
   * color/surface
   */
  --hoot-color-surface-app: var(--hoot-color-background-app);
  --hoot-color-surface-app-mobile: var(--hoot-color-background-app-mobile);
  --hoot-color-surface-base-white: var(--hoot-color-base-white);
  --hoot-color-surface-base-white-contrast: var(--hoot-color-neutral-900);
  --hoot-color-surface-brand: var(--hoot-color-brand-25);
  --hoot-color-surface-secondary: var(--hoot-color-secondary-25);
  --hoot-color-surface-light: var(--hoot-color-neutral-25);
  --hoot-color-surface-main: var(--hoot-color-neutral-50);
  --hoot-color-surface-dark: var(--hoot-color-neutral-100);

  /**
   * color/surface/management
   */
  --hoot-color-surface-management-danger: var(--hoot-color-danger-25);
  --hoot-color-surface-management-danger-contrast: var(--hoot-color-danger-700);
  --hoot-color-surface-management-warning: var(--hoot-color-warning-25);
  --hoot-color-surface-management-warning-contrast: var(--hoot-color-warning-700);
  --hoot-color-surface-management-success: var(--hoot-color-success-25);
  --hoot-color-surface-management-success-contrast: var(--hoot-color-success-700);
  --hoot-color-surface-management-neutral: var(--hoot-color-neutral-50);
  --hoot-color-surface-management-neutral-contrast: var(--hoot-color-neutral-700);
  --hoot-color-surface-management-brand: var(--hoot-color-brand-50);
  --hoot-color-surface-management-brand-contrast: var(--hoot-color-brand-900);
  --hoot-color-surface-management-secondary: var(--hoot-color-secondary-50);
  --hoot-color-surface-management-secondary-contrast: var(--hoot-color-secondary-700);

  /**
   * color/chart
   */
  --hoot-color-chart-brand: var(--hoot-color-brand-300);
  --hoot-color-chart-brand-current: var(--hoot-color-brand-400);
  --hoot-color-chart-secondary: var(--hoot-color-secondary-300);
  --hoot-color-chart-secondary-current: var(--hoot-color-secondary-400);
  --hoot-color-chart-tertiary: var(--hoot-color-tertiary-300);
  --hoot-color-chart-tertiary-current: var(--hoot-color-tertiary-400);
  --hoot-color-chart-danger: var(--hoot-color-danger-500);
  --hoot-color-chart-warning: var(--hoot-color-warning-500);
  --hoot-color-chart-success: var(--hoot-color-success-500);

  --hoot-color-chart-purple-1: var(--hoot-color-brand-900);
  --hoot-color-chart-purple-2: var(--hoot-color-brand-700);
  --hoot-color-chart-purple-3: var(--hoot-color-brand-500);
  --hoot-color-chart-purple-4: var(--hoot-color-brand-200);
  --hoot-color-chart-purple-5: var(--hoot-color-brand-100);

  --hoot-color-chart-blue-1: var(--hoot-color-secondary-900);
  --hoot-color-chart-blue-2: var(--hoot-color-secondary-700);
  --hoot-color-chart-blue-3: var(--hoot-color-secondary-500);
  --hoot-color-chart-blue-4: var(--hoot-color-secondary-300);
  --hoot-color-chart-blue-5: var(--hoot-color-secondary-100);

  --hoot-color-chart-green-1: var(--hoot-color-success-900);
  --hoot-color-chart-green-2: var(--hoot-color-success-700);
  --hoot-color-chart-green-3: var(--hoot-color-success-600);
  --hoot-color-chart-green-4: var(--hoot-color-success-500);
  --hoot-color-chart-green-5: var(--hoot-color-success-300);

  --hoot-color-chart-red-1: var(--hoot-color-danger-900);
  --hoot-color-chart-red-2: var(--hoot-color-danger-700);
  --hoot-color-chart-red-3: var(--hoot-color-danger-600);
  --hoot-color-chart-red-4: var(--hoot-color-danger-300);
  --hoot-color-chart-red-5: var(--hoot-color-danger-200);

  --hoot-color-chart-orange-1: var(--hoot-color-warning-900);
  --hoot-color-chart-orange-2: var(--hoot-color-warning-700);
  --hoot-color-chart-orange-3: var(--hoot-color-warning-600);
  --hoot-color-chart-orange-4: var(--hoot-color-warning-300);
  --hoot-color-chart-orange-5: var(--hoot-color-warning-200);

  --hoot-color-chart-colorful-1: var(--hoot-color-danger-500);
  --hoot-color-chart-colorful-2: var(--hoot-color-warning-400);
  --hoot-color-chart-colorful-3: var(--hoot-color-success-500);
  --hoot-color-chart-colorful-4: var(--hoot-color-brand-400);
  --hoot-color-chart-colorful-5: var(--hoot-color-secondary-500);

  /**
   * color/border
   */
  --hoot-color-border-brand: var(--hoot-color-brand-100);
  --hoot-color-border-brand-dark: var(--hoot-color-brand-900);
  --hoot-color-border-lighter: var(--hoot-color-neutral-25);
  --hoot-color-border-light: var(--hoot-color-neutral-50);
  --hoot-color-border-neutral: var(--hoot-color-neutral-100);
  --hoot-color-border-dark: var(--hoot-color-neutral-300);
  --hoot-color-border-warning: var(--hoot-color-warning-500);
  --hoot-color-border-danger: var(--hoot-color-danger-500);
  --hoot-color-border-info: var(--hoot-color-secondary-500);
  --hoot-color-border-success: var(--hoot-color-success-600);

  /**
   * color/picker
   */
  --hoot-color-picker-light-gray: var(--hoot-color-neutral-500);
  --hoot-color-picker-grey: var(--hoot-color-neutral-800);
  --hoot-color-picker-light-red: var(--hoot-color-danger-500);
  --hoot-color-picker-red: var(--hoot-color-danger-900);
  --hoot-color-picker-light-orange: var(--hoot-color-tertiary-400);
  --hoot-color-picker-orange: var(--hoot-color-tertiary-500);
  --hoot-color-picker-light-brown: var(--hoot-color-tertiary-700);
  --hoot-color-picker-brown: var(--hoot-color-tertiary-900);
  --hoot-color-picker-light-green: var(--hoot-color-success-500);
  --hoot-color-picker-green: var(--hoot-color-success-800);
  --hoot-color-picker-light-blue: var(--hoot-color-secondary-500);
  --hoot-color-picker-blue: var(--hoot-color-secondary-800);
  --hoot-color-picker-light-brand: var(--hoot-color-brand-500);
  --hoot-color-picker-brand: var(--hoot-color-brand-900);
  --hoot-color-picker-light-purple: var(--hoot-color-purple-500);
  --hoot-color-picker-purple: var(--hoot-color-purple-800);
  --hoot-color-picker-light-pink: var(--hoot-color-pink-500);
  --hoot-color-picker-pink: var(--hoot-color-pink-800);
  --hoot-color-picker-light-electric-violet: var(--hoot-color-electric-violet-400);
  --hoot-color-picker-electric-violet: var(--hoot-color-electric-violet-900);

  /**
   * color/button
   */


  --hoot-button-full-brand-text: var(--hoot-color-brand-25);
  --hoot-button-full-brand-default-background: var(--hoot-color-brand-500);
  --hoot-button-full-brand-hover-background: var(--hoot-color-brand-700);
  --hoot-button-full-brand-pressed-background: var(--hoot-color-brand-900);

  --hoot-button-full-danger-text: var(--hoot-color-danger-25);
  --hoot-button-full-danger-default-background: var(--hoot-color-danger-500);
  --hoot-button-full-danger-hover-background: var(--hoot-color-danger-700);
  --hoot-button-full-danger-pressed-background: var(--hoot-color-danger-900);

  --hoot-button-full-warning-text: var(--hoot-color-tertiary-25);
  --hoot-button-full-warning-default-background: var(--hoot-color-tertiary-500);
  --hoot-button-full-warning-hover-background: var(--hoot-color-tertiary-600);
  --hoot-button-full-warning-pressed-background: var(--hoot-color-tertiary-700);

  --hoot-button-full-neutral-text: var(--hoot-color-neutral-25);
  --hoot-button-full-neutral-default-background: var(--hoot-color-neutral-500);
  --hoot-button-full-neutral-hover-background: var(--hoot-color-neutral-600);
  --hoot-button-full-neutral-pressed-background: var(--hoot-color-neutral-700);


  --hoot-button-outlined-brand-text: var(--hoot-color-brand-900);
  --hoot-button-outlined-brand-default-background: var(--hoot-color-base-white);
  --hoot-button-outlined-brand-default-stroke: var(--hoot-color-neutral-50);
  --hoot-button-outlined-brand-hover-background: var(--hoot-color-brand-25);
  --hoot-button-outlined-brand-hover-stroke: var(--hoot-color-brand-50);
  --hoot-button-outlined-brand-pressed-background: var(--hoot-color-brand-50);
  --hoot-button-outlined-brand-pressed-text: var(--hoot-color-brand-900);

  --hoot-button-outlined-danger-text: var(--hoot-color-danger-800);
  --hoot-button-outlined-danger-default-background: var(--hoot-color-base-white);
  --hoot-button-outlined-danger-default-stroke: var(--hoot-color-neutral-50);
  --hoot-button-outlined-danger-hover-background: var(--hoot-color-danger-25);
  --hoot-button-outlined-danger-hover-stroke: var(--hoot-color-danger-50);
  --hoot-button-outlined-danger-pressed-background: var(--hoot-color-danger-100);
  --hoot-button-outlined-danger-pressed-text: var(--hoot-color-danger-800);

  --hoot-button-outlined-warning-text: var(--hoot-color-tertiary-700);
  --hoot-button-outlined-warning-default-background: var(--hoot-color-base-white);
  --hoot-button-outlined-warning-default-stroke: var(--hoot-color-neutral-50);
  --hoot-button-outlined-warning-hover-background: var(--hoot-color-tertiary-25);
  --hoot-button-outlined-warning-hover-stroke: var(--hoot-color-tertiary-50);
  --hoot-button-outlined-warning-pressed-background: var(--hoot-color-tertiary-500);
  --hoot-button-outlined-warning-pressed-text: var(--hoot-color-tertiary-900);

  --hoot-button-outlined-neutral-text: var(--hoot-color-neutral-900);
  --hoot-button-outlined-neutral-default-background: var(--hoot-color-base-white);
  --hoot-button-outlined-neutral-default-stroke: var(--hoot-color-neutral-50);
  --hoot-button-outlined-neutral-hover-background: var(--hoot-color-neutral-25);
  --hoot-button-outlined-neutral-hover-stroke: var(--hoot-color-neutral-100);
  --hoot-button-outlined-neutral-pressed-background: var(--hoot-color-neutral-100);
  --hoot-button-outlined-neutral-pressed-text: var(--hoot-color-neutral-900);


  --hoot-button-basic-brand-text: var(--hoot-color-brand-800);
  --hoot-button-basic-brand-default-background: var(--hoot-color-base-white);
  --hoot-button-basic-brand-hover-background: var(--hoot-color-brand-25);
  --hoot-button-basic-brand-pressed-background: var(--hoot-color-brand-50);
  --hoot-button-basic-brand-pressed-text: var(--hoot-color-brand-800);

  --hoot-button-basic-danger-text: var(--hoot-color-danger-800);
  --hoot-button-basic-danger-default-background: var(--hoot-color-base-white);
  --hoot-button-basic-danger-hover-background: var(--hoot-color-danger-25);
  --hoot-button-basic-danger-pressed-background: var(--hoot-color-danger-100);
  --hoot-button-basic-danger-pressed-text: var(--hoot-color-danger-800);

  --hoot-button-basic-warning-text: var(--hoot-color-tertiary-700);
  --hoot-button-basic-warning-default-background: var(--hoot-color-base-white);
  --hoot-button-basic-warning-hover-background: var(--hoot-color-tertiary-25);
  --hoot-button-basic-warning-pressed-background: var(--hoot-color-tertiary-500);
  --hoot-button-basic-warning-pressed-text: var(--hoot-color-tertiary-800);

  --hoot-button-basic-neutral-text: var(--hoot-color-neutral-900);
  --hoot-button-basic-neutral-default-background: var(--hoot-color-base-white);
  --hoot-button-basic-neutral-hover-background: var(--hoot-color-neutral-25);
  --hoot-button-basic-neutral-pressed-background: var(--hoot-color-neutral-200);
  --hoot-button-basic-neutral-pressed-text: var(--hoot-color-neutral-900);


  --hoot-button-contrast-brand-text: var(--hoot-color-base-white);
  --hoot-button-contrast-brand-default-background: rgba(255, 255, 255, 0.15);
  --hoot-button-contrast-brand-hover-background: rgba(232, 234, 246, 0.35);
  --hoot-button-contrast-brand-pressed-background: var(--hoot-color-brand-100);
  --hoot-button-contrast-brand-hover-text: var(--hoot-color-base-white);
  --hoot-button-contrast-brand-pressed-text: var(--hoot-color-brand-800);

  --hoot-button-contrast-danger-text: var(--hoot-color-danger-700);
  --hoot-button-contrast-danger-default-background: rgba(255, 245, 246, 0.05);
  --hoot-button-contrast-danger-hover-background: var(--hoot-color-danger-25);
  --hoot-button-contrast-danger-pressed-background: var(--hoot-color-danger-100);
  --hoot-button-contrast-danger-hover-text: var(--hoot-color-danger-700);
  --hoot-button-contrast-danger-pressed-text: var(--hoot-color-danger-700);

  --hoot-button-contrast-warning-text: var(--hoot-color-tertiary-400);
  --hoot-button-contrast-warning-default-background: rgba(255, 245, 246, 0.05);
  --hoot-button-contrast-warning-hover-background: var(--hoot-color-tertiary-25);
  --hoot-button-contrast-warning-pressed-background: var(--hoot-color-tertiary-100);
  --hoot-button-contrast-warning-hover-text: var(--hoot-color-tertiary-700);
  --hoot-button-contrast-warning-pressed-text: var(--hoot-color-tertiary-700);

  --hoot-button-contrast-neutral-text: var(--hoot-color-neutral-200);
  --hoot-button-contrast-neutral-default-background: rgba(255, 245, 246, 0.05);
  --hoot-button-contrast-neutral-hover-background: var(--hoot-color-neutral-25);
  --hoot-button-contrast-neutral-pressed-background: var(--hoot-color-neutral-100);
  --hoot-button-contrast-neutral-hover-text: var(--hoot-color-neutral-900);
  --hoot-button-contrast-neutral-pressed-text: var(--hoot-color-neutral-900);

  /**
   * color/fab
   */

  --hoot-fab-brand-text: var(--hoot-color-brand-900);
  --hoot-fab-brand-default-background: var(--hoot-color-brand-100);
  --hoot-fab-brand-hover-background: var(--hoot-color-brand-200);
  --hoot-fab-brand-pressed-background: var(--hoot-color-brand-300);

  --hoot-fab-danger-text: var(--hoot-color-danger-900);
  --hoot-fab-danger-default-background: var(--hoot-color-danger-50);
  --hoot-fab-danger-hover-background: var(--hoot-color-danger-100);
  --hoot-fab-danger-pressed-background: var(--hoot-color-danger-200);

  --hoot-fab-warning-text: var(--hoot-color-tertiary-900);
  --hoot-fab-warning-default-background: var(--hoot-color-tertiary-100);
  --hoot-fab-warning-hover-background: var(--hoot-color-tertiary-200);
  --hoot-fab-warning-pressed-background: var(--hoot-color-tertiary-300);

  --hoot-fab-neutral-text: var(--hoot-color-neutral-900);
  --hoot-fab-neutral-default-background: var(--hoot-color-neutral-100);
  --hoot-fab-neutral-hover-background: var(--hoot-color-neutral-200);
  --hoot-fab-neutral-pressed-background: var(--hoot-color-neutral-300);
}

html {
  /**
   * spacing/pileup
   */
  --hoot-spacing-pileup-null: var(--hoot-scale-null);
  --hoot-spacing-pileup-xs: var(--hoot-scale-1);
  --hoot-spacing-pileup-s: var(--hoot-scale-2);
  --hoot-spacing-pileup-m: var(--hoot-scale-4);
  --hoot-spacing-pileup-l: var(--hoot-scale-6);
  --hoot-spacing-pileup-xl: var(--hoot-scale-10);

  /**
   * spacing/gap
   */
  --hoot-spacing-gap-null: var(--hoot-scale-null);
  --hoot-spacing-gap-xs: var(--hoot-scale-1);
  --hoot-spacing-gap-s: var(--hoot-scale-2);
  --hoot-spacing-gap-m: var(--hoot-scale-4);
  --hoot-spacing-gap-l: var(--hoot-scale-6);
  --hoot-spacing-gap-xl: var(--hoot-scale-10);

  /**
   * spacing/box
   */
  --hoot-spacing-box-null: var(--hoot-scale-null);
  --hoot-spacing-box-xs: var(--hoot-scale-1);
  --hoot-spacing-box-s: var(--hoot-scale-2);
  --hoot-spacing-box-m: var(--hoot-scale-4);
  --hoot-spacing-box-l: var(--hoot-scale-6);
  --hoot-spacing-box-xl: var(--hoot-scale-10);
}

html {
  --hoot-corner-rounded-null: var(--hoot-scale-null);
  --hoot-corner-rounded-s: var(--hoot-scale-1);
  --hoot-corner-rounded-m: var(--hoot-scale-2);
  --hoot-corner-rounded-l: var(--hoot-scale-4);
  --hoot-corner-rounded-xl: var(--hoot-scale-6);
  --hoot-corner-rounded-full: var(--hoot-scale-infinite);
}