/* ========================================================== Design Tokens ========================================================== */ :root { /* ====================================================== 1. PRIMITIVE COLOR SCALES Lower numbers are lighter. Higher numbers are darker. Components should generally use the semantic variables farther down rather than referencing these directly. ====================================================== */ /* ------------------------------------------------------ Primary palette Built around the site's current warm red/orange color ------------------------------------------------------ */ --primary-50: #fdf4f1; --primary-100: #f9e2dc; --primary-200: #f1bfb2; --primary-300: #e8917d; --primary-400: #dc654b; --primary-500: #d54827; --primary-600: #b93a1d; --primary-700: #8f2a0d; --primary-800: #70230f; --primary-900: #541d11; --primary-950: #321008; /* ------------------------------------------------------ Secondary palette Built around the site's current orange ------------------------------------------------------ */ --secondary-50: #fff8ed; --secondary-100: #ffedd1; --secondary-200: #ffd8a3; --secondary-300: #fdbb69; --secondary-400: #f59a37; --secondary-500: #e67923; --secondary-600: #c95d18; --secondary-700: #a64618; --secondary-800: #84381b; --secondary-900: #6b301a; --secondary-950: #3d170b; /* ------------------------------------------------------ Accent palette Built around the site's current yellow ------------------------------------------------------ */ --accent-50: #fffbea; --accent-100: #fff3c4; --accent-200: #ffe787; --accent-300: #fbd448; --accent-400: #edbd21; --accent-500: #d2a72b; --accent-600: #ac7d16; --accent-700: #895c16; --accent-800: #71491a; --accent-900: #603d1b; --accent-950: #37200b; /* ------------------------------------------------------ Neutral palette Warm neutrals based on the existing site colors ------------------------------------------------------ */ --neutral-0: #ffffff; --neutral-50: #fbf8f8; --neutral-100: #f5eeee; --neutral-200: #efe3e3; --neutral-300: #d9cccc; --neutral-400: #b6a6a3; --neutral-500: #91817e; --neutral-600: #726563; --neutral-700: #594e4c; --neutral-800: #413936; --neutral-900: #332d2b; --neutral-950: #211d1c; /* ------------------------------------------------------ Feedback palettes These stay independent of the brand palette ------------------------------------------------------ */ --success-50: #f1f8f2; --success-100: #dceede; --success-500: #4f7d52; --success-700: #345a38; --success-900: #203b24; --error-50: #fdf2f1; --error-100: #f9dcda; --error-500: #b93b31; --error-700: #8b2822; --error-900: #551916; --warning-50: #fff9e9; --warning-100: #fff0bd; --warning-500: #c88a18; --warning-700: #8f5e0e; --warning-900: #553706; --info-50: #eff7fb; --info-100: #d8edf6; --info-500: #397b98; --info-700: #285c75; --info-900: #193b4d; /* ====================================================== 2. SEMANTIC COLOR TOKENS These describe purpose, not appearance. Most site CSS should use these variables. ====================================================== */ /* Brand and actions */ --color-brand: var(--primary-500); --color-brand-subtle: var(--primary-100); --color-brand-muted: var(--primary-300); --color-brand-strong: var(--primary-700); --color-action: var(--primary-500); --color-action-hover: var(--primary-700); --color-action-active: var(--primary-800); --color-action-disabled: var(--neutral-400); --color-accent: var(--accent-500); --color-accent-hover: var(--accent-700); --color-secondary-action: var(--secondary-500); --color-secondary-action-hover: var(--secondary-700); /* Text */ --color-text: var(--neutral-900); --color-text-muted: var(--neutral-600); --color-text-subtle: var(--neutral-500); --color-text-inverse: var(--neutral-0); --color-text-on-action: var(--neutral-0); --color-text-link: var(--primary-600); --color-text-link-hover: var(--primary-800); /* Backgrounds and surfaces */ --color-page: var(--neutral-0); --color-surface: var(--neutral-100); --color-surface-subtle: var(--neutral-50); --color-surface-strong: var(--neutral-200); --color-surface-inverse: var(--neutral-900); --color-overlay: rgb(33 29 28 / 65%); /* Borders */ --color-border: var(--neutral-900); --color-border-muted: var(--neutral-400); --color-border-subtle: var(--neutral-300); --color-border-focus: var(--primary-500); /* Shadows */ --color-shadow: var(--neutral-900); --color-shadow-muted: rgb(114 101 99 / 50%); --color-shadow-soft: rgb(51 45 43 / 18%); /* Feedback */ --color-success: var(--success-700); --color-success-surface: var(--success-50); --color-error: var(--error-700); --color-error-surface: var(--error-50); --color-warning: var(--warning-700); --color-warning-surface: var(--warning-50); --color-info: var(--info-700); --color-info-surface: var(--info-50); /* Focus */ --color-focus: var(--primary-500); --color-focus-ring: rgb(213 72 39 / 20%); /* ====================================================== 3. COMPONENT COLOR TOKENS These let you change one component without altering every place where a semantic color is used. ====================================================== */ /* Buttons */ --button-primary-background: var(--color-action); --button-primary-background-hover: var(--color-action-hover); --button-primary-background-active: var(--color-action-active); --button-primary-border: var(--color-action); --button-primary-border-hover: var(--color-action-hover); --button-primary-text: var(--color-text-on-action); --button-primary-text-hover: var(--neutral-200); --button-secondary-background: var(--neutral-200); --button-secondary-background-hover: var(--color-action-hover); --button-secondary-border: var(--color-action); --button-secondary-border-hover: var(--color-action-hover); --button-secondary-text: var(--color-action); --button-secondary-text-hover: var(--neutral-200); --button-shadow: var(--color-shadow); --button-shadow-hover: var(--color-shadow-muted); /* Form fields */ --field-background: var(--neutral-100); --field-background-hover: var(--neutral-50); --field-background-focus: var(--neutral-0); --field-background-disabled: var(--neutral-200); --field-text: var(--color-text); --field-placeholder: var(--color-text-muted); --field-border: var(--color-border); --field-border-hover: var(--color-border-muted); --field-border-focus: var(--color-border-focus); --field-border-disabled: var(--color-border-subtle); --field-shadow: var(--color-shadow); --field-shadow-hover: var(--color-text-muted); --field-shadow-focus: var(--color-shadow); /* ====================================================== 4. NON-COLOR DESIGN TOKENS ====================================================== */ /* Borders */ --border-width-field: 2px; --border-width-button: 4px; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; --radius-field: var(--radius-lg); --radius-button: var(--radius-pill); /* ====================================================== Shadows ====================================================== */ /* Form Fields */ --shadow-field: 4px 4px 0 var(--field-shadow), 0 6px 12px rgb(45 35 35 / 8%); --shadow-field-hover: 5px 5px 0 var(--field-shadow-hover), 0 8px 16px rgb(45 35 35 / 10%); --shadow-field-focus: 6px 6px 0 var(--field-shadow-focus), 0 10px 18px rgb(45 35 35 / 12%); /* Buttons */ --shadow-button: 5px 5px 0 var(--button-shadow), 0 8px 16px rgb(45 35 35 / 12%); --shadow-button-hover: 7px 7px 0 var(--button-shadow-hover), 0 16px 28px rgb(45 35 35 / 18%); --shadow-button-active: 2px 2px 0 var(--button-shadow), 0 4px 10px rgb(45 35 35 / 10%); /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Shared content widths and page gutters */ --layout-content-wide: 1680px; --layout-gutter-desktop: var(--space-8); --layout-gutter-mobile: var(--space-5); --field-padding-block: var(--space-4); --field-padding-inline: 18px; --button-padding-block: 18px; --button-padding-inline: var(--space-10); /* Motion */ --duration-fast: 150ms; --duration-standard: 250ms; --duration-slow: 350ms; --ease-standard: ease; --ease-spring: cubic-bezier(.22, 1.4, .35, 1); --transition-fast: var(--duration-fast) var(--ease-standard); --transition-standard: var(--duration-standard) var(--ease-standard); --transition-shadow: var(--duration-slow) var(--ease-standard); --transition-spring: var(--duration-slow) var(--ease-spring); /* ========================================================== TYPOGRAPHY DESIGN TOKENS Avada remains responsible for loading the font files. These variables reference the fonts configured in Avada. ========================================================== */ /* ====================================================== 1. FONT FAMILIES ====================================================== */ --font-family-display: "Montserrat Alternates", Arial, Helvetica, sans-serif; --font-family-body: "Titillium Web", Arial, Helvetica, sans-serif; --font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* ====================================================== 2. FONT WEIGHTS ====================================================== */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ====================================================== 3. PRIMITIVE FONT-SIZE SCALE Lower numbers are smaller. Higher numbers are larger. ====================================================== */ --font-size-100: 0.75rem; /* 12px */ --font-size-200: 0.8125rem; /* 13px */ --font-size-300: 0.875rem; /* 14px */ --font-size-400: 1rem; /* 16px */ --font-size-500: 1.125rem; /* 18px */ --font-size-600: 1.25rem; /* 20px */ --font-size-700: 1.5rem; /* 24px */ --font-size-800: 1.875rem; /* 30px */ --font-size-900: 2.25rem; /* 36px */ --font-size-1000: 3rem; /* 48px */ --font-size-1100: 3.75rem; /* 60px */ --font-size-1200: 4.5rem; /* 72px */ --font-size-1300: 5.5rem; /* 88px */ /* ====================================================== 4. PRIMITIVE LINE-HEIGHT SCALE ====================================================== */ --line-height-solid: 0.92; --line-height-display: 0.98; --line-height-tight: 1.05; --line-height-snug: 1.15; --line-height-compact: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.72; /* ====================================================== 5. PRIMITIVE LETTER-SPACING SCALE ====================================================== */ --letter-spacing-tighter: -0.03em; --letter-spacing-tight: -0.015em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.015em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* ====================================================== 6. DISPLAY TYPOGRAPHY Large marketing and hero typography. Display styles intentionally use tighter line heights. ====================================================== */ /* Display XL */ --type-display-xl-family: var(--font-family-display); --type-display-xl-size: clamp(3.75rem, 6vw, 5.5rem); --type-display-xl-weight: var(--font-weight-extrabold); --type-display-xl-line-height: var(--line-height-solid); --type-display-xl-letter-spacing: var(--letter-spacing-tighter); /* Display L */ --type-display-l-family: var(--font-family-display); --type-display-l-size: clamp(3.25rem, 5vw, 4.5rem); --type-display-l-weight: var(--font-weight-extrabold); --type-display-l-line-height: var(--line-height-display); --type-display-l-letter-spacing: var(--letter-spacing-tight); /* Display M */ --type-display-m-family: var(--font-family-display); --type-display-m-size: clamp(2.5rem, 4vw, 3rem); --type-display-m-weight: var(--font-weight-extrabold); --type-display-m-line-height: var(--line-height-display); --type-display-m-letter-spacing: var(--letter-spacing-tight); /* ====================================================== 7. HEADING TYPOGRAPHY Section headings, card titles, modal titles, and other structural headings. ====================================================== */ /* Heading XL */ --type-heading-xl-family: var(--font-family-display); --type-heading-xl-size: var(--font-size-900); --type-heading-xl-weight: var(--font-weight-extrabold); --type-heading-xl-line-height: var(--line-height-tight); --type-heading-xl-letter-spacing: var(--letter-spacing-tight); /* Heading L */ --type-heading-l-family: var(--font-family-display); --type-heading-l-size: var(--font-size-800); --type-heading-l-weight: var(--font-weight-extrabold); --type-heading-l-line-height: var(--line-height-tight); --type-heading-l-letter-spacing: var(--letter-spacing-tight); /* Heading M */ --type-heading-m-family: var(--font-family-display); --type-heading-m-size: var(--font-size-700); --type-heading-m-weight: var(--font-weight-bold); --type-heading-m-line-height: var(--line-height-snug); --type-heading-m-letter-spacing: var(--letter-spacing-normal); /* Heading S */ --type-heading-s-family: var(--font-family-display); --type-heading-s-size: var(--font-size-600); --type-heading-s-weight: var(--font-weight-bold); --type-heading-s-line-height: var(--line-height-compact); --type-heading-s-letter-spacing: var(--letter-spacing-normal); /* ====================================================== 8. BODY TYPOGRAPHY ====================================================== */ /* Body L */ --type-body-l-family: var(--font-family-body); --type-body-l-size: var(--font-size-500); --type-body-l-weight: var(--font-weight-regular); --type-body-l-line-height: var(--line-height-normal); --type-body-l-letter-spacing: var(--letter-spacing-wide); /* Body M */ --type-body-m-family: var(--font-family-body); --type-body-m-size: var(--font-size-500); --type-body-m-weight: var(--font-weight-regular); --type-body-m-line-height: var(--line-height-relaxed); --type-body-m-letter-spacing: var(--letter-spacing-wide); /* Body S */ --type-body-s-family: var(--font-family-body); --type-body-s-size: var(--font-size-300); --type-body-s-weight: var(--font-weight-regular); --type-body-s-line-height: var(--line-height-normal); --type-body-s-letter-spacing: var(--letter-spacing-wide); /* ====================================================== 9. LEAD TYPOGRAPHY ====================================================== */ --type-lead-family: var(--font-family-body); --type-lead-size: var(--font-size-500); --type-lead-weight: var(--font-weight-regular); --type-lead-line-height: var(--line-height-normal); --type-lead-letter-spacing: var(--letter-spacing-wide); /* ====================================================== 10. SUBTITLE TYPOGRAPHY ====================================================== */ --type-subtitle-family: var(--font-family-body); --type-subtitle-size: clamp(1.25rem, 2.25vw, 2rem); --type-subtitle-weight: var(--font-weight-regular); --type-subtitle-line-height: 1.22; --type-subtitle-letter-spacing: var(--letter-spacing-wide); /* ====================================================== 11. LABEL TYPOGRAPHY ====================================================== */ --type-label-family: var(--font-family-body); --type-label-size: var(--font-size-400); --type-label-weight: var(--font-weight-semibold); --type-label-line-height: var(--line-height-compact); --type-label-letter-spacing: var(--letter-spacing-normal); /* ====================================================== 12. BUTTON TYPOGRAPHY ====================================================== */ --type-button-family: var(--font-family-body); --type-button-size: var(--font-size-600); --type-button-weight: var(--font-weight-bold); --type-button-line-height: var(--line-height-normal); --type-button-letter-spacing: var(--letter-spacing-wide); /* ====================================================== 13. CAPTION TYPOGRAPHY ====================================================== */ --type-caption-family: var(--font-family-body); --type-caption-size: var(--font-size-200); --type-caption-weight: var(--font-weight-regular); --type-caption-line-height: var(--line-height-normal); --type-caption-letter-spacing: var(--letter-spacing-wide); /* ====================================================== 14. OVERLINE TYPOGRAPHY ====================================================== */ --type-overline-family: var(--font-family-body); --type-overline-size: var(--font-size-200); --type-overline-weight: var(--font-weight-bold); --type-overline-line-height: var(--line-height-compact); --type-overline-letter-spacing: var(--letter-spacing-widest); --type-overline-transform: uppercase; /* ====================================================== 15. FORM CONTROL TYPOGRAPHY ====================================================== */ --type-control-family: var(--font-family-body); --type-control-size: var(--font-size-400); --type-control-weight: var(--font-weight-regular); --type-control-line-height: var(--line-height-normal); --type-control-letter-spacing: var(--letter-spacing-wide); /* ====================================================== 16. CODE TYPOGRAPHY ====================================================== */ --type-code-family: var(--font-family-monospace); --type-code-size: 0.9375em; --type-code-weight: var(--font-weight-regular); --type-code-line-height: var(--line-height-normal); --type-code-letter-spacing: var(--letter-spacing-normal); /* ====================================================== 17. TYPOGRAPHY SPACING ====================================================== */ --space-display-bottom: var(--space-3); --space-heading-bottom: var(--space-3); --space-subtitle-bottom: var(--space-4); --space-lead-bottom: var(--space-5); --space-body-bottom: var(--space-4); --space-caption-bottom: var(--space-2); }