:root { --bricks-color-grey-100: #f5f5f5; --bricks-color-grey-300: #e0e0e0; --bricks-color-grey-500: #9e9e9e; --bricks-color-grey-700: #616161; --bricks-color-grey-800: #424242; --bricks-color-grey-900: #212121; --bricks-color-yellow: #ffeb3b; --bricks-color-amber: #ffc107; --bricks-color-orange: #ff9800; --bricks-color-deep-orange: #ff5722; --bricks-color-red: #f44336; --bricks-color-purple: #9c27b0; --bricks-color-blue: #2196f3; --bricks-color-light-blue: #03a9f4; --bricks-color-sky-blue: #81D4FA; --bricks-color-green: #4caf50; --bricks-color-light-green: #8bc34a; --bricks-color-lime: #cddc39; --primary: hsla(238, 100%, 59%, 1); --primary-l-1: hsl(238, 100%, 67%); --primary-l-2: hsl(238, 100%, 75%); --primary-l-3: hsl(238, 100%, 84%); --primary-l-4: hsl(238, 100%, 92%); --primary-d-1: hsl(238, 69%, 47%); --primary-d-2: hsl(238, 69%, 35%); --primary-d-3: hsl(238, 69%, 24%); --primary-d-4: hsl(238, 69%, 12%); --secondary: hsla(0, 98%, 65%, 1); --secondary-d-1: hsl(0, 57%, 52%); --secondary-d-2: hsl(0, 53%, 39%); --secondary-d-3: hsl(0, 53%, 26%); --secondary-d-4: hsl(0, 53%, 13%); --secondary-l-1: hsl(0, 98%, 72%); --secondary-l-2: hsl(0, 98%, 79%); --secondary-l-3: hsl(0, 98%, 86%); --secondary-l-4: hsl(0, 98%, 93%); --olive: #686a40; --olive-light: #75774b; --taupe: #b6a88d; --taupe-light: #d3cab8; --ivory: #f8f1f3; --cream: #f1ece4; --ink: #151a19; --obsidian: #070909; --success: hsla(136, 95%, 56%, 1); --success-l-1: hsl(136, 95%, 65%); --success-l-2: hsl(136, 95%, 74%); --success-l-3: hsl(136, 95%, 82%); --success-l-4: hsl(136, 95%, 91%); --success-d-1: hsl(136, 75%, 45%); --success-d-2: hsl(136, 75%, 34%); --success-d-3: hsl(136, 75%, 22%); --success-d-4: hsl(136, 75%, 11%); --info: hsla(210, 95%, 56%, 1); --info-l-1: hsl(210, 95%, 65%); --info-l-2: hsl(210, 95%, 74%); --info-l-3: hsl(210, 95%, 82%); --info-l-4: hsl(210, 95%, 91%); --info-d-1: hsl(210, 75%, 45%); --info-d-2: hsl(210, 75%, 34%); --info-d-3: hsl(210, 75%, 22%); --info-d-4: hsl(210, 75%, 11%); --warning: hsla(48, 95%, 56%, 1); --warning-d-1: hsl(48, 75%, 45%); --warning-d-2: hsl(48, 75%, 34%); --warning-d-3: hsl(48, 75%, 22%); --warning-d-4: hsl(48, 75%, 11%); --warning-l-1: hsl(48, 95%, 65%); --warning-l-2: hsl(48, 95%, 74%); --warning-l-3: hsl(48, 95%, 82%); --warning-l-4: hsl(48, 95%, 91%); --error: hsla(351, 95%, 56%, 1); --error-l-1: hsl(351, 95%, 65%); --error-l-2: hsl(351, 95%, 74%); --error-l-3: hsl(351, 95%, 82%); --error-l-4: hsl(351, 95%, 91%); --error-d-1: hsl(351, 75%, 45%); --error-d-2: hsl(351, 75%, 34%); --error-d-3: hsl(351, 75%, 22%); --error-d-4: hsl(351, 75%, 11%); --white: hsl(0, 0%, 100%); --white-t-1: hsla(0, 0%, 100%, 0.1); --white-t-2: hsla(0, 0%, 100%, 0.2); --white-t-3: hsla(0, 0%, 100%, 0.3); --white-t-4: hsla(0, 0%, 100%, 0.4); --white-t-5: hsla(0, 0%, 100%, 0.5); --white-t-6: hsla(0, 0%, 100%, 0.6); --white-t-7: hsla(0, 0%, 100%, 0.7); --white-t-8: hsla(0, 0%, 100%, 0.8); --white-t-9: hsla(0, 0%, 100%, 0.9); --black: hsl(0, 0%, 0%); --black-t-1: hsla(0, 0%, 0%, 0.1); --black-t-2: hsla(0, 0%, 0%, 0.2); --black-t-3: hsla(0, 0%, 0%, 0.3); --black-t-4: hsla(0, 0%, 0%, 0.4); --black-t-5: hsla(0, 0%, 0%, 0.5); --black-t-6: hsla(0, 0%, 0%, 0.6); --black-t-7: hsla(0, 0%, 0%, 0.7); --black-t-8: hsla(0, 0%, 0%, 0.8); --black-t-9: hsla(0, 0%, 0%, 0.9); --color-heading: var(--obsidian); --color-title: var(--obsidian); --color-paragraph: var(--ink); --color-muted: var(--black-t-7); --color-inline-link: var(--primary); --color-inline-link-hover: var(--primary-l-1); --color-action-link: var(--color-heading); --color-action-link-hover: var(--primary); --color-navigation-link: var(--color-heading); --color-navigation-link-hover: var(--primary); --color-background: var(--ivory); --color-background-alt: var(--cream); --color-surface: var(--ivory); --color-surface-alt: var(--cream); --color-surface-muted: var(--taupe-light); --color-surface-dark: var(--ink); --color-border: var(--black-t-1); --color-border-hover: var(--black-t-2); --color-border-light: var(--white-t-1); --color-shadow: hsla(0, 0%, 0%, 0.05); --color-shadow-hover: var(--black-t-1); --color-shadow-light: var(--white-t-1); --color-brand-primary: var(--primary); --color-brand-primary-hover: var(--primary-l-1); --color-brand-primary-soft: var(--primary-l-4); --color-brand-primary-strong: var(--primary-d-3); --color-brand-secondary: var(--secondary); --color-brand-secondary-hover: var(--secondary-l-1); --color-brand-secondary-soft: var(--secondary-l-4); --color-brand-secondary-strong: var(--secondary-d-3); --color-accent: var(--primary); --color-accent-hover: var(--primary-d-1); --color-accent-light: var(--primary-l-3); --color-accent-dark: var(--primary-d-3); --color-inverse-heading: var(--ivory); --color-inverse-title: var(--ivory); --color-inverse-paragraph: var(--taupe-light); --color-inverse-muted: var(--taupe); --color-inverse-inline-link: var(--primary-l-2); --color-inverse-inline-link-hover: var(--primary-l-1); --color-inverse-action-link: var(--color-heading); --color-inverse-action-link-hover: var(--primary-l-2); --color-inverse-navigation-link: var(--color-inverse-heading); --color-inverse-navigation-link-hover: var(--primary-l-2); --heading-h6: clamp(1rem, calc(0.0019259259259259242 * (100vw - 22.5rem) + 1rem), 1.13rem); --heading-h5: clamp(1.13rem, calc(0.005481481481481483 * (100vw - 22.5rem) + 1.13rem), 1.5rem); --heading-h4: clamp(1.27rem, calc(0.010814814814814815 * (100vw - 22.5rem) + 1.27rem), 2rem); --heading-h3: clamp(1.42rem, calc(0.018370370370370374 * (100vw - 22.5rem) + 1.42rem), 2.66rem); --heading-h2: clamp(1.6rem, calc(0.028888888888888884 * (100vw - 22.5rem) + 1.6rem), 3.55rem); --heading-h1: clamp(1.8rem, calc(0.043407407407407415 * (100vw - 22.5rem) + 1.8rem), 4.73rem); --title-xs: clamp(0.89rem, calc(-0.00014814814814814828 * (100vw - 22.5rem) + 0.89rem), 0.88rem); --title-s: clamp(1rem, calc(0.0014814814814814827 * (100vw - 22.5rem) + 1rem), 1.1rem); --title-m: clamp(1.13rem, calc(0.003703703703703704 * (100vw - 22.5rem) + 1.13rem), 1.38rem); --title-l: clamp(1.27rem, calc(0.006666666666666666 * (100vw - 22.5rem) + 1.27rem), 1.72rem); --title-xl: clamp(1.42rem, calc(0.010814814814814815 * (100vw - 22.5rem) + 1.42rem), 2.15rem); --paragraph-xs: clamp(0.88rem, calc(0.00014814814814814828 * (100vw - 22.5rem) + 0.88rem), 0.89rem); --paragraph-s: clamp(0.94rem, calc(0.0008888888888888897 * (100vw - 22.5rem) + 0.94rem), 1rem); --paragraph-m: clamp(1rem, calc(0.0019259259259259242 * (100vw - 22.5rem) + 1rem), 1.13rem); --paragraph-l: clamp(1.07rem, calc(0.0029629629629629624 * (100vw - 22.5rem) + 1.07rem), 1.27rem); --paragraph-xl: clamp(1.14rem, calc(0.004148148148148148 * (100vw - 22.5rem) + 1.14rem), 1.42rem); --space-4xs: clamp(0.33rem, calc(-0.00029629629629629656 * (100vw - 22.5rem) + 0.33rem), 0.31rem); --space-3xs: clamp(0.41rem, calc(0.00044444444444444485 * (100vw - 22.5rem) + 0.41rem), 0.44rem); --space-2xs: clamp(0.51rem, calc(0.0016296296296296295 * (100vw - 22.5rem) + 0.51rem), 0.62rem); --space-xs: clamp(0.64rem, calc(0.0035555555555555553 * (100vw - 22.5rem) + 0.64rem), 0.88rem); --space-s: clamp(0.8rem, calc(0.006518518518518518 * (100vw - 22.5rem) + 0.8rem), 1.24rem); --space-m: clamp(1rem, calc(0.011111111111111112 * (100vw - 22.5rem) + 1rem), 1.75rem); --space-l: clamp(1.25rem, calc(0.018074074074074076 * (100vw - 22.5rem) + 1.25rem), 2.47rem); --space-xl: clamp(1.56rem, calc(0.02874074074074074 * (100vw - 22.5rem) + 1.56rem), 3.5rem); --space-2xl: clamp(1.95rem, calc(0.044444444444444446 * (100vw - 22.5rem) + 1.95rem), 4.95rem); --space-3xl: clamp(2.44rem, calc(0.06755555555555556 * (100vw - 22.5rem) + 2.44rem), 7rem); --space-4xl: clamp(3.05rem, calc(0.10133333333333334 * (100vw - 22.5rem) + 3.05rem), 9.89rem);}