/**
 * DESIGN TOKENS
 *
 * Global design-system values used throughout the site.
 *
 * This file should contain:
 * - Brand colors
 * - Text colors
 * - Background colors
 * - Font families
 * - Font sizes
 * - Font weights
 * - Line heights
 * - Spacing values
 * - Border radiuses
 * - Container widths
 * - Breakpoint reference values
 * - Shadows
 * - Transitions
 * - Other reusable design values
 *
 * Use CSS custom properties (variables) whenever possible.
 *
 * Do NOT put component-specific styles in this file.
 *
 * Example:
 * --color-primary: #0057b8;
 * --text-lg: 20px;
 * --space-6: 32px;
 * --radius-lg: 16px;
 */

:root {
	
	--max-width:1440px;

    /* Colors */
    --color-white: #ffffff;
	
	--color-black: #000000;
	--color-off-black-text:#010205;
	
	--color-yellow-bg: #FFCD00;
	--color-yellow-text:#E0B92F;
	
	--color-red:#FF1713;
	
	--color-beige-bg:#F2EFE9;
	
	--color-gray-bg: #EEEEEE;
	--color-gray-light-bg: #F7F7F7;
	
	--color-gray-text:#878C91;
	--color-gray-dark-text:#333333;
	
	--color-gray-divider:#B4B4B4;

	
	--font-primary: "Noto Sans", sans-serif;
	
	--heading-h1: 50px;
    --heading-h2: 40px;
    --heading-h3: 24px;
	
	--heading-h1-mobile: 36px;
	--heading-h2-mobile: 32px;
	
	--text-xs: 12px;
	--text-sm: 14px;
	--text-md: 16px;
	--text-lg: 18px;
	--text-xl: 20px;
	--text-xxl:30px;

	--font-weight-light: 300;
	--font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
	
	--heading-letter-spacing: -1.5px;
}