/*
 * HOLY design tokens as CSS custom properties.
 * GENERATED from the Figma library AI-UI-Kit by scripts/emit-artifacts.mjs.
 * Do not hand-edit. Change the variable in Figma and re-run /sync-design-system.
 *
 * Mobile values apply at max-width 740px.
 */

:root {
  /* Primitives */
  --ds-grey-100: #F6F6F6;
  --ds-grey-200: #E3E3E3;
  --ds-grey-300: #C6C6C6;
  --ds-grey-400: #AAAAAA;
  --ds-grey-500: #8E8E8E;
  --ds-grey-600: #717171;
  --ds-grey-700: #555555;
  --ds-grey-800: #383838;
  --ds-grey-900: #1C1C1C;
  --ds-grey-black: #000000;
  --ds-grey-white: #FFFFFF;
  --ds-neutral-100: #FFF8F2;
  --ds-neutral-200: #FDF2E9;
  --ds-neutral-300: #F9ECE1;
  --ds-neutral-400: #F3E0CE;
  --ds-neutral-500: #EBCFB8;
  --ds-neutral-600: #F8DAC1;
  --ds-neutral-700: #D8C2AF;
  --ds-neutral-800: #B5A494;
  --ds-neutral-900: #B5A494;
  --ds-syrup-darko-1: #E73741;
  --ds-syrup-darko-2: #000000;
  --ds-syrup-green-1: #A2E9C3;
  --ds-syrup-green-2: #95D1B1;
  --ds-syrup-green-3: #68C292;
  --ds-syrup-green-4: #337250;
  --ds-syrup-pink-1: #EA96A9;
  --ds-syrup-rapture-1: #FCEA10;
  --ds-syrup-rapture-2: #E50B7D;
  --ds-syrup-syru-1: #C7B0D5;
  --ds-syrup-syru-2: #F1E6E5;
  --unit-10: 0.5px;
  --unit-100: 4px;
  --unit-1000: 40px;
  --unit-1100: 44px;
  --unit-1200: 48px;
  --unit-1300: 52px;
  --unit-1400: 56px;
  --unit-150: 6px;
  --unit-1500: 60px;
  --unit-1600: 64px;
  --unit-1700: 68px;
  --unit-1800: 72px;
  --unit-1900: 76px;
  --unit-200: 8px;
  --unit-2000: 80px;
  --unit-25: 1px;
  --unit-250: 10px;
  --unit-300: 12px;
  --unit-350: 14px;
  --unit-400: 16px;
  --unit-450: 18px;
  --unit-50: 2px;
  --unit-500: 20px;
  --unit-550: 22px;
  --unit-600: 24px;
  --unit-650: 26px;
  --unit-700: 28px;
  --unit-75: 3px;
  --unit-750: 30px;
  --unit-800: 32px;
  --unit-850: 34px;
  --unit-900: 36px;
  --unit-950: 38px;

  /* Color */
  --ds-background-1: var(--ds-grey-white);
  --ds-background-2: #F5F5F5;
  --ds-background-3: #D4D4D4;
  --ds-border-primary: var(--ds-grey-black);
  --ds-border-secondary: #737373;
  --ds-border-tertiary: #999999;
  --ds-disabled-a: #858585;
  --ds-disabled-b: #BDBDBD;
  --ds-disabled-c: var(--ds-grey-white);
  --ds-icon-inverse: var(--ds-grey-white);
  --ds-icon-primary: var(--ds-grey-black);
  --ds-icon-secondary: #737373;
  --ds-interactive-focus-border: var(--ds-grey-black);
  --ds-interactive-neutral-fill-active: var(--ds-grey-white);
  --ds-interactive-neutral-fill-default: var(--ds-neutral-100);
  --ds-interactive-neutral-fill-hover: var(--ds-grey-white);
  --ds-interactive-neutral-fill-pressed: var(--ds-neutral-100);
  --ds-interactive-primary-action-default: var(--ds-grey-black);
  --ds-interactive-primary-action-hover: var(--ds-grey-black);
  --ds-interactive-primary-action-pressed: var(--ds-grey-black);
  --ds-interactive-primary-border-default: var(--ds-grey-black);
  --ds-interactive-primary-border-hover: var(--ds-grey-black);
  --ds-interactive-primary-border-pressed: var(--ds-grey-black);
  --ds-interactive-primary-fill-default: rgba(0, 0, 0, 0);
  --ds-interactive-primary-fill-hover: rgba(0, 0, 0, 0.08);
  --ds-interactive-primary-fill-pressed: rgba(0, 0, 0, 0.13);
  --ds-interactive-secondary-action-default: var(--ds-grey-black);
  --ds-interactive-secondary-action-hover: var(--ds-grey-black);
  --ds-interactive-secondary-action-pressed: var(--ds-grey-black);
  --ds-interactive-secondary-border-default: var(--ds-grey-black);
  --ds-interactive-secondary-border-hover: var(--ds-grey-black);
  --ds-interactive-secondary-border-pressed: var(--ds-grey-black);
  --ds-interactive-secondary-fill-default: rgba(0, 0, 0, 0);
  --ds-interactive-secondary-fill-hover: rgba(0, 0, 0, 0.08);
  --ds-interactive-secondary-fill-pressed: rgba(0, 0, 0, 0.13);
  --ds-text-inverse: var(--ds-grey-white);
  --ds-text-positive: #00B67A;
  --ds-text-primary: var(--ds-grey-black);
  --ds-text-secondary: #737373;

  /* Space */
  --spacing-100: var(--unit-100);
  --spacing-125: var(--unit-75);
  --spacing-150: var(--unit-150);
  --spacing-200: var(--unit-200);
  --spacing-25: var(--unit-25);
  --spacing-250: var(--unit-250);
  --spacing-300: var(--unit-300);
  --spacing-350: var(--unit-350);
  --spacing-400: var(--unit-400);
  --spacing-450: var(--unit-450);
  --spacing-50: var(--unit-50);
  --spacing-500: var(--unit-500);
  --spacing-550: var(--unit-550);
  --spacing-600: var(--unit-600);
  --spacing-650: var(--unit-650);
  --spacing-700: var(--unit-700);
  --spacing-800: var(--unit-800);

  /* Typography */
  --font-family-1: "PP Agrandir";
  --font-family-2: ObviouslyNarrow;
  --font-family-3: ExtraChunkPlease;
  --letter-spacing-100: 0.5px;
  --line-height-100: 20px;
  --line-height-1000: 130px;
  --line-height-125: 26px;
  --line-height-150: 32px;
  --line-height-175: 34px;
  --line-height-200: 40px;
  --line-height-300: 46px;
  --line-height-400: 56px;
  --line-height-50: 14px;
  --line-height-500: 64px;
  --line-height-600: 72px;
  --line-height-75: 18px;
  --line-height-800: 100px;
  --line-height-body-l: 32px;
  --line-height-heading-l: 34px;
  --line-height-heading-xl: 34px;
  --font-size-100: 16px;
  --font-size-1000: 140px;
  --font-size-150: 18px;
  --font-size-200: 20px;
  --font-size-250: 24px;
  --font-size-275: 26px;
  --font-size-325: 32px;
  --font-size-450: 48px;
  --font-size-50: 11px;
  --font-size-600: 60px;
  --font-size-650: 70px;
  --font-size-700: 80px;
  --font-size-75: 14px;
  --font-size-900: 110px;
  --font-size-body-l: 24px;
  --font-size-display-l: 80px;
  --font-size-display-m: 60px;
  --font-size-display-s: 48px;
  --font-size-display-xl: 110px;
  --font-size-display-xxl: 140px;
  --font-size-heading-l: 32px;
  --font-size-heading-m: 24px;
  --font-size-heading-s: 18px;
  --font-size-heading-xl: 32px;
  --weight-black: 900;
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-medium: 600;
  --weight-regular: 400;
  --weight-super: 1100;

  /* Component */
  --btn-l-font-size: var(--font-size-200);
  --btn-l-padding-horizontal: var(--unit-400);
  --btn-l-padding-vertical: var(--unit-800);
  --btn-m-font-size: var(--font-size-100);
  --btn-m-padding-horizontal: var(--unit-400);
  --btn-m-padding-vertical: var(--unit-800);
  --btn-primary-bg-color: #FFD009;
  --btn-primary-bg-color-disabled: var(--ds-disabled-b);
  --btn-primary-border-color: var(--ds-border-primary);
  --btn-primary-border-color-disabled: var(--ds-disabled-a);
  --btn-primary-text-color: var(--ds-text-primary);
  --btn-primary-text-color-disabled: var(--ds-disabled-a);
  --btn-s-font-size: var(--font-size-100);
  --btn-s-padding-horizontal: var(--unit-500);
  --btn-s-padding-vertical: var(--unit-200);
  --btn-secondary-bg-color: #FCB4D9;
  --btn-secondary-bg-color-disabled: var(--ds-disabled-b);
  --btn-secondary-border-color: var(--ds-border-primary);
  --btn-secondary-border-color-disabled: var(--ds-disabled-a);
  --btn-secondary-text-color: var(--ds-text-primary);
  --btn-secondary-text-color-disabled: var(--ds-disabled-a);
  --btn-xs-padding-horizontal: var(--unit-100);
  --btn-xs-padding-vertical: var(--unit-100);

  /* Layout */
  --container-gutter: 40px;
  --container-max-width: 1600px;
  --grid-column-count: 20;
  --grid-gap: 20px;
  --grid-default-gutters: var(--unit-400);
  --grid-default-margins: var(--unit-800);
  --grid-default-padding: var(--unit-1000);
  --radius-large: var(--unit-300);
  --radius-medium: var(--unit-200);
  --radius-small: var(--unit-100);
  --radius-xlarge: var(--unit-400);
  --radius-xsmall: var(--unit-50);
}

@media (max-width: 740px) {
  :root {
    --spacing-100: var(--unit-50);
    --spacing-150: var(--unit-75);
    --spacing-200: var(--unit-100);
    --spacing-250: var(--unit-150);
    --spacing-300: var(--unit-200);
    --spacing-350: var(--unit-250);
    --spacing-400: var(--unit-300);
    --spacing-450: var(--unit-350);
    --spacing-50: var(--unit-25);
    --spacing-500: var(--unit-400);
    --spacing-550: var(--unit-450);
    --spacing-600: var(--unit-500);
    --spacing-650: var(--unit-550);
    --spacing-700: var(--unit-600);
    --spacing-800: var(--unit-700);
    --line-height-100: 18px;
    --line-height-1000: 70px;
    --line-height-125: 24px;
    --line-height-150: 22px;
    --line-height-175: 24px;
    --line-height-200: 26px;
    --line-height-300: 26px;
    --line-height-400: 32px;
    --line-height-50: 12px;
    --line-height-500: 36px;
    --line-height-600: 40px;
    --line-height-75: 16px;
    --line-height-800: 50px;
    --line-height-body-l: 22px;
    --line-height-heading-l: 26px;
    --line-height-heading-xl: 26px;
    --font-size-100: 14px;
    --font-size-1000: 80px;
    --font-size-150: 16px;
    --font-size-200: 18px;
    --font-size-250: 18px;
    --font-size-275: 20px;
    --font-size-325: 24px;
    --font-size-450: 28px;
    --font-size-50: 9px;
    --font-size-600: 36px;
    --font-size-650: 40px;
    --font-size-700: 44px;
    --font-size-75: 12px;
    --font-size-900: 55px;
    --font-size-body-l: 18px;
    --font-size-display-l: 44px;
    --font-size-display-m: 36px;
    --font-size-display-s: 28px;
    --font-size-display-xl: 55px;
    --font-size-display-xxl: 80px;
    --font-size-heading-l: 24px;
    --font-size-heading-m: 18px;
    --font-size-heading-s: 16px;
    --font-size-heading-xl: 24px;
    --btn-s-padding-horizontal: var(--unit-300);
    --btn-s-padding-vertical: var(--unit-150);
    --container-gutter: 20px;
    --grid-column-count: 10;
    --grid-default-margins: var(--unit-400);
    --grid-default-padding: var(--unit-700);
    --radius-large: var(--unit-250);
    --radius-medium: var(--unit-150);
    --radius-xlarge: var(--unit-300);
  }
}