/* * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. * * This file has been auto-generated. Any modifications * you make will be overwritten when the file is regenerated. * * For more information or questions, please go to #design-eng * */ :root { /* primitives */ /* font families */ --base-font-family-body: "UberMoveText"; --base-font-family-display: "UberMove"; --base-font-family-mono: "UberMoveMono"; /* font weights */ --base-font-weight-bold: 700; --base-font-weight-light: 300; --base-font-weight-medium: 500; --base-font-weight-regular: 400; /* font sizes (16px = 1rem) */ --base-font-size-10: calc(10/16*1rem); --base-font-size-12: calc(12/16*1rem); --base-font-size-14: calc(14/16*1rem); --base-font-size-16: 1rem; --base-font-size-18: calc(18/16*1rem); --base-font-size-20: calc(20/16*1rem); --base-font-size-22: calc(22/16*1rem); --base-font-size-24: calc(24/16*1rem); --base-font-size-28: calc(28/16*1rem); --base-font-size-32: calc(32/16*1rem); --base-font-size-36: calc(36/16*1rem); --base-font-size-42: calc(42/16*1rem); /* line heights (16px = 1rem) */ --base-line-height-10: calc(12/16*1rem); --base-line-height-12: 1rem; --base-line-height-14: calc(18/16*1rem); --base-line-height-16: calc(20/16*1rem); --base-line-height-18: calc(22/16*1rem); --base-line-height-20: calc(24/16*1rem); --base-line-height-24: calc(28/16*1rem); --base-line-height-28: calc(32/16*1rem); --base-line-height-32: calc(36/16*1rem); --base-line-height-36: calc(40/16*1rem); --base-line-height-42: calc(48/16*1rem); /* letter spacings (px) */ --base-letter-spacing-ls-25: 0.25px; --base-letter-spacing-ls-28: 0.28px; --base-letter-spacing-ls-30: 0.3px; --base-letter-spacing-ls-33: 0.33px; --base-letter-spacing-ls-35: 0.35px; --base-letter-spacing-ls-38: 0.38px; --base-letter-spacing-ls-neg-5: -0.05px; /* typography ramp composites — values reference primitive vars above */ /* Body L/Medium */ --base-typography-body-l-medium-font-family: var(--base-font-family-body); --base-typography-body-l-medium-font-size: var(--base-font-size-16); --base-typography-body-l-medium-line-height: var(--base-line-height-16); --base-typography-body-l-medium-font-weight: var(--base-font-weight-medium); --base-typography-body-l-medium-letter-spacing: var(--base-letter-spacing-ls-neg-5); /* Body L/Regular */ --base-typography-body-l-regular-font-family: var(--base-font-family-body); --base-typography-body-l-regular-font-size: var(--base-font-size-16); --base-typography-body-l-regular-line-height: var(--base-line-height-16); --base-typography-body-l-regular-font-weight: var(--base-font-weight-regular); --base-typography-body-l-regular-letter-spacing: var(--base-letter-spacing-ls-neg-5); /* Body M/Medium */ --base-typography-body-m-medium-font-family: var(--base-font-family-body); --base-typography-body-m-medium-font-size: var(--base-font-size-14); --base-typography-body-m-medium-line-height: var(--base-line-height-14); --base-typography-body-m-medium-font-weight: var(--base-font-weight-medium); --base-typography-body-m-medium-letter-spacing: var(--base-letter-spacing-ls-neg-5); /* Body M/Regular */ --base-typography-body-m-regular-font-family: var(--base-font-family-body); --base-typography-body-m-regular-font-size: var(--base-font-size-14); --base-typography-body-m-regular-line-height: var(--base-line-height-14); --base-typography-body-m-regular-font-weight: var(--base-font-weight-regular); --base-typography-body-m-regular-letter-spacing: var(--base-letter-spacing-ls-neg-5); /* Body S/Medium */ --base-typography-body-s-medium-font-family: var(--base-font-family-body); --base-typography-body-s-medium-font-size: var(--base-font-size-12); --base-typography-body-s-medium-line-height: var(--base-line-height-12); --base-typography-body-s-medium-font-weight: var(--base-font-weight-medium); --base-typography-body-s-medium-letter-spacing: var(--base-letter-spacing-ls-neg-5); /* Body S/Regular */ --base-typography-body-s-regular-font-family: var(--base-font-family-body); --base-typography-body-s-regular-font-size: var(--base-font-size-12); --base-typography-body-s-regular-line-height: var(--base-line-height-12); --base-typography-body-s-regular-font-weight: var(--base-font-weight-regular); --base-typography-body-s-regular-letter-spacing: var(--base-letter-spacing-ls-neg-5); /* Headline L/Bold */ --base-typography-headline-l-bold-font-family: var(--base-font-family-display); --base-typography-headline-l-bold-font-size: var(--base-font-size-20); --base-typography-headline-l-bold-line-height: var(--base-line-height-20); --base-typography-headline-l-bold-font-weight: var(--base-font-weight-bold); --base-typography-headline-l-bold-letter-spacing: var(--base-letter-spacing-ls-35); /* Headline L/Medium */ --base-typography-headline-l-medium-font-family: var(--base-font-family-display); --base-typography-headline-l-medium-font-size: var(--base-font-size-20); --base-typography-headline-l-medium-line-height: var(--base-line-height-20); --base-typography-headline-l-medium-font-weight: var(--base-font-weight-medium); --base-typography-headline-l-medium-letter-spacing: var(--base-letter-spacing-ls-30); /* Headline L/Regular */ --base-typography-headline-l-regular-font-family: var(--base-font-family-display); --base-typography-headline-l-regular-font-size: var(--base-font-size-20); --base-typography-headline-l-regular-line-height: var(--base-line-height-20); --base-typography-headline-l-regular-font-weight: var(--base-font-weight-regular); --base-typography-headline-l-regular-letter-spacing: var(--base-letter-spacing-ls-25); /* Headline M/Bold */ --base-typography-headline-m-bold-font-family: var(--base-font-family-display); --base-typography-headline-m-bold-font-size: var(--base-font-size-18); --base-typography-headline-m-bold-line-height: var(--base-line-height-18); --base-typography-headline-m-bold-font-weight: var(--base-font-weight-bold); --base-typography-headline-m-bold-letter-spacing: var(--base-letter-spacing-ls-35); /* Headline M/Medium */ --base-typography-headline-m-medium-font-family: var(--base-font-family-display); --base-typography-headline-m-medium-font-size: var(--base-font-size-18); --base-typography-headline-m-medium-line-height: var(--base-line-height-18); --base-typography-headline-m-medium-font-weight: var(--base-font-weight-medium); --base-typography-headline-m-medium-letter-spacing: var(--base-letter-spacing-ls-30); /* Headline M/Regular */ --base-typography-headline-m-regular-font-family: var(--base-font-family-display); --base-typography-headline-m-regular-font-size: var(--base-font-size-18); --base-typography-headline-m-regular-line-height: var(--base-line-height-18); --base-typography-headline-m-regular-font-weight: var(--base-font-weight-regular); --base-typography-headline-m-regular-letter-spacing: var(--base-letter-spacing-ls-25); /* Headline S/Bold */ --base-typography-headline-s-bold-font-family: var(--base-font-family-display); --base-typography-headline-s-bold-font-size: var(--base-font-size-16); --base-typography-headline-s-bold-line-height: var(--base-line-height-16); --base-typography-headline-s-bold-font-weight: var(--base-font-weight-bold); --base-typography-headline-s-bold-letter-spacing: var(--base-letter-spacing-ls-35); /* Headline S/Medium */ --base-typography-headline-s-medium-font-family: var(--base-font-family-display); --base-typography-headline-s-medium-font-size: var(--base-font-size-16); --base-typography-headline-s-medium-line-height: var(--base-line-height-16); --base-typography-headline-s-medium-font-weight: var(--base-font-weight-medium); --base-typography-headline-s-medium-letter-spacing: var(--base-letter-spacing-ls-30); /* Headline S/Regular */ --base-typography-headline-s-regular-font-family: var(--base-font-family-display); --base-typography-headline-s-regular-font-size: var(--base-font-size-16); --base-typography-headline-s-regular-line-height: var(--base-line-height-16); --base-typography-headline-s-regular-font-weight: var(--base-font-weight-regular); --base-typography-headline-s-regular-letter-spacing: var(--base-letter-spacing-ls-25); /* Headline XL/Bold */ --base-typography-headline-xl-bold-font-family: var(--base-font-family-display); --base-typography-headline-xl-bold-font-size: var(--base-font-size-24); --base-typography-headline-xl-bold-line-height: var(--base-line-height-24); --base-typography-headline-xl-bold-font-weight: var(--base-font-weight-bold); --base-typography-headline-xl-bold-letter-spacing: var(--base-letter-spacing-ls-35); /* Headline XL/Medium */ --base-typography-headline-xl-medium-font-family: var(--base-font-family-display); --base-typography-headline-xl-medium-font-size: var(--base-font-size-24); --base-typography-headline-xl-medium-line-height: var(--base-line-height-24); --base-typography-headline-xl-medium-font-weight: var(--base-font-weight-medium); --base-typography-headline-xl-medium-letter-spacing: var(--base-letter-spacing-ls-30); /* Headline XL/Regular */ --base-typography-headline-xl-regular-font-family: var(--base-font-family-display); --base-typography-headline-xl-regular-font-size: var(--base-font-size-24); --base-typography-headline-xl-regular-line-height: var(--base-line-height-24); --base-typography-headline-xl-regular-font-weight: var(--base-font-weight-regular); --base-typography-headline-xl-regular-letter-spacing: var(--base-letter-spacing-ls-25); /* Headline XS/Bold */ --base-typography-headline-xs-bold-font-family: var(--base-font-family-display); --base-typography-headline-xs-bold-font-size: var(--base-font-size-14); --base-typography-headline-xs-bold-line-height: var(--base-line-height-14); --base-typography-headline-xs-bold-font-weight: var(--base-font-weight-bold); --base-typography-headline-xs-bold-letter-spacing: var(--base-letter-spacing-ls-38); /* Headline XS/Medium */ --base-typography-headline-xs-medium-font-family: var(--base-font-family-display); --base-typography-headline-xs-medium-font-size: var(--base-font-size-14); --base-typography-headline-xs-medium-line-height: var(--base-line-height-14); --base-typography-headline-xs-medium-font-weight: var(--base-font-weight-medium); --base-typography-headline-xs-medium-letter-spacing: var(--base-letter-spacing-ls-33); /* Headline XS/Regular */ --base-typography-headline-xs-regular-font-family: var(--base-font-family-display); --base-typography-headline-xs-regular-font-size: var(--base-font-size-14); --base-typography-headline-xs-regular-line-height: var(--base-line-height-14); --base-typography-headline-xs-regular-font-weight: var(--base-font-weight-regular); --base-typography-headline-xs-regular-letter-spacing: var(--base-letter-spacing-ls-28); /* Headline XXL/Bold */ --base-typography-headline-xxl-bold-font-family: var(--base-font-family-display); --base-typography-headline-xxl-bold-font-size: var(--base-font-size-28); --base-typography-headline-xxl-bold-line-height: var(--base-line-height-28); --base-typography-headline-xxl-bold-font-weight: var(--base-font-weight-bold); --base-typography-headline-xxl-bold-letter-spacing: var(--base-letter-spacing-ls-35); /* Headline XXL/Medium */ --base-typography-headline-xxl-medium-font-family: var(--base-font-family-display); --base-typography-headline-xxl-medium-font-size: var(--base-font-size-28); --base-typography-headline-xxl-medium-line-height: var(--base-line-height-28); --base-typography-headline-xxl-medium-font-weight: var(--base-font-weight-medium); --base-typography-headline-xxl-medium-letter-spacing: var(--base-letter-spacing-ls-30); /* Headline XXL/Regular */ --base-typography-headline-xxl-regular-font-family: var(--base-font-family-display); --base-typography-headline-xxl-regular-font-size: var(--base-font-size-28); --base-typography-headline-xxl-regular-line-height: var(--base-line-height-28); --base-typography-headline-xxl-regular-font-weight: var(--base-font-weight-regular); --base-typography-headline-xxl-regular-letter-spacing: var(--base-letter-spacing-ls-25); /* Headline XXS/Bold */ --base-typography-headline-xxs-bold-font-family: var(--base-font-family-display); --base-typography-headline-xxs-bold-font-size: var(--base-font-size-12); --base-typography-headline-xxs-bold-line-height: var(--base-line-height-12); --base-typography-headline-xxs-bold-font-weight: var(--base-font-weight-bold); --base-typography-headline-xxs-bold-letter-spacing: var(--base-letter-spacing-ls-38); /* Headline XXS/Medium */ --base-typography-headline-xxs-medium-font-family: var(--base-font-family-display); --base-typography-headline-xxs-medium-font-size: var(--base-font-size-12); --base-typography-headline-xxs-medium-line-height: var(--base-line-height-12); --base-typography-headline-xxs-medium-font-weight: var(--base-font-weight-medium); --base-typography-headline-xxs-medium-letter-spacing: var(--base-letter-spacing-ls-33); /* Headline XXS/Regular */ --base-typography-headline-xxs-regular-font-family: var(--base-font-family-display); --base-typography-headline-xxs-regular-font-size: var(--base-font-size-12); --base-typography-headline-xxs-regular-line-height: var(--base-line-height-12); --base-typography-headline-xxs-regular-font-weight: var(--base-font-weight-regular); --base-typography-headline-xxs-regular-letter-spacing: var(--base-letter-spacing-ls-28); /* mono typography ramp — same scale as standard, UberMoveMono font, zero letter-spacing */ /* Mono Body L/Medium */ --base-typography-mono-body-l-medium-font-family: var(--base-font-family-mono); --base-typography-mono-body-l-medium-font-size: var(--base-font-size-16); --base-typography-mono-body-l-medium-line-height: var(--base-line-height-16); --base-typography-mono-body-l-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-body-l-medium-letter-spacing: 0; /* Mono Body L/Regular */ --base-typography-mono-body-l-regular-font-family: var(--base-font-family-mono); --base-typography-mono-body-l-regular-font-size: var(--base-font-size-16); --base-typography-mono-body-l-regular-line-height: var(--base-line-height-16); --base-typography-mono-body-l-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-body-l-regular-letter-spacing: 0; /* Mono Body M/Medium */ --base-typography-mono-body-m-medium-font-family: var(--base-font-family-mono); --base-typography-mono-body-m-medium-font-size: var(--base-font-size-14); --base-typography-mono-body-m-medium-line-height: var(--base-line-height-14); --base-typography-mono-body-m-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-body-m-medium-letter-spacing: 0; /* Mono Body M/Regular */ --base-typography-mono-body-m-regular-font-family: var(--base-font-family-mono); --base-typography-mono-body-m-regular-font-size: var(--base-font-size-14); --base-typography-mono-body-m-regular-line-height: var(--base-line-height-14); --base-typography-mono-body-m-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-body-m-regular-letter-spacing: 0; /* Mono Body S/Medium */ --base-typography-mono-body-s-medium-font-family: var(--base-font-family-mono); --base-typography-mono-body-s-medium-font-size: var(--base-font-size-12); --base-typography-mono-body-s-medium-line-height: var(--base-line-height-12); --base-typography-mono-body-s-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-body-s-medium-letter-spacing: 0; /* Mono Body S/Regular */ --base-typography-mono-body-s-regular-font-family: var(--base-font-family-mono); --base-typography-mono-body-s-regular-font-size: var(--base-font-size-12); --base-typography-mono-body-s-regular-line-height: var(--base-line-height-12); --base-typography-mono-body-s-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-body-s-regular-letter-spacing: 0; /* Mono Headline L/Bold */ --base-typography-mono-headline-l-bold-font-family: var(--base-font-family-mono); --base-typography-mono-headline-l-bold-font-size: var(--base-font-size-20); --base-typography-mono-headline-l-bold-line-height: var(--base-line-height-20); --base-typography-mono-headline-l-bold-font-weight: var(--base-font-weight-bold); --base-typography-mono-headline-l-bold-letter-spacing: 0; /* Mono Headline L/Medium */ --base-typography-mono-headline-l-medium-font-family: var(--base-font-family-mono); --base-typography-mono-headline-l-medium-font-size: var(--base-font-size-20); --base-typography-mono-headline-l-medium-line-height: var(--base-line-height-20); --base-typography-mono-headline-l-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-headline-l-medium-letter-spacing: 0; /* Mono Headline L/Regular */ --base-typography-mono-headline-l-regular-font-family: var(--base-font-family-mono); --base-typography-mono-headline-l-regular-font-size: var(--base-font-size-20); --base-typography-mono-headline-l-regular-line-height: var(--base-line-height-20); --base-typography-mono-headline-l-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-headline-l-regular-letter-spacing: 0; /* Mono Headline M/Bold */ --base-typography-mono-headline-m-bold-font-family: var(--base-font-family-mono); --base-typography-mono-headline-m-bold-font-size: var(--base-font-size-18); --base-typography-mono-headline-m-bold-line-height: var(--base-line-height-18); --base-typography-mono-headline-m-bold-font-weight: var(--base-font-weight-bold); --base-typography-mono-headline-m-bold-letter-spacing: 0; /* Mono Headline M/Medium */ --base-typography-mono-headline-m-medium-font-family: var(--base-font-family-mono); --base-typography-mono-headline-m-medium-font-size: var(--base-font-size-18); --base-typography-mono-headline-m-medium-line-height: var(--base-line-height-18); --base-typography-mono-headline-m-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-headline-m-medium-letter-spacing: 0; /* Mono Headline M/Regular */ --base-typography-mono-headline-m-regular-font-family: var(--base-font-family-mono); --base-typography-mono-headline-m-regular-font-size: var(--base-font-size-18); --base-typography-mono-headline-m-regular-line-height: var(--base-line-height-18); --base-typography-mono-headline-m-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-headline-m-regular-letter-spacing: 0; /* Mono Headline S/Bold */ --base-typography-mono-headline-s-bold-font-family: var(--base-font-family-mono); --base-typography-mono-headline-s-bold-font-size: var(--base-font-size-16); --base-typography-mono-headline-s-bold-line-height: var(--base-line-height-16); --base-typography-mono-headline-s-bold-font-weight: var(--base-font-weight-bold); --base-typography-mono-headline-s-bold-letter-spacing: 0; /* Mono Headline S/Medium */ --base-typography-mono-headline-s-medium-font-family: var(--base-font-family-mono); --base-typography-mono-headline-s-medium-font-size: var(--base-font-size-16); --base-typography-mono-headline-s-medium-line-height: var(--base-line-height-16); --base-typography-mono-headline-s-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-headline-s-medium-letter-spacing: 0; /* Mono Headline S/Regular */ --base-typography-mono-headline-s-regular-font-family: var(--base-font-family-mono); --base-typography-mono-headline-s-regular-font-size: var(--base-font-size-16); --base-typography-mono-headline-s-regular-line-height: var(--base-line-height-16); --base-typography-mono-headline-s-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-headline-s-regular-letter-spacing: 0; /* Mono Headline XL/Bold */ --base-typography-mono-headline-xl-bold-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xl-bold-font-size: var(--base-font-size-24); --base-typography-mono-headline-xl-bold-line-height: var(--base-line-height-24); --base-typography-mono-headline-xl-bold-font-weight: var(--base-font-weight-bold); --base-typography-mono-headline-xl-bold-letter-spacing: 0; /* Mono Headline XL/Medium */ --base-typography-mono-headline-xl-medium-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xl-medium-font-size: var(--base-font-size-24); --base-typography-mono-headline-xl-medium-line-height: var(--base-line-height-24); --base-typography-mono-headline-xl-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-headline-xl-medium-letter-spacing: 0; /* Mono Headline XL/Regular */ --base-typography-mono-headline-xl-regular-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xl-regular-font-size: var(--base-font-size-24); --base-typography-mono-headline-xl-regular-line-height: var(--base-line-height-24); --base-typography-mono-headline-xl-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-headline-xl-regular-letter-spacing: 0; /* Mono Headline XS/Bold */ --base-typography-mono-headline-xs-bold-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xs-bold-font-size: var(--base-font-size-14); --base-typography-mono-headline-xs-bold-line-height: var(--base-line-height-14); --base-typography-mono-headline-xs-bold-font-weight: var(--base-font-weight-bold); --base-typography-mono-headline-xs-bold-letter-spacing: 0; /* Mono Headline XS/Medium */ --base-typography-mono-headline-xs-medium-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xs-medium-font-size: var(--base-font-size-14); --base-typography-mono-headline-xs-medium-line-height: var(--base-line-height-14); --base-typography-mono-headline-xs-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-headline-xs-medium-letter-spacing: 0; /* Mono Headline XS/Regular */ --base-typography-mono-headline-xs-regular-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xs-regular-font-size: var(--base-font-size-14); --base-typography-mono-headline-xs-regular-line-height: var(--base-line-height-14); --base-typography-mono-headline-xs-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-headline-xs-regular-letter-spacing: 0; /* Mono Headline XXL/Bold */ --base-typography-mono-headline-xxl-bold-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xxl-bold-font-size: var(--base-font-size-28); --base-typography-mono-headline-xxl-bold-line-height: var(--base-line-height-28); --base-typography-mono-headline-xxl-bold-font-weight: var(--base-font-weight-bold); --base-typography-mono-headline-xxl-bold-letter-spacing: 0; /* Mono Headline XXL/Medium */ --base-typography-mono-headline-xxl-medium-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xxl-medium-font-size: var(--base-font-size-28); --base-typography-mono-headline-xxl-medium-line-height: var(--base-line-height-28); --base-typography-mono-headline-xxl-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-headline-xxl-medium-letter-spacing: 0; /* Mono Headline XXL/Regular */ --base-typography-mono-headline-xxl-regular-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xxl-regular-font-size: var(--base-font-size-28); --base-typography-mono-headline-xxl-regular-line-height: var(--base-line-height-28); --base-typography-mono-headline-xxl-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-headline-xxl-regular-letter-spacing: 0; /* Mono Headline XXS/Bold */ --base-typography-mono-headline-xxs-bold-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xxs-bold-font-size: var(--base-font-size-12); --base-typography-mono-headline-xxs-bold-line-height: var(--base-line-height-12); --base-typography-mono-headline-xxs-bold-font-weight: var(--base-font-weight-bold); --base-typography-mono-headline-xxs-bold-letter-spacing: 0; /* Mono Headline XXS/Medium */ --base-typography-mono-headline-xxs-medium-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xxs-medium-font-size: var(--base-font-size-12); --base-typography-mono-headline-xxs-medium-line-height: var(--base-line-height-12); --base-typography-mono-headline-xxs-medium-font-weight: var(--base-font-weight-medium); --base-typography-mono-headline-xxs-medium-letter-spacing: 0; /* Mono Headline XXS/Regular */ --base-typography-mono-headline-xxs-regular-font-family: var(--base-font-family-mono); --base-typography-mono-headline-xxs-regular-font-size: var(--base-font-size-12); --base-typography-mono-headline-xxs-regular-line-height: var(--base-line-height-12); --base-typography-mono-headline-xxs-regular-font-weight: var(--base-font-weight-regular); --base-typography-mono-headline-xxs-regular-letter-spacing: 0; } /* Opt-in to iOS Accessibility "Larger Text" */ @supports (font: -apple-system-body) { :root { font: -apple-system-body; } } /* * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. * * This file has been auto-generated. Any modifications * you make will be overwritten when the file is regenerated. * * For more information or questions, please go to #design-eng * */ /* * Base 2.0 Color Token Naming Convention * ======================================= * * Canonical form: [family]-[role]-[context]-[hierarchy]-[variant]-[state] * Components are omitted when implicit (neutral family, default context, etc.) * * Family: accent, error, warning, success, info (neutral is implicit) * Role: background, content, border * Context: inverse (default is implicit) * Hierarchy: primary, secondary, tertiary * Variant: bold, subtle, disabled, onbold, onsubtle, oninverse, * statelayer, decorative, accessible * State: hover, pressed * * Theming attributes (all composable, can be on same or ancestor element): * data-base-version-color="2" — opt in to v2 color tokens * data-theme="dark" — switch to dark mode (light is implicit) * data-elevated="true" — dark-elevated surface (scoped under dark) * data-product="" — product branding overrides (ai, eats, etc.) * * All custom properties are namespaced with --base- to avoid collisions. * * Examples: * --base-background-primary neutral bg, primary hierarchy * --base-accent-content-primary accent family, content role, primary * --base-error-border-accessible error family, border role, accessible variant * --base-background-inverse-primary neutral bg, inverse context, primary */ /* v2 primitives — always present, new names with no v1 conflict */ :root { --base-amber-0: #000000; --base-amber-15: #120800; --base-amber-18: #1d1001; --base-amber-23: #2a1800; --base-amber-27: #372000; --base-amber-31: #442a02; --base-amber-35: #523303; --base-amber-40: #603c02; --base-amber-44: #6f4603; --base-amber-48: #7f5001; --base-amber-53: #8d5c0c; --base-amber-57: #9e6605; --base-amber-61: #af7212; --base-amber-66: #c27e04; --base-amber-70: #d18b07; --base-amber-74: #df9906; --base-amber-79: #eda803; --base-amber-83: #f6b924; --base-amber-87: #fec95d; --base-amber-91: #feda94; --base-amber-96: #fee9c0; --base-amber-98: #fff5e3; --base-amber-99: #fffcf7; --base-amber-100: #ffffff; --base-blue-0: #000000; --base-blue-15: #000a1d; --base-blue-18: #00112a; --base-blue-23: #011c3d; --base-blue-27: #02264f; --base-blue-31: #003062; --base-blue-35: #033a74; --base-blue-40: #074688; --base-blue-44: #08519c; --base-blue-48: #0a5db3; --base-blue-53: #0669c9; --base-blue-57: #1175dd; --base-blue-61: #1185e8; --base-blue-66: #1195f2; --base-blue-70: #33a3fc; --base-blue-74: #59b0fd; --base-blue-79: #79bdfc; --base-blue-83: #93cafe; --base-blue-87: #afd7fd; --base-blue-91: #c8e4fe; --base-blue-96: #dfeffe; --base-blue-98: #f0f7ff; --base-blue-99: #fbfdff; --base-blue-100: #ffffff; --base-gradient-blue-0: #01233f; --base-gradient-blue-15: #012849; --base-gradient-blue-18: #022d52; --base-gradient-blue-23: #03325d; --base-gradient-blue-27: #043768; --base-gradient-blue-31: #043c74; --base-gradient-blue-35: #054181; --base-gradient-blue-40: #06458f; --base-gradient-blue-44: #074a9e; --base-gradient-blue-48: #094ead; --base-gradient-blue-53: #044fc4; --base-gradient-blue-57: #014fdd; --base-gradient-blue-61: #0e4ff2; --base-gradient-blue-66: #2355fa; --base-gradient-blue-70: #355efb; --base-gradient-blue-74: #4466fc; --base-gradient-blue-79: #526efd; --base-gradient-blue-83: #5e75fe; --base-gradient-blue-87: #6c7efa; --base-gradient-blue-91: #7785fc; --base-gradient-blue-96: #828cfe; --base-gradient-blue-98: #8e94fb; --base-gradient-blue-99: #989bfe; --base-gradient-blue-100: #a2a3fd; --base-gradient-indigo-0: #0c088c; --base-gradient-indigo-15: #140696; --base-gradient-indigo-18: #1b02a1; --base-gradient-indigo-23: #220ba5; --base-gradient-indigo-27: #2905b0; --base-gradient-indigo-31: #2f0fb5; --base-gradient-indigo-35: #3608bf; --base-gradient-indigo-40: #3d11c4; --base-gradient-indigo-44: #4509cf; --base-gradient-indigo-48: #4c13d4; --base-gradient-indigo-53: #541bd8; --base-gradient-indigo-57: #5c21dc; --base-gradient-indigo-61: #6427e1; --base-gradient-indigo-66: #6e2ce5; --base-gradient-indigo-70: #7732e9; --base-gradient-indigo-74: #8137ed; --base-gradient-indigo-79: #8c3cf1; --base-gradient-indigo-83: #9740f4; --base-gradient-indigo-87: #a245f7; --base-gradient-indigo-91: #ad4afa; --base-gradient-indigo-96: #b84efc; --base-gradient-indigo-98: #c453fe; --base-gradient-indigo-99: #cc5dfb; --base-gradient-indigo-100: #d761fd; --base-gradient-red-0: #46021a; --base-gradient-red-15: #53031f; --base-gradient-red-18: #600424; --base-gradient-red-23: #6e0428; --base-gradient-red-27: #7d012d; --base-gradient-red-31: #8a0831; --base-gradient-red-35: #9a0134; --base-gradient-red-40: #a80737; --base-gradient-red-44: #b70e37; --base-gradient-red-48: #c61432; --base-gradient-red-53: #d90220; --base-gradient-red-57: #e32112; --base-gradient-red-61: #e83c13; --base-gradient-red-66: #ed4f17; --base-gradient-red-70: #f65b07; --base-gradient-red-74: #fa6b16; --base-gradient-red-79: #fd7924; --base-gradient-red-83: #fd893d; --base-gradient-red-87: #fe9752; --base-gradient-red-91: #fca569; --base-gradient-red-96: #ffb179; --base-gradient-red-98: #ffbd8c; --base-gradient-red-99: #fecaa0; --base-gradient-red-100: #ffd5b2; --base-green-0: #000000; --base-green-15: #000f01; --base-green-18: #001702; --base-green-23: #012406; --base-green-27: #01300c; --base-green-31: #013c14; --base-green-35: #00491c; --base-green-40: #095627; --base-green-44: #05632f; --base-green-48: #10723a; --base-green-53: #098042; --base-green-57: #17904e; --base-green-61: #11a156; --base-green-66: #1db061; --base-green-70: #06c167; --base-green-74: #32ce73; --base-green-79: #55d981; --base-green-83: #75e190; --base-green-87: #94e9a2; --base-green-91: #b3f3b7; --base-green-96: #ccfbcb; --base-green-98: #e6ffe3; --base-green-99: #f8fff7; --base-green-100: #ffffff; --base-indigo-0: #000000; --base-indigo-15: #0a0421; --base-indigo-18: #11082f; --base-indigo-23: #1c1044; --base-indigo-27: #261858; --base-indigo-31: #301f6b; --base-indigo-35: #3b277f; --base-indigo-40: #462f97; --base-indigo-44: #5137ac; --base-indigo-48: #5d44bd; --base-indigo-53: #6852cb; --base-indigo-57: #745fda; --base-indigo-61: #7f6ce8; --base-indigo-66: #8b79f7; --base-indigo-70: #988afc; --base-indigo-74: #a59bfd; --base-indigo-79: #b2acfc; --base-indigo-83: #bfbbfe; --base-indigo-87: #ceccfd; --base-indigo-91: #dddcfe; --base-indigo-96: #ebeafe; --base-indigo-98: #f6f5ff; --base-indigo-99: #fcfcff; --base-indigo-100: #ffffff; --base-lime-0: #000000; --base-lime-15: #040e00; --base-lime-18: #081601; --base-lime-23: #102201; --base-lime-27: #182e02; --base-lime-31: #203900; --base-lime-35: #294502; --base-lime-40: #335203; --base-lime-44: #3d5e00; --base-lime-48: #496b0a; --base-lime-53: #547803; --base-lime-57: #60850b; --base-lime-61: #6b9313; --base-lime-66: #77a019; --base-lime-70: #84b008; --base-lime-74: #91c012; --base-lime-79: #9dcf18; --base-lime-83: #aadd32; --base-lime-87: #b9ea53; --base-lime-91: #ccf484; --base-lime-96: #defbb0; --base-lime-98: #ecffd1; --base-lime-99: #fafff2; --base-lime-100: #ffffff; --base-magenta-0: #000000; --base-magenta-15: #1b000c; --base-magenta-18: #270114; --base-magenta-23: #38021f; --base-magenta-27: #4b012b; --base-magenta-31: #5b0336; --base-magenta-35: #6e0141; --base-magenta-40: #81044e; --base-magenta-44: #940359; --base-magenta-48: #a90267; --base-magenta-53: #ba1073; --base-magenta-57: #c9277f; --base-magenta-61: #d8388c; --base-magenta-66: #e84899; --base-magenta-70: #f757a6; --base-magenta-74: #fc74b3; --base-magenta-79: #fd8dbe; --base-magenta-83: #fda5ca; --base-magenta-87: #febcd6; --base-magenta-91: #fed2e3; --base-magenta-96: #fee4ee; --base-magenta-98: #fff3f7; --base-magenta-99: #fffbfd; --base-magenta-100: #ffffff; --base-membership-0: #000000; --base-membership-15: #100803; --base-membership-18: #1e0f00; --base-membership-23: #2b1701; --base-membership-27: #382001; --base-membership-31: #452902; --base-membership-35: #533204; --base-membership-40: #623c02; --base-membership-44: #704502; --base-membership-48: #7e500b; --base-membership-53: #8e5a09; --base-membership-57: #9f6402; --base-membership-61: #ad711d; --base-membership-66: #bc7f2f; --base-membership-70: #cc8e40; --base-membership-74: #dc9d50; --base-membership-79: #ebab5e; --base-membership-83: #f9b96c; --base-membership-87: #feca87; --base-membership-91: #fedba9; --base-membership-96: #feeac8; --base-membership-98: #fff5e1; --base-membership-99: #fffcf6; --base-membership-100: #ffffff; --base-neutral-0: #000000; --base-neutral-15: #0a0a0a; --base-neutral-18: #111111; --base-neutral-23: #1c1c1c; --base-neutral-27: #272727; --base-neutral-31: #313131; --base-neutral-35: #3b3b3b; --base-neutral-40: #474747; --base-neutral-44: #525252; --base-neutral-48: #5f5f5f; --base-neutral-53: #6b6b6b; --base-neutral-57: #777777; --base-neutral-61: #838383; --base-neutral-66: #909090; --base-neutral-70: #9d9d9d; --base-neutral-74: #aaaaaa; --base-neutral-79: #b7b7b7; --base-neutral-83: #c4c4c4; --base-neutral-87: #d2d2d2; --base-neutral-91: #e0e0e0; --base-neutral-96: #ececec; --base-neutral-98: #f6f6f6; --base-neutral-99: #fcfcfc; --base-neutral-100: #ffffff; --base-orange-0: #000000; --base-orange-15: #180400; --base-orange-18: #260800; --base-orange-23: #340f00; --base-orange-27: #421701; --base-orange-31: #502002; --base-orange-35: #602800; --base-orange-40: #6e3202; --base-orange-44: #7c3c08; --base-orange-48: #8d4603; --base-orange-53: #9c5109; --base-orange-57: #ac5c10; --base-orange-61: #c16808; --base-orange-66: #d47614; --base-orange-70: #ec8102; --base-orange-74: #fc9026; --base-orange-79: #fea65d; --base-orange-83: #ffb984; --base-orange-87: #fecaa4; --base-orange-91: #fed9be; --base-orange-96: #ffe8d6; --base-orange-98: #fff4ec; --base-orange-99: #fffcf9; --base-orange-100: #ffffff; --base-purple-0: #000000; --base-purple-15: #120022; --base-purple-18: #1b0031; --base-purple-23: #290245; --base-purple-27: #370459; --base-purple-31: #45026f; --base-purple-35: #520782; --base-purple-40: #63009c; --base-purple-44: #7010ae; --base-purple-48: #8112c7; --base-purple-53: #8e29d5; --base-purple-57: #9b3ae3; --base-purple-61: #a84af2; --base-purple-66: #b45dfb; --base-purple-70: #bc76fb; --base-purple-74: #c58afc; --base-purple-79: #cd9ffc; --base-purple-83: #d7b1fd; --base-purple-87: #e0c4fd; --base-purple-91: #ead7fe; --base-purple-96: #f2e7fe; --base-purple-98: #f9f4ff; --base-purple-99: #fdfcff; --base-purple-100: #ffffff; --base-red-0: #000000; --base-red-15: #1b0100; --base-red-18: #280200; --base-red-23: #3a0501; --base-red-27: #4e0600; --base-red-31: #5e0c02; --base-red-35: #720d00; --base-red-40: #851402; --base-red-44: #9b1b06; --base-red-48: #b4230b; --base-red-53: #cc2609; --base-red-57: #e42500; --base-red-61: #f3381b; --base-red-66: #fc4f34; --base-red-70: #fc6a52; --base-red-74: #fd8069; --base-red-79: #fe9783; --base-red-83: #feac9c; --base-red-87: #fec1b5; --base-red-91: #fed5cd; --base-red-96: #fee6e1; --base-red-98: #fff4f1; --base-red-99: #fffcfb; --base-red-100: #ffffff; --base-taupe-0: #000000; --base-taupe-15: #0d0905; --base-taupe-18: #15110b; --base-taupe-23: #211b14; --base-taupe-27: #2c261e; --base-taupe-31: #363027; --base-taupe-35: #413a32; --base-taupe-40: #4d463d; --base-taupe-44: #585148; --base-taupe-48: #655e54; --base-taupe-53: #716a60; --base-taupe-57: #7d766c; --base-taupe-61: #8a8278; --base-taupe-66: #978f85; --base-taupe-70: #a49c92; --base-taupe-74: #b2aaa0; --base-taupe-79: #c0b8ae; --base-taupe-83: #cec5bb; --base-taupe-87: #dbd3c8; --base-taupe-91: #e9e0d7; --base-taupe-96: #f3ece4; --base-taupe-98: #fbf6ef; --base-taupe-99: #fffcf9; --base-taupe-100: #ffffff; --base-teal-0: #000000; --base-teal-15: #000d11; --base-teal-18: #00151a; --base-teal-23: #012127; --base-teal-27: #012d33; --base-teal-31: #03383e; --base-teal-35: #00444b; --base-teal-40: #035157; --base-teal-44: #025e63; --base-teal-48: #016c71; --base-teal-53: #0f7a7e; --base-teal-57: #06888c; --base-teal-61: #13959a; --base-teal-66: #1ca3a8; --base-teal-70: #06b2b8; --base-teal-74: #2ac0c5; --base-teal-79: #3fced3; --base-teal-83: #54dbe0; --base-teal-87: #7ae6ea; --base-teal-91: #a5f0f2; --base-teal-96: #c9f7f8; --base-teal-98: #e3fdfd; --base-teal-99: #f6ffff; --base-teal-100: #ffffff; --base-yellow-0: #000000; --base-yellow-15: #0f0900; --base-yellow-18: #1a1200; --base-yellow-23: #251b00; --base-yellow-27: #302502; --base-yellow-31: #3c2e01; --base-yellow-35: #483902; --base-yellow-40: #554301; --base-yellow-44: #614e01; --base-yellow-48: #6e5a0b; --base-yellow-53: #7b6609; --base-yellow-57: #897202; --base-yellow-61: #977f0f; --base-yellow-66: #a78d02; --base-yellow-70: #b79b10; --base-yellow-74: #c6aa1a; --base-yellow-79: #d4b71f; --base-yellow-83: #e3c522; --base-yellow-87: #f1d223; --base-yellow-91: #ffde21; --base-yellow-96: #feeb90; --base-yellow-98: #fff5c6; --base-yellow-99: #fffced; --base-yellow-100: #ffffff; } /* v2 colored material backgrounds (Herocon) — theme-independent gradients */ [data-base-version-color="2"] { --base-red-background-material-bold: linear-gradient( to top left, #f43b00 0%, #e42500 100% ); --base-red-background-material-bold-stop-0: #f43b00; --base-red-background-material-bold-stop-100: #e42500; --base-orange-background-material-bold: linear-gradient( to top left, #fc993c 0%, #fb762e 100% ); --base-orange-background-material-bold-stop-0: #fc993c; --base-orange-background-material-bold-stop-100: #fb762e; --base-yellow-background-material-bold: linear-gradient( to top left, #f7e431 0%, #f1d223 100% ); --base-yellow-background-material-bold-stop-0: #f7e431; --base-yellow-background-material-bold-stop-100: #f1d223; --base-green-background-material-bold: linear-gradient( to top left, #0ca555 0%, #098042 100% ); --base-green-background-material-bold-stop-0: #0ca555; --base-green-background-material-bold-stop-100: #098042; --base-blue-background-material-bold: linear-gradient( to top left, #1697e7 0%, #1175dd 100% ); --base-blue-background-material-bold-stop-0: #1697e7; --base-blue-background-material-bold-stop-100: #1175dd; --base-crimson-background-material-bold: linear-gradient( to top left, #e0336c 0%, #d32753 100% ); --base-crimson-background-material-bold-stop-0: #e0336c; --base-crimson-background-material-bold-stop-100: #d32753; } /* v2 light semantics */ :root[data-base-version-color="2"], [data-base-version-color="2"] { --base-background-base: var(--base-neutral-99); --base-background-primary: var(--base-neutral-100); --base-background-secondary: var(--base-neutral-98); --base-background-tertiary: var(--base-neutral-96); --base-background-disabled: rgba(224, 224, 224, 0.6); --base-background-always-dark: var(--base-neutral-0); --base-background-always-light: var(--base-neutral-100); --base-background-track: rgba(107, 107, 107, 0.06); --base-error-background-bold: var(--base-red-53); --base-error-background-subtle: var(--base-red-96); --base-error-background-disabled: rgba(254, 230, 225, 0.75); --base-error-background-statelayer-hover: rgba(254, 230, 225, 0.25); --base-error-background-statelayer-pressed: rgba(254, 230, 225, 0.5); --base-warning-background-bold: var(--base-orange-74); --base-warning-background-subtle: var(--base-orange-96); --base-warning-background-disabled: rgba(255, 232, 214, 0.75); --base-success-background-bold: var(--base-green-53); --base-success-background-subtle: var(--base-green-98); --base-success-background-disabled: rgba(204, 251, 203, 0.75); --base-info-background-bold: var(--base-neutral-18); --base-info-background-subtle: var(--base-neutral-96); --base-info-background-disabled: rgba(224, 224, 224, 0.75); --base-accent-background-primary-bold: var(--base-blue-57); --base-accent-background-primary-subtle: var(--base-blue-98); --base-accent-background-primary-disabled: rgba(223, 239, 254, 0.75); --base-background-inverse-primary: var(--base-neutral-18); --base-background-inverse-secondary: var(--base-neutral-27); --base-background-inverse-statelayer-hover: rgba(236, 236, 236, 0.15); --base-background-inverse-statelayer-pressed: rgba(236, 236, 236, 0.2); --base-background-material-primary: rgba(255, 255, 255, 0.82); --base-background-material-secondary: rgba(255, 255, 255, 0.96); --base-background-material-tertiary: rgba(252, 252, 252, 0.98); --base-background-overlay-art: rgba(255, 255, 255, 0); --base-background-statelayer-hover: rgba(17, 17, 17, 0.06); --base-background-statelayer-pressed: rgba(17, 17, 17, 0.1); --base-content-primary: var(--base-neutral-18); --base-content-secondary: var(--base-neutral-44); --base-content-tertiary: var(--base-neutral-53); --base-content-disabled: var(--base-neutral-83); --base-content-always-dark: var(--base-neutral-18); --base-content-always-light: var(--base-neutral-96); --base-error-content-primary: var(--base-red-53); --base-error-content-onbold: var(--base-red-99); --base-error-content-onsubtle: var(--base-red-48); --base-error-content-disabled: var(--base-red-79); --base-error-content-oninverse: var(--base-red-83); --base-warning-content-primary: var(--base-orange-53); --base-warning-content-onbold: var(--base-orange-15); --base-warning-content-onsubtle: var(--base-orange-48); --base-warning-content-disabled: var(--base-orange-79); --base-warning-content-oninverse: var(--base-orange-83); --base-success-content-primary: var(--base-green-48); --base-success-content-onbold: var(--base-green-99); --base-success-content-onsubtle: var(--base-green-40); --base-success-content-disabled: var(--base-green-79); --base-success-content-oninverse: var(--base-green-83); --base-info-content-primary: var(--base-neutral-53); --base-info-content-onbold: var(--base-neutral-96); --base-info-content-onsubtle: var(--base-neutral-40); --base-info-content-disabled: var(--base-neutral-79); --base-info-content-oninverse: var(--base-neutral-83); --base-accent-content-primary: var(--base-blue-53); --base-accent-content-primary-onbold: var(--base-blue-100); --base-accent-content-primary-onsubtle: var(--base-blue-40); --base-accent-content-primary-disabled: var(--base-blue-79); --base-content-inverse-primary: var(--base-neutral-99); --base-content-inverse-secondary: var(--base-neutral-87); --base-content-inverse-tertiary: var(--base-neutral-74); --base-content-legal: var(--base-blue-53); --base-accent-content-ongradient: var(--base-neutral-100); --base-border-accessible: var(--base-neutral-61); --base-border-bold: var(--base-neutral-18); --base-border-subtle: rgba(196, 196, 196, 0.65); --base-accent-border-primary-bold: var(--base-blue-57); --base-accent-border-primary-subtle: rgba(175, 215, 253, 0.7); --base-accent-border-primary-accessible: var(--base-blue-57); --base-error-border-bold: var(--base-red-57); --base-error-border-subtle: rgba(254, 172, 156, 0.7); --base-error-border-accessible: var(--base-red-61); --base-warning-border-bold: var(--base-orange-74); --base-warning-border-subtle: rgba(255, 185, 132, 0.7); --base-warning-border-accessible: var(--base-orange-61); --base-success-border-bold: var(--base-green-70); --base-success-border-subtle: rgba(117, 225, 144, 0.7); --base-success-border-accessible: var(--base-green-57); --base-info-border-bold: var(--base-neutral-18); --base-info-border-subtle: rgba(196, 196, 196, 0.7); --base-info-border-accessible: var(--base-neutral-61); --base-content-green-material-onbold: var(--base-neutral-100); --base-border-inverse-bold: var(--base-neutral-96); --base-content-red-material-onbold: var(--base-neutral-100); --base-border-inverse-subtle: rgba(71, 71, 71, 0.7); --base-content-orange-material-onbold: var(--base-neutral-0); --base-border-inverse-accessible: var(--base-neutral-57); --base-border-material-primary: rgba(255, 255, 255, 0.4); --base-content-yellow-material-onbold: var(--base-neutral-0); --base-border-material-secondary: var(--base-neutral-100); --base-content-blue-material-onbold: var(--base-neutral-100); --base-border-material-tertiary: var(--base-neutral-100); --base-accent-gradient-stop-1: var(--base-gradient-blue-35); --base-content-crimson-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-2: var(--base-gradient-blue-48); --base-accent-gradient-stop-3: var(--base-gradient-blue-66); --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.06); --base-gradient-scrim-stop-2: rgba(17, 17, 17, 0.16); --base-gradient-scrim-stop-3: rgba(0, 0, 0, 0.54); --base-background-scrim: linear-gradient( 180deg, var(--base-gradient-scrim-stop-1) 0%, var(--base-gradient-scrim-stop-2) 30%, var(--base-gradient-scrim-stop-3) 65% ); color-scheme: light; } /* offers overrides (light) */ :root[data-base-version-color="2"] [data-product="offers"], :root[data-base-version-color="2"][data-product="offers"], [data-base-version-color="2"] [data-product="offers"], [data-base-version-color="2"][data-product="offers"] { --base-accent-background-primary-bold: var(--base-red-57); --base-accent-content-primary-onsubtle: var(--base-red-40); --base-accent-background-primary-subtle: var(--base-red-91); --base-accent-background-primary-disabled: rgba(254, 230, 225, 0.75); --base-accent-content-primary: var(--base-red-57); --base-accent-gradient-stop-3: var(--base-red-66); --base-accent-content-primary-disabled: var(--base-red-79); --base-accent-gradient-stop-2: var(--base-red-48); --base-accent-gradient-stop-1: var(--base-red-35); --base-accent-border-primary-subtle: rgba(254, 172, 156, 0.7); --base-accent-border-primary-accessible: var(--base-red-57); --base-accent-content-primary-onbold: var(--base-red-100); --base-accent-border-primary-bold: var(--base-red-57); } /* membership overrides (light) */ :root[data-base-version-color="2"] [data-product="membership"], :root[data-base-version-color="2"][data-product="membership"], [data-base-version-color="2"] [data-product="membership"], [data-base-version-color="2"][data-product="membership"] { --base-accent-border-primary-bold: var(--base-membership-57); --base-accent-background-primary-bold: var(--base-membership-57); --base-accent-content-primary-onbold: var(--base-neutral-100); --base-accent-background-primary-disabled: rgba(254, 234, 200, 0.75); --base-accent-content-primary: var(--base-membership-57); --base-accent-gradient-stop-3: var(--base-membership-48); --base-accent-content-primary-disabled: var(--base-membership-79); --base-accent-background-primary-subtle: var(--base-membership-98); --base-accent-content-primary-onsubtle: var(--base-membership-57); --base-accent-gradient-stop-2: var(--base-membership-57); --base-accent-gradient-stop-1: var(--base-membership-61); --base-accent-border-primary-subtle: rgba(254, 202, 135, 0.87); --base-accent-border-primary-accessible: var(--base-membership-57); } /* ai overrides (light) */ :root[data-base-version-color="2"] [data-product="ai"], :root[data-base-version-color="2"][data-product="ai"], [data-base-version-color="2"] [data-product="ai"], [data-base-version-color="2"][data-product="ai"] { --base-accent-border-primary-subtle: rgba(191, 187, 254, 0.7); --base-accent-content-primary-onsubtle: var(--base-indigo-40); --base-accent-background-primary-subtle: var(--base-indigo-96); --base-accent-content-primary: var(--base-indigo-48); --base-accent-background-primary-disabled: rgba(235, 234, 254, 0.75); --base-accent-content-primary-onbold: var(--base-indigo-100); --base-accent-border-primary-bold: var(--base-indigo-57); --base-accent-border-primary-accessible: var(--base-indigo-53); --base-accent-content-primary-disabled: var(--base-indigo-74); --base-accent-gradient-stop-3: var(--base-indigo-66); --base-accent-background-primary-bold: var(--base-indigo-53); --base-accent-gradient-stop-1: var(--base-indigo-35); --base-accent-gradient-stop-2: var(--base-indigo-48); } /* eats overrides (light) */ :root[data-base-version-color="2"] [data-product="eats"], :root[data-base-version-color="2"][data-product="eats"], [data-base-version-color="2"] [data-product="eats"], [data-base-version-color="2"][data-product="eats"] { --base-accent-border-primary-subtle: rgba(117, 225, 144, 0.7); --base-accent-background-primary-subtle: var(--base-green-98); --base-accent-content-primary-onsubtle: var(--base-green-40); --base-accent-gradient-stop-1: var(--base-green-35); --base-accent-gradient-stop-2: var(--base-green-48); --base-accent-background-primary-bold: var(--base-green-53); --base-accent-content-primary-onbold: var(--base-green-100); --base-accent-border-primary-bold: var(--base-green-57); --base-accent-border-primary-accessible: var(--base-green-53); --base-accent-content-primary-disabled: var(--base-green-74); --base-accent-gradient-stop-3: var(--base-green-66); --base-accent-background-primary-disabled: var(--base-green-98); --base-accent-content-primary: var(--base-green-48); } /* v2 dark semantics */ [data-base-version-color="2"][data-theme="dark"], [data-theme="dark"] [data-base-version-color="2"] { --base-background-base: var(--base-neutral-18); --base-background-primary: var(--base-neutral-23); --base-background-secondary: var(--base-neutral-27); --base-background-tertiary: var(--base-neutral-35); --base-background-disabled: rgba(71, 71, 71, 0.6); --base-background-always-dark: var(--base-neutral-27); --base-background-always-light: var(--base-neutral-91); --base-background-track: rgba(95, 95, 95, 0.2); --base-error-background-bold: var(--base-red-53); --base-error-background-subtle: var(--base-red-23); --base-error-background-disabled: rgba(78, 6, 0, 0.75); --base-error-background-statelayer-hover: rgba(58, 5, 1, 0.2); --base-error-background-statelayer-pressed: rgba(58, 5, 1, 0.35); --base-warning-background-bold: var(--base-orange-70); --base-warning-background-subtle: var(--base-orange-27); --base-warning-background-disabled: rgba(80, 32, 2, 0.8); --base-success-background-bold: var(--base-green-66); --base-success-background-subtle: var(--base-green-27); --base-success-background-disabled: rgba(1, 60, 20, 0.75); --base-info-background-bold: var(--base-neutral-91); --base-info-background-subtle: var(--base-neutral-35); --base-info-background-disabled: rgba(71, 71, 71, 0.75); --base-accent-background-primary-bold: var(--base-blue-66); --base-accent-background-primary-subtle: var(--base-blue-23); --base-accent-background-primary-disabled: rgba(2, 38, 79, 0.75); --base-background-inverse-primary: var(--base-neutral-91); --base-background-inverse-secondary: var(--base-neutral-87); --base-background-inverse-statelayer-hover: rgba(17, 17, 17, 0.15); --base-background-inverse-statelayer-pressed: rgba(17, 17, 17, 0.2); --base-background-material-primary: rgba(39, 39, 39, 0.9); --base-background-material-secondary: rgba(39, 39, 39, 0.96); --base-background-material-tertiary: rgba(39, 39, 39, 0.98); --base-background-overlay-art: rgba(0, 0, 0, 0.16); --base-background-statelayer-hover: rgba(236, 236, 236, 0.1); --base-background-statelayer-pressed: rgba(236, 236, 236, 0.15); --base-content-primary: var(--base-neutral-96); --base-content-secondary: var(--base-neutral-87); --base-content-tertiary: var(--base-neutral-74); --base-content-disabled: var(--base-neutral-44); --base-content-always-dark: var(--base-neutral-18); --base-content-always-light: var(--base-neutral-96); --base-error-content-primary: var(--base-red-79); --base-error-content-onbold: var(--base-red-99); --base-error-content-onsubtle: var(--base-red-87); --base-error-content-disabled: var(--base-red-44); --base-error-content-oninverse: var(--base-red-35); --base-warning-content-primary: var(--base-orange-74); --base-warning-content-onbold: var(--base-orange-15); --base-warning-content-onsubtle: var(--base-orange-91); --base-warning-content-disabled: var(--base-orange-53); --base-warning-content-oninverse: var(--base-orange-35); --base-success-content-primary: var(--base-green-74); --base-success-content-onbold: var(--base-green-15); --base-success-content-onsubtle: var(--base-green-91); --base-success-content-disabled: var(--base-green-48); --base-success-content-oninverse: var(--base-green-35); --base-info-content-primary: var(--base-neutral-74); --base-info-content-onbold: var(--base-neutral-18); --base-info-content-onsubtle: var(--base-neutral-91); --base-info-content-disabled: var(--base-neutral-53); --base-info-content-oninverse: var(--base-neutral-35); --base-accent-content-primary: var(--base-blue-74); --base-accent-content-primary-onbold: var(--base-blue-0); --base-accent-content-primary-onsubtle: var(--base-blue-91); --base-accent-content-primary-disabled: var(--base-blue-48); --base-content-inverse-primary: var(--base-neutral-18); --base-content-inverse-secondary: var(--base-neutral-27); --base-content-inverse-tertiary: var(--base-neutral-40); --base-content-legal: var(--base-blue-74); --base-accent-content-ongradient: var(--base-neutral-100); --base-border-accessible: var(--base-neutral-66); --base-border-bold: var(--base-neutral-96); --base-border-subtle: rgba(107, 107, 107, 0.65); --base-accent-border-primary-bold: var(--base-blue-74); --base-accent-border-primary-subtle: rgba(17, 117, 221, 0.3); --base-accent-border-primary-accessible: var(--base-blue-74); --base-error-border-bold: var(--base-red-70); --base-error-border-subtle: rgba(243, 56, 27, 0.3); --base-error-border-accessible: var(--base-red-66); --base-warning-border-bold: var(--base-orange-74); --base-warning-border-subtle: rgba(172, 92, 16, 0.3); --base-warning-border-accessible: var(--base-orange-66); --base-success-border-bold: var(--base-green-70); --base-success-border-subtle: rgba(23, 144, 78, 0.3); --base-success-border-accessible: var(--base-green-66); --base-info-border-bold: var(--base-neutral-96); --base-info-border-subtle: rgba(119, 119, 119, 0.7); --base-info-border-accessible: var(--base-neutral-66); --base-content-green-material-onbold: var(--base-neutral-100); --base-border-inverse-bold: var(--base-neutral-18); --base-content-red-material-onbold: var(--base-neutral-100); --base-border-inverse-subtle: rgba(224, 224, 224, 0.7); --base-content-orange-material-onbold: var(--base-neutral-0); --base-border-inverse-accessible: var(--base-neutral-53); --base-border-material-primary: rgba(236, 236, 236, 0); --base-content-yellow-material-onbold: var(--base-neutral-0); --base-border-material-secondary: rgba(255, 255, 255, 0); --base-content-blue-material-onbold: var(--base-neutral-100); --base-border-material-tertiary: rgba(236, 236, 236, 0); --base-accent-gradient-stop-1: var(--base-gradient-blue-35); --base-content-crimson-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-2: var(--base-gradient-blue-48); --base-accent-gradient-stop-3: var(--base-gradient-blue-66); --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.72); --base-gradient-scrim-stop-2: rgba(10, 10, 10, 0.54); --base-gradient-scrim-stop-3: rgba(10, 10, 10, 0.54); --base-background-scrim: linear-gradient( 180deg, var(--base-gradient-scrim-stop-1) 0%, var(--base-gradient-scrim-stop-2) 30%, var(--base-gradient-scrim-stop-3) 100% ); color-scheme: dark; } /* offers overrides (dark) */ [data-base-version-color="2"][data-theme="dark"] [data-product="offers"], [data-base-version-color="2"][data-theme="dark"][data-product="offers"], [data-theme="dark"] [data-base-version-color="2"] [data-product="offers"], [data-theme="dark"] [data-base-version-color="2"][data-product="offers"] { --base-accent-background-primary-bold: var(--base-red-57); --base-accent-content-primary-onsubtle: var(--base-red-91); --base-accent-background-primary-subtle: var(--base-red-40); --base-accent-background-primary-disabled: rgba(78, 6, 0, 0.75); --base-accent-content-primary: var(--base-red-79); --base-accent-gradient-stop-3: var(--base-red-66); --base-accent-content-primary-disabled: var(--base-red-44); --base-accent-gradient-stop-2: var(--base-red-48); --base-accent-gradient-stop-1: var(--base-red-35); --base-accent-border-primary-subtle: rgba(228, 37, 0, 0.7); --base-accent-border-primary-accessible: var(--base-red-79); --base-accent-content-primary-onbold: var(--base-red-100); --base-accent-border-primary-bold: var(--base-red-74); } /* membership overrides (dark) */ [data-base-version-color="2"][data-theme="dark"] [data-product="membership"], [data-base-version-color="2"][data-theme="dark"][data-product="membership"], [data-theme="dark"] [data-base-version-color="2"] [data-product="membership"], [data-theme="dark"] [data-base-version-color="2"][data-product="membership"] { --base-accent-border-primary-bold: var(--base-membership-74); --base-accent-background-primary-bold: var(--base-membership-74); --base-accent-content-primary-onbold: var(--base-neutral-0); --base-accent-background-primary-disabled: rgba(56, 32, 1, 0.75); --base-accent-content-primary: var(--base-membership-74); --base-accent-gradient-stop-3: var(--base-membership-48); --base-accent-content-primary-disabled: var(--base-membership-40); --base-accent-background-primary-subtle: var(--base-membership-31); --base-accent-content-primary-onsubtle: var(--base-membership-74); --base-accent-gradient-stop-2: var(--base-membership-57); --base-accent-gradient-stop-1: var(--base-membership-61); --base-accent-border-primary-subtle: rgba(159, 100, 2, 0.3); --base-accent-border-primary-accessible: var(--base-membership-74); } /* ai overrides (dark) */ [data-base-version-color="2"][data-theme="dark"] [data-product="ai"], [data-base-version-color="2"][data-theme="dark"][data-product="ai"], [data-theme="dark"] [data-base-version-color="2"] [data-product="ai"], [data-theme="dark"] [data-base-version-color="2"][data-product="ai"] { --base-accent-border-primary-subtle: rgba(116, 95, 218, 0.7); --base-accent-content-primary-onsubtle: var(--base-indigo-91); --base-accent-background-primary-subtle: var(--base-indigo-31); --base-accent-content-primary: var(--base-indigo-74); --base-accent-background-primary-disabled: rgba(70, 47, 151, 0.75); --base-accent-content-primary-onbold: var(--base-indigo-0); --base-accent-border-primary-bold: var(--base-indigo-57); --base-accent-border-primary-accessible: var(--base-indigo-74); --base-accent-content-primary-disabled: var(--base-indigo-57); --base-accent-gradient-stop-3: var(--base-indigo-66); --base-accent-background-primary-bold: var(--base-indigo-74); --base-accent-gradient-stop-1: var(--base-indigo-35); --base-accent-gradient-stop-2: var(--base-indigo-48); } /* eats overrides (dark) */ [data-base-version-color="2"][data-theme="dark"] [data-product="eats"], [data-base-version-color="2"][data-theme="dark"][data-product="eats"], [data-theme="dark"] [data-base-version-color="2"] [data-product="eats"], [data-theme="dark"] [data-base-version-color="2"][data-product="eats"] { --base-accent-border-primary-subtle: rgba(23, 144, 78, 0.7); --base-accent-background-primary-subtle: var(--base-green-31); --base-accent-content-primary-onsubtle: var(--base-green-91); --base-accent-gradient-stop-1: var(--base-green-35); --base-accent-gradient-stop-2: var(--base-green-48); --base-accent-background-primary-bold: var(--base-green-70); --base-accent-content-primary-onbold: var(--base-green-0); --base-accent-border-primary-bold: var(--base-green-74); --base-accent-border-primary-accessible: var(--base-green-74); --base-accent-content-primary-disabled: var(--base-green-57); --base-accent-gradient-stop-3: var(--base-green-66); --base-accent-background-primary-disabled: var(--base-green-35); --base-accent-content-primary: var(--base-green-74); } /* v2 prefers-color-scheme dark semantics (OS-level dark without data-theme) */ @media (prefers-color-scheme: dark) { :root[data-base-version-color="2"]:not([data-theme]), [data-base-version-color="2"]:not([data-theme]) { --base-background-base: var(--base-neutral-18); --base-background-primary: var(--base-neutral-23); --base-background-secondary: var(--base-neutral-27); --base-background-tertiary: var(--base-neutral-35); --base-background-disabled: rgba(71, 71, 71, 0.6); --base-background-always-dark: var(--base-neutral-27); --base-background-always-light: var(--base-neutral-91); --base-background-track: rgba(95, 95, 95, 0.2); --base-error-background-bold: var(--base-red-53); --base-error-background-subtle: var(--base-red-23); --base-error-background-disabled: rgba(78, 6, 0, 0.75); --base-error-background-statelayer-hover: rgba(58, 5, 1, 0.2); --base-error-background-statelayer-pressed: rgba(58, 5, 1, 0.35); --base-warning-background-bold: var(--base-orange-70); --base-warning-background-subtle: var(--base-orange-27); --base-warning-background-disabled: rgba(80, 32, 2, 0.8); --base-success-background-bold: var(--base-green-66); --base-success-background-subtle: var(--base-green-27); --base-success-background-disabled: rgba(1, 60, 20, 0.75); --base-info-background-bold: var(--base-neutral-91); --base-info-background-subtle: var(--base-neutral-35); --base-info-background-disabled: rgba(71, 71, 71, 0.75); --base-accent-background-primary-bold: var(--base-blue-66); --base-accent-background-primary-subtle: var(--base-blue-23); --base-accent-background-primary-disabled: rgba(2, 38, 79, 0.75); --base-background-inverse-primary: var(--base-neutral-91); --base-background-inverse-secondary: var(--base-neutral-87); --base-background-inverse-statelayer-hover: rgba(17, 17, 17, 0.15); --base-background-inverse-statelayer-pressed: rgba(17, 17, 17, 0.2); --base-background-material-primary: rgba(39, 39, 39, 0.9); --base-background-material-secondary: rgba(39, 39, 39, 0.96); --base-background-material-tertiary: rgba(39, 39, 39, 0.98); --base-background-overlay-art: rgba(0, 0, 0, 0.16); --base-background-statelayer-hover: rgba(236, 236, 236, 0.1); --base-background-statelayer-pressed: rgba(236, 236, 236, 0.15); --base-content-primary: var(--base-neutral-96); --base-content-secondary: var(--base-neutral-87); --base-content-tertiary: var(--base-neutral-74); --base-content-disabled: var(--base-neutral-44); --base-content-always-dark: var(--base-neutral-18); --base-content-always-light: var(--base-neutral-96); --base-error-content-primary: var(--base-red-79); --base-error-content-onbold: var(--base-red-99); --base-error-content-onsubtle: var(--base-red-87); --base-error-content-disabled: var(--base-red-44); --base-error-content-oninverse: var(--base-red-35); --base-warning-content-primary: var(--base-orange-74); --base-warning-content-onbold: var(--base-orange-15); --base-warning-content-onsubtle: var(--base-orange-91); --base-warning-content-disabled: var(--base-orange-53); --base-warning-content-oninverse: var(--base-orange-35); --base-success-content-primary: var(--base-green-74); --base-success-content-onbold: var(--base-green-15); --base-success-content-onsubtle: var(--base-green-91); --base-success-content-disabled: var(--base-green-48); --base-success-content-oninverse: var(--base-green-35); --base-info-content-primary: var(--base-neutral-74); --base-info-content-onbold: var(--base-neutral-18); --base-info-content-onsubtle: var(--base-neutral-91); --base-info-content-disabled: var(--base-neutral-53); --base-info-content-oninverse: var(--base-neutral-35); --base-accent-content-primary: var(--base-blue-74); --base-accent-content-primary-onbold: var(--base-blue-0); --base-accent-content-primary-onsubtle: var(--base-blue-91); --base-accent-content-primary-disabled: var(--base-blue-48); --base-content-inverse-primary: var(--base-neutral-18); --base-content-inverse-secondary: var(--base-neutral-27); --base-content-inverse-tertiary: var(--base-neutral-40); --base-content-legal: var(--base-blue-74); --base-accent-content-ongradient: var(--base-neutral-100); --base-border-accessible: var(--base-neutral-66); --base-border-bold: var(--base-neutral-96); --base-border-subtle: rgba(107, 107, 107, 0.65); --base-accent-border-primary-bold: var(--base-blue-74); --base-accent-border-primary-subtle: rgba(17, 117, 221, 0.3); --base-accent-border-primary-accessible: var(--base-blue-74); --base-error-border-bold: var(--base-red-70); --base-error-border-subtle: rgba(243, 56, 27, 0.3); --base-error-border-accessible: var(--base-red-66); --base-warning-border-bold: var(--base-orange-74); --base-warning-border-subtle: rgba(172, 92, 16, 0.3); --base-warning-border-accessible: var(--base-orange-66); --base-success-border-bold: var(--base-green-70); --base-success-border-subtle: rgba(23, 144, 78, 0.3); --base-success-border-accessible: var(--base-green-66); --base-info-border-bold: var(--base-neutral-96); --base-info-border-subtle: rgba(119, 119, 119, 0.7); --base-info-border-accessible: var(--base-neutral-66); --base-content-green-material-onbold: var(--base-neutral-100); --base-border-inverse-bold: var(--base-neutral-18); --base-content-red-material-onbold: var(--base-neutral-100); --base-border-inverse-subtle: rgba(224, 224, 224, 0.7); --base-content-orange-material-onbold: var(--base-neutral-0); --base-border-inverse-accessible: var(--base-neutral-53); --base-border-material-primary: rgba(236, 236, 236, 0); --base-content-yellow-material-onbold: var(--base-neutral-0); --base-border-material-secondary: rgba(255, 255, 255, 0); --base-content-blue-material-onbold: var(--base-neutral-100); --base-border-material-tertiary: rgba(236, 236, 236, 0); --base-accent-gradient-stop-1: var(--base-gradient-blue-35); --base-content-crimson-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-2: var(--base-gradient-blue-48); --base-accent-gradient-stop-3: var(--base-gradient-blue-66); --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.72); --base-gradient-scrim-stop-2: rgba(10, 10, 10, 0.54); --base-gradient-scrim-stop-3: rgba(10, 10, 10, 0.54); color-scheme: dark; } /* offers overrides (prefers-color-scheme dark) */ :root[data-base-version-color="2"]:not([data-theme]) [data-product="offers"], :root[data-base-version-color="2"]:not([data-theme])[data-product="offers"], [data-base-version-color="2"]:not([data-theme]) [data-product="offers"], [data-base-version-color="2"]:not([data-theme])[data-product="offers"] { --base-accent-background-primary-bold: var(--base-red-57); --base-accent-content-primary-onsubtle: var(--base-red-91); --base-accent-background-primary-subtle: var(--base-red-40); --base-accent-background-primary-disabled: rgba(78, 6, 0, 0.75); --base-accent-content-primary: var(--base-red-79); --base-accent-gradient-stop-3: var(--base-red-66); --base-accent-content-primary-disabled: var(--base-red-44); --base-accent-gradient-stop-2: var(--base-red-48); --base-accent-gradient-stop-1: var(--base-red-35); --base-accent-border-primary-subtle: rgba(228, 37, 0, 0.7); --base-accent-border-primary-accessible: var(--base-red-79); --base-accent-content-primary-onbold: var(--base-red-100); --base-accent-border-primary-bold: var(--base-red-74); } /* membership overrides (prefers-color-scheme dark) */ :root[data-base-version-color="2"]:not([data-theme]) [data-product="membership"], :root[data-base-version-color="2"]:not( [data-theme] )[data-product="membership"], [data-base-version-color="2"]:not([data-theme]) [data-product="membership"], [data-base-version-color="2"]:not([data-theme])[data-product="membership"] { --base-accent-border-primary-bold: var(--base-membership-74); --base-accent-background-primary-bold: var(--base-membership-74); --base-accent-content-primary-onbold: var(--base-neutral-0); --base-accent-background-primary-disabled: rgba(56, 32, 1, 0.75); --base-accent-content-primary: var(--base-membership-74); --base-accent-gradient-stop-3: var(--base-membership-48); --base-accent-content-primary-disabled: var(--base-membership-40); --base-accent-background-primary-subtle: var(--base-membership-31); --base-accent-content-primary-onsubtle: var(--base-membership-74); --base-accent-gradient-stop-2: var(--base-membership-57); --base-accent-gradient-stop-1: var(--base-membership-61); --base-accent-border-primary-subtle: rgba(159, 100, 2, 0.3); --base-accent-border-primary-accessible: var(--base-membership-74); } /* ai overrides (prefers-color-scheme dark) */ :root[data-base-version-color="2"]:not([data-theme]) [data-product="ai"], :root[data-base-version-color="2"]:not([data-theme])[data-product="ai"], [data-base-version-color="2"]:not([data-theme]) [data-product="ai"], [data-base-version-color="2"]:not([data-theme])[data-product="ai"] { --base-accent-border-primary-subtle: rgba(116, 95, 218, 0.7); --base-accent-content-primary-onsubtle: var(--base-indigo-91); --base-accent-background-primary-subtle: var(--base-indigo-31); --base-accent-content-primary: var(--base-indigo-74); --base-accent-background-primary-disabled: rgba(70, 47, 151, 0.75); --base-accent-content-primary-onbold: var(--base-indigo-0); --base-accent-border-primary-bold: var(--base-indigo-57); --base-accent-border-primary-accessible: var(--base-indigo-74); --base-accent-content-primary-disabled: var(--base-indigo-57); --base-accent-gradient-stop-3: var(--base-indigo-66); --base-accent-background-primary-bold: var(--base-indigo-74); --base-accent-gradient-stop-1: var(--base-indigo-35); --base-accent-gradient-stop-2: var(--base-indigo-48); } /* eats overrides (prefers-color-scheme dark) */ :root[data-base-version-color="2"]:not([data-theme]) [data-product="eats"], :root[data-base-version-color="2"]:not([data-theme])[data-product="eats"], [data-base-version-color="2"]:not([data-theme]) [data-product="eats"], [data-base-version-color="2"]:not([data-theme])[data-product="eats"] { --base-accent-border-primary-subtle: rgba(23, 144, 78, 0.7); --base-accent-background-primary-subtle: var(--base-green-31); --base-accent-content-primary-onsubtle: var(--base-green-91); --base-accent-gradient-stop-1: var(--base-green-35); --base-accent-gradient-stop-2: var(--base-green-48); --base-accent-background-primary-bold: var(--base-green-70); --base-accent-content-primary-onbold: var(--base-green-0); --base-accent-border-primary-bold: var(--base-green-74); --base-accent-border-primary-accessible: var(--base-green-74); --base-accent-content-primary-disabled: var(--base-green-57); --base-accent-gradient-stop-3: var(--base-green-66); --base-accent-background-primary-disabled: var(--base-green-35); --base-accent-content-primary: var(--base-green-74); } } /* v2 dark elevated semantics */ [data-base-version-color="2"][data-theme="dark"] [data-elevated="true"], [data-base-version-color="2"][data-theme="dark"][data-elevated="true"], [data-theme="dark"] [data-base-version-color="2"] [data-elevated="true"], [data-theme="dark"] [data-base-version-color="2"][data-elevated="true"] { --base-background-base: var(--base-neutral-27); --base-background-primary: var(--base-neutral-31); --base-background-secondary: var(--base-neutral-35); --base-background-tertiary: var(--base-neutral-44); --base-background-disabled: rgba(95, 95, 95, 0.6); --base-background-always-dark: var(--base-neutral-35); --base-background-always-light: var(--base-neutral-98); --base-background-track: rgba(95, 95, 95, 0.2); --base-error-background-bold: var(--base-red-57); --base-error-background-subtle: var(--base-red-27); --base-error-background-disabled: rgba(114, 13, 0, 0.75); --base-error-background-statelayer-hover: rgba(58, 5, 1, 0.2); --base-error-background-statelayer-pressed: rgba(58, 5, 1, 0.35); --base-warning-background-bold: var(--base-orange-79); --base-warning-background-subtle: var(--base-orange-35); --base-warning-background-disabled: rgba(110, 50, 2, 0.8); --base-success-background-bold: var(--base-green-74); --base-success-background-subtle: var(--base-green-35); --base-success-background-disabled: rgba(9, 86, 39, 0.75); --base-info-background-bold: var(--base-neutral-98); --base-info-background-subtle: var(--base-neutral-44); --base-info-background-disabled: rgba(95, 95, 95, 0.75); --base-accent-background-primary-bold: var(--base-blue-74); --base-accent-background-primary-subtle: var(--base-blue-31); --base-accent-background-primary-disabled: rgba(3, 58, 116, 0.75); --base-background-inverse-primary: var(--base-neutral-98); --base-background-inverse-secondary: var(--base-neutral-96); --base-background-inverse-statelayer-hover: rgba(17, 17, 17, 0.15); --base-background-inverse-statelayer-pressed: rgba(17, 17, 17, 0.2); --base-background-material-primary: rgba(39, 39, 39, 0.9); --base-background-material-secondary: rgba(39, 39, 39, 0.96); --base-background-material-tertiary: rgba(39, 39, 39, 0.98); --base-background-overlay-art: rgba(0, 0, 0, 0.16); --base-background-statelayer-hover: rgba(236, 236, 236, 0.1); --base-background-statelayer-pressed: rgba(236, 236, 236, 0.15); --base-content-primary: var(--base-neutral-99); --base-content-secondary: var(--base-neutral-96); --base-content-tertiary: var(--base-neutral-83); --base-content-disabled: var(--base-neutral-53); --base-content-always-dark: var(--base-neutral-27); --base-content-always-light: var(--base-neutral-99); --base-error-content-primary: var(--base-red-87); --base-error-content-onbold: var(--base-red-99); --base-error-content-onsubtle: var(--base-red-96); --base-error-content-disabled: var(--base-red-53); --base-error-content-oninverse: var(--base-red-44); --base-warning-content-primary: var(--base-orange-83); --base-warning-content-onbold: var(--base-orange-23); --base-warning-content-onsubtle: var(--base-orange-98); --base-warning-content-disabled: var(--base-orange-61); --base-warning-content-oninverse: var(--base-orange-44); --base-success-content-primary: var(--base-green-83); --base-success-content-onbold: var(--base-green-23); --base-success-content-onsubtle: var(--base-green-98); --base-success-content-disabled: var(--base-green-57); --base-success-content-oninverse: var(--base-green-44); --base-info-content-primary: var(--base-neutral-83); --base-info-content-onbold: var(--base-neutral-27); --base-info-content-onsubtle: var(--base-neutral-98); --base-info-content-disabled: var(--base-neutral-61); --base-info-content-oninverse: var(--base-neutral-44); --base-accent-content-primary: var(--base-blue-83); --base-accent-content-primary-onbold: var(--base-blue-18); --base-accent-content-primary-onsubtle: var(--base-blue-98); --base-accent-content-primary-disabled: var(--base-blue-57); --base-content-inverse-primary: var(--base-neutral-27); --base-content-inverse-secondary: var(--base-neutral-35); --base-content-inverse-tertiary: var(--base-neutral-48); --base-content-legal: var(--base-blue-83); --base-accent-content-ongradient: var(--base-neutral-100); --base-border-accessible: var(--base-neutral-74); --base-border-bold: var(--base-neutral-99); --base-border-subtle: rgba(131, 131, 131, 0.65); --base-accent-border-primary-bold: var(--base-blue-83); --base-accent-border-primary-subtle: rgba(51, 163, 252, 0.3); --base-accent-border-primary-accessible: var(--base-blue-83); --base-error-border-bold: var(--base-red-79); --base-error-border-subtle: rgba(252, 79, 52, 0.3); --base-error-border-accessible: var(--base-red-74); --base-warning-border-bold: var(--base-orange-83); --base-warning-border-subtle: rgba(212, 118, 20, 0.3); --base-warning-border-accessible: var(--base-orange-74); --base-success-border-bold: var(--base-green-79); --base-success-border-subtle: rgba(29, 176, 97, 0.3); --base-success-border-accessible: var(--base-green-74); --base-info-border-bold: var(--base-neutral-99); --base-info-border-subtle: rgba(144, 144, 144, 0.7); --base-info-border-accessible: var(--base-neutral-74); --base-content-green-material-onbold: var(--base-neutral-100); --base-border-inverse-bold: var(--base-neutral-27); --base-content-red-material-onbold: var(--base-neutral-100); --base-border-inverse-subtle: rgba(252, 252, 252, 0.7); --base-content-orange-material-onbold: var(--base-neutral-0); --base-border-inverse-accessible: var(--base-neutral-61); --base-border-material-primary: rgba(236, 236, 236, 0); --base-content-yellow-material-onbold: var(--base-neutral-0); --base-border-material-secondary: rgba(255, 255, 255, 0); --base-content-blue-material-onbold: var(--base-neutral-100); --base-border-material-tertiary: rgba(236, 236, 236, 0); --base-accent-gradient-stop-1: var(--base-gradient-blue-35); --base-content-crimson-material-onbold: var(--base-neutral-100); --base-accent-gradient-stop-2: var(--base-gradient-blue-48); --base-accent-gradient-stop-3: var(--base-gradient-blue-66); --base-gradient-scrim-stop-1: rgba(17, 17, 17, 0.72); --base-gradient-scrim-stop-2: rgba(10, 10, 10, 0.54); --base-gradient-scrim-stop-3: rgba(10, 10, 10, 0.54); --base-background-scrim: linear-gradient( 180deg, var(--base-gradient-scrim-stop-1) 0%, var(--base-gradient-scrim-stop-2) 30%, var(--base-gradient-scrim-stop-3) 100% ); color-scheme: dark; } /* * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. * * This file has been auto-generated. Any modifications * you make will be overwritten when the file is regenerated. * * For more information or questions, please go to #design-eng * */ /* * Base 2.0 Elevation Tokens * ========================= * * Each elevation level is shipped as 10 individual design tokens — the * cross-product of: * * Hierarchy: lowest, low, mid, high, highest * Layer: key, ambient * Property: x, y, blur, spread, color * * Naming: --base-elevation-{hierarchy}-{layer}-{property} * * Consumers compose the final `box-shadow` value at the component level, * with key painted on top of ambient per the elevation spec: * * box-shadow: * var(--base-elevation-mid-key-x) var(--base-elevation-mid-key-y) * var(--base-elevation-mid-key-blur) var(--base-elevation-mid-key-spread) * var(--base-elevation-mid-key-color), * var(--base-elevation-mid-ambient-x) var(--base-elevation-mid-ambient-y) * var(--base-elevation-mid-ambient-blur) var(--base-elevation-mid-ambient-spread) * var(--base-elevation-mid-ambient-color); */ /* v2 light elevation */ [data-base-version-color="2"] { --base-elevation-lowest-key-x: 0; --base-elevation-lowest-key-y: 0; --base-elevation-lowest-key-blur: 2px; --base-elevation-lowest-key-spread: 0; --base-elevation-lowest-key-color: rgba(0, 0, 0, 0.05); --base-elevation-lowest-ambient-x: 0; --base-elevation-lowest-ambient-y: 0.5px; --base-elevation-lowest-ambient-blur: 10px; --base-elevation-lowest-ambient-spread: -1px; --base-elevation-lowest-ambient-color: rgba(107, 107, 107, 0.17); --base-elevation-low-key-x: 0; --base-elevation-low-key-y: 0.25px; --base-elevation-low-key-blur: 3.5px; --base-elevation-low-key-spread: 0; --base-elevation-low-key-color: rgba(0, 0, 0, 0.07); --base-elevation-low-ambient-x: 0; --base-elevation-low-ambient-y: 0.75px; --base-elevation-low-ambient-blur: 16px; --base-elevation-low-ambient-spread: -2px; --base-elevation-low-ambient-color: rgba(107, 107, 107, 0.2); --base-elevation-mid-key-x: 0; --base-elevation-mid-key-y: 0.75px; --base-elevation-mid-key-blur: 6px; --base-elevation-mid-key-spread: 0; --base-elevation-mid-key-color: rgba(0, 0, 0, 0.07); --base-elevation-mid-ambient-x: 0; --base-elevation-mid-ambient-y: 1.5px; --base-elevation-mid-ambient-blur: 28px; --base-elevation-mid-ambient-spread: -3px; --base-elevation-mid-ambient-color: rgba(107, 107, 107, 0.24); --base-elevation-high-key-x: 0; --base-elevation-high-key-y: 1.25px; --base-elevation-high-key-blur: 10px; --base-elevation-high-key-spread: 0; --base-elevation-high-key-color: rgba(0, 0, 0, 0.07); --base-elevation-high-ambient-x: 0; --base-elevation-high-ambient-y: 2.25px; --base-elevation-high-ambient-blur: 40px; --base-elevation-high-ambient-spread: -6px; --base-elevation-high-ambient-color: rgba(107, 107, 107, 0.32); --base-elevation-highest-key-x: 0; --base-elevation-highest-key-y: 1.75px; --base-elevation-highest-key-blur: 16px; --base-elevation-highest-key-spread: 0; --base-elevation-highest-key-color: rgba(0, 0, 0, 0.07); --base-elevation-highest-ambient-x: 0; --base-elevation-highest-ambient-y: 2.75px; --base-elevation-highest-ambient-blur: 42px; --base-elevation-highest-ambient-spread: -7px; --base-elevation-highest-ambient-color: rgba(107, 107, 107, 0.37); } /* v2 dark elevation */ [data-base-version-color="2"][data-theme="dark"], [data-theme="dark"] [data-base-version-color="2"] { --base-elevation-lowest-key-x: 0; --base-elevation-lowest-key-y: -0.5px; --base-elevation-lowest-key-blur: 1px; --base-elevation-lowest-key-spread: 0; --base-elevation-lowest-key-color: rgba(224, 224, 224, 0.1); --base-elevation-lowest-ambient-x: 0; --base-elevation-lowest-ambient-y: 2px; --base-elevation-lowest-ambient-blur: 8px; --base-elevation-lowest-ambient-spread: -1px; --base-elevation-lowest-ambient-color: rgba(10, 10, 10, 0.48); --base-elevation-low-key-x: 0; --base-elevation-low-key-y: -0.5px; --base-elevation-low-key-blur: 1.5px; --base-elevation-low-key-spread: 0; --base-elevation-low-key-color: rgba(224, 224, 224, 0.12); --base-elevation-low-ambient-x: 0; --base-elevation-low-ambient-y: 4px; --base-elevation-low-ambient-blur: 12px; --base-elevation-low-ambient-spread: -2px; --base-elevation-low-ambient-color: rgba(10, 10, 10, 0.56); --base-elevation-mid-key-x: 0; --base-elevation-mid-key-y: -1px; --base-elevation-mid-key-blur: 2px; --base-elevation-mid-key-spread: 0; --base-elevation-mid-key-color: rgba(224, 224, 224, 0.16); --base-elevation-mid-ambient-x: 0; --base-elevation-mid-ambient-y: 6px; --base-elevation-mid-ambient-blur: 18px; --base-elevation-mid-ambient-spread: -3px; --base-elevation-mid-ambient-color: rgba(10, 10, 10, 0.64); --base-elevation-high-key-x: 0; --base-elevation-high-key-y: -1px; --base-elevation-high-key-blur: 2px; --base-elevation-high-key-spread: 0; --base-elevation-high-key-color: rgba(224, 224, 224, 0.18); --base-elevation-high-ambient-x: 0; --base-elevation-high-ambient-y: 8px; --base-elevation-high-ambient-blur: 28px; --base-elevation-high-ambient-spread: -4px; --base-elevation-high-ambient-color: rgba(10, 10, 10, 0.72); --base-elevation-highest-key-x: 0; --base-elevation-highest-key-y: -1.5px; --base-elevation-highest-key-blur: 3px; --base-elevation-highest-key-spread: 0; --base-elevation-highest-key-color: rgba(224, 224, 224, 0.2); --base-elevation-highest-ambient-x: 0; --base-elevation-highest-ambient-y: 8px; --base-elevation-highest-ambient-blur: 32px; --base-elevation-highest-ambient-spread: -6px; --base-elevation-highest-ambient-color: rgba(10, 10, 10, 0.8); } /* v2 dark elevated elevation */ [data-base-version-color="2"][data-theme="dark"] [data-elevated="true"], [data-base-version-color="2"][data-theme="dark"][data-elevated="true"], [data-theme="dark"] [data-base-version-color="2"] [data-elevated="true"], [data-theme="dark"] [data-base-version-color="2"][data-elevated="true"] { --base-elevation-lowest-key-x: 0; --base-elevation-lowest-key-y: -0.5px; --base-elevation-lowest-key-blur: 1px; --base-elevation-lowest-key-spread: 0; --base-elevation-lowest-key-color: rgba(224, 224, 224, 0.1); --base-elevation-lowest-ambient-x: 0; --base-elevation-lowest-ambient-y: 2px; --base-elevation-lowest-ambient-blur: 8px; --base-elevation-lowest-ambient-spread: -1px; --base-elevation-lowest-ambient-color: rgba(10, 10, 10, 0.48); --base-elevation-low-key-x: 0; --base-elevation-low-key-y: -0.5px; --base-elevation-low-key-blur: 1.5px; --base-elevation-low-key-spread: 0; --base-elevation-low-key-color: rgba(224, 224, 224, 0.12); --base-elevation-low-ambient-x: 0; --base-elevation-low-ambient-y: 4px; --base-elevation-low-ambient-blur: 12px; --base-elevation-low-ambient-spread: -2px; --base-elevation-low-ambient-color: rgba(10, 10, 10, 0.56); --base-elevation-mid-key-x: 0; --base-elevation-mid-key-y: -1px; --base-elevation-mid-key-blur: 2px; --base-elevation-mid-key-spread: 0; --base-elevation-mid-key-color: rgba(224, 224, 224, 0.16); --base-elevation-mid-ambient-x: 0; --base-elevation-mid-ambient-y: 6px; --base-elevation-mid-ambient-blur: 18px; --base-elevation-mid-ambient-spread: -3px; --base-elevation-mid-ambient-color: rgba(10, 10, 10, 0.64); --base-elevation-high-key-x: 0; --base-elevation-high-key-y: -1px; --base-elevation-high-key-blur: 2px; --base-elevation-high-key-spread: 0; --base-elevation-high-key-color: rgba(224, 224, 224, 0.18); --base-elevation-high-ambient-x: 0; --base-elevation-high-ambient-y: 8px; --base-elevation-high-ambient-blur: 28px; --base-elevation-high-ambient-spread: -4px; --base-elevation-high-ambient-color: rgba(10, 10, 10, 0.72); --base-elevation-highest-key-x: 0; --base-elevation-highest-key-y: -1.5px; --base-elevation-highest-key-blur: 3px; --base-elevation-highest-key-spread: 0; --base-elevation-highest-key-color: rgba(224, 224, 224, 0.2); --base-elevation-highest-ambient-x: 0; --base-elevation-highest-ambient-y: 8px; --base-elevation-highest-ambient-blur: 32px; --base-elevation-highest-ambient-spread: -6px; --base-elevation-highest-ambient-color: rgba(10, 10, 10, 0.8); } /* * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. * * This file has been auto-generated. Any modifications * you make will be overwritten when the file is regenerated. * * For more information or questions, please go to #design-eng * */ /* * Base 2.0 Corner Radius Tokens * ============================= * * A single primitive ramp shared across the design system. Corner radius has * no light/dark modes, so these are emitted as flat :root custom properties. * * Naming: --base-corner-{step} (e.g. --base-corner-radius-6) * * radius-full is 1000px — the Figma source uses this large value to fake full * roundness; it is preserved verbatim as the source-of-truth value. */ :root { --base-corner-radius-6: 6px; --base-corner-radius-8: 8px; --base-corner-radius-12: 12px; --base-corner-radius-16: 16px; --base-corner-radius-24: 24px; --base-corner-radius-32: 32px; --base-corner-radius-full: 1000px; }