// page width
$max-page-width: 1440px;
$tab-width: 768px;
$mobile-width: 576px;
$pc-width: 1024px;
$top-nav-height: 56px;
$max-newsletter-width: 700px;
$min-page-height: 100vh;

$primary-font-family: 'Inter';

// Font sizes
$fs-h7: 10px;
$fs-h6: 12px;
$fs-h5: 14px;
$fs-h4: 16px;
$fs-h3: 21px;
$fs-h2: 26px;
$fs-h1: 28px;

$fs-12: 12px;
$fs-13: 13px;
$fs-14: 14px;
$fs-15: 15px;
$fs-16: 16px;
$fs-17: 17px;
$fs-18: 18px;
$fs-19: 19px;
$fs-20: 20px;
$fs-21: 21px;
$fs-22: 22px;
$fs-23: 23px;
$fs-24: 24px;
$fs-25: 25px;
$fs-26: 26px;
$fs-27: 27px;
$fs-28: 28px;
$fs-30: 30px;
$fs-32: 32px;
$fs-35: 35px;
$fs-40: 40px;

// Spacing
$space-1: 1px;
$space-2: 2px;
$space-4: 4px;
$space-5: 5px;
$space-6: 6px;
$space-7: 7px;
$space-8: 8px;
$space-9: 9px;
$space-10: 10px;
$space-12: 12px;
$space-15: 15px;
$space-16: 16px;
$space-17: 17px;
$space-20: 20px;
$space-24: 24px;
$space-25: 25px;
$space-26: 26px;
$space-28: 28px;
$space-30: 30px;
$space-32: 32px;
$space-36: 36px;
$space-40: 40px;
$space-44: 44px;
$space-48: 48px;
$space-52: 52px;
$space-56: 56px;
$space-60: 60px;
$space-64: 64px;
$space-68: 68px;
$space-70: 70px;
$space-72: 72px;
$space-76: 76px;
$space-78: 78px;
$space-80: 80px;
$space-84: 84px;
$space-88: 88px;
$space-92: 92px;
$space-96: 96px;
$space-110: 110px;
$space-120: 120px;
$space-124: 124px;
$space-128: 128px;
$space-130: 130px;
$space-136: 136px;
$space-220: 220px;

// Border Radius
$border-1: 1px;
$border-3: 3px;
$border-4: 4px;
$border-5: 5px;
$border-8: 8px;
$border-10: 10px;
$border-12: 12px;
$border-16: 16px;
$border-20: 20px;
$border-50: 50%;

// page padding
$page-horizontal-padding: 2.25rem;
$page-padding-top: 2.25rem;
$page-padding-bottom: 0.75rem;

// cover-font-sizes [TODO commented: need more clarity]
// $c-title: 48px;
// $c-description: 18px;
// $c-menu-text: 24px;

// // body-font-sizes
// $h1: 40px;
// $h1-description: 16px;

$fs-tag: 18px;
$fs-text: 16px;
$fs-list-small: 14px;

// card font sizes
$fs-card-title: 18px;
$fs-card-list-title: 14px;
$fs-card-secondary: 12px;

// font-weights
$fw-300: 300;
$fw-400: 400;
$fw-500: 500;
$fw-600: 600;
$fw-700: 700;

// input font sizes
$input-title: 20px;

// color palette & gradients
$neon-blue: #536eff;
$blue-jeans: #29a5ff;
$cyber-yellow: #ffd338;
$white: #ffffff;
$black-coral: #616476;
$medium-aquamarine: #7be4a5;
$bittersweet: #f27059;
$light-purple: #eeeeff;
$light-purple2: #c6cfff;
$callout-yellow: rgba(255, 211, 56, 0.35);
$lightgreen: #eefdff;
$lightgreen2: #dffafe;
$lightestgrey: #f3f3f3;
$black: black;
$chinese-silver: #cccccc;
$cornflower-blue: #6495ed;

$text-low-emphasis: rgba(0, 0, 0, 0.6);

// Using https://www.color-name.com/
$gunmetal: #2f2e41;
$raisin-black: #231f20;
$silver-sand: #c4c4c4;
$spanish-gray: #979797;
$azure: #0087f1;
$cultured: #f5f5f5;
$cultured2: #f9f8f6;
$brilliant-azure: #3daafa;
$maya-blue: #72c1ff;
$lavender: #e9ecfb;
$platinum: #e9e8e8;
$taupe-gray: #898989;
$lightgrey: lightgrey;
$water: #d8ecff;
$cadet: #5c6972;
$ultra-red: #ff6584;
$azureish-white: #dae0ff;
$solitude: #e4e9f2;
$grey: grey;
$button-blue: #2196f3;
$jacarta: #3f3d56;
$mercury: #e7e7e7;
$sonic-silver: #777777;

$gradient-top: linear-gradient(0deg, $neon-blue, $blue-jeans, $cyber-yellow, $white, $black-coral);
$gradient-right: linear-gradient(90deg, $neon-blue, $blue-jeans, $cyber-yellow, $white, $black-coral);
$gradient-bottom: linear-gradient(180deg, $neon-blue, $blue-jeans, $cyber-yellow, $white, $black-coral);
$gradient-left: linear-gradient(270deg, $neon-blue, $blue-jeans, $cyber-yellow, $white, $black-coral);
$gradient-top-right: linear-gradient(45deg, $neon-blue, $blue-jeans, $cyber-yellow, $white, $black-coral);
$gradient-bottom-right: linear-gradient(135deg, $neon-blue, $blue-jeans, $cyber-yellow, $white, $black-coral);
$gradient-top-left: linear-gradient(225deg, $neon-blue, $blue-jeans, $cyber-yellow, $white, $black-coral);
$gradient-bottom-left: linear-gradient(315deg, $neon-blue, $blue-jeans, $cyber-yellow, $white, $black-coral);
$gradient-radial: radial-gradient($neon-blue, $blue-jeans, $cyber-yellow, $white, $black-coral);

$card-faded-text: rgba(47, 46, 65, 0.5);
$low-emphasis-text: rgba(0, 0, 0, 0.6);
$card-text-grey: #898989;

// column widths
$large-column-width: 712px;
$small-column-width: 268px;
