/* Develo Design System - CSS Variables */
/* Generated from Figma Variables */

:root {
  /* Colors - Brand - Primary Blue */
  --color-brand-primary-blue: #563cfa;
  --color-brand-primary-blue-100: #c6bff8;
  --color-brand-primary-blue-50: #edebfc;

  /* Colors - Brand - Blue */
  --color-brand-blue-200: #a1ace3;
  --color-brand-blue-400: #4a62d3;
  --color-brand-blue-800: #1a2175;
  --color-brand-bright-50: #e7eaf8;

  /* Colors - Brand - Cream */
  --color-brand-cream-100: #f0e0c3;
  --color-brand-cream-50: #f8f2e8;

  /* Colors - Neutral */
  --color-neutral-white: #ffffff;
  --color-neutral-black: #020303;
  --color-neutral-grey-50: #f9fafb;
  --color-neutral-grey-100: #f3f4f6;
  --color-neutral-grey-200: #e5e7eb;
  --color-neutral-grey-300: #d1d5db;
  --color-neutral-grey-400: #9ca3af;
  --color-neutral-grey-500: #6b7380;
  --color-neutral-grey-600: #4b5563;
  --color-neutral-grey-700: #374151;
  --color-neutral-grey-800: #1f2937;
  --color-neutral-grey-900: #111827;

  /* Colors - Transparent */
  --color-transparent-black-10: rgba(2, 3, 3, 0.10);
  --color-transparent-black-90: rgba(2, 3, 3, 0.90);
  --color-transparent-white-10: rgba(255, 255, 255, 0.10);
  --color-transparent-white-90: rgba(255, 255, 255, 0.90);
  
  /* Typography - Display (Syne) */
  --font-d1-family: "Syne", sans-serif;
  --font-d1-size: 96px;
  --font-d1-weight: 400;
  --font-d1-line-height: 102px;
  --font-d1-letter-spacing: -0.61px;
  
  --font-d2-family: "Syne", sans-serif;
  --font-d2-size: 62px;
  --font-d2-weight: 400;
  --font-d2-line-height: 68px;
  --font-d2-letter-spacing: -0.61px;
  
  --font-d3-family: "Syne", sans-serif;
  --font-d3-size: 48px;
  --font-d3-weight: 400;
  --font-d3-line-height: 56px;
  --font-d3-letter-spacing: -0.61px;
  
  /* Typography - Headings (Syne) */
  --font-h1-family: "Syne", sans-serif;
  --font-h1-size: 38px;
  --font-h1-weight: 400;
  --font-h1-line-height: 44px;
  --font-h1-letter-spacing: -0.37px;
  
  --font-h2-family: "Syne", sans-serif;
  --font-h2-size: 32px;
  --font-h2-weight: 400;
  --font-h2-line-height: 38px;
  --font-h2-letter-spacing: -0.31px;
  
  --font-h3-family: "Syne", sans-serif;
  --font-h3-size: 24px;
  --font-h3-weight: 400;
  --font-h3-line-height: 30px;
  --font-h3-letter-spacing: 0px;
  
  --font-h4-family: "Syne", sans-serif;
  --font-h4-size: 21px;
  --font-h4-weight: 400;
  --font-h4-line-height: 27px;
  --font-h4-letter-spacing: -0.21px;
  
  --font-h5-family: "Syne", sans-serif;
  --font-h5-size: 17px;
  --font-h5-weight: 400;
  --font-h5-line-height: 22px;
  --font-h5-letter-spacing: 0px;
  
  --font-h6-family: "Syne", sans-serif;
  --font-h6-size: 15px;
  --font-h6-weight: 400;
  --font-h6-line-height: 22px;
  --font-h6-letter-spacing: 0px;
  
  /* Typography - Paragraphs (Manrope) */
  --font-paragraph-large-family: "Manrope", sans-serif;
  --font-paragraph-large-size: 18px;
  --font-paragraph-large-weight-regular: 400;
  --font-paragraph-large-weight-medium: 500;
  --font-paragraph-large-weight-light: 300;
  --font-paragraph-large-line-height: 26px;
  
  --font-paragraph-default-family: "Manrope", sans-serif;
  --font-paragraph-default-size: 16px;
  --font-paragraph-default-weight-regular: 400;
  --font-paragraph-default-weight-medium: 500;
  --font-paragraph-default-line-height: 25px;
  
  --font-paragraph-small-family: "Manrope", sans-serif;
  --font-paragraph-small-size: 14px;
  --font-paragraph-small-weight-regular: 400;
  --font-paragraph-small-weight-medium: 500;
  --font-paragraph-small-line-height: 21px;
  
  --font-paragraph-xsmall-family: "Manrope", sans-serif;
  --font-paragraph-xsmall-size: 12px;
  --font-paragraph-xsmall-weight: 400;
  --font-paragraph-xsmall-line-height: 14px;
  
  /* Typography - Buttons (Manrope) */
  --font-button-quote-family: "Manrope", sans-serif;
  --font-button-quote-size: 28px;
  --font-button-quote-weight: 400;
  --font-button-quote-line-height: 36px;
  --font-button-quote-letter-spacing: -0.37px;
  
  --font-button-default-family: "Manrope", sans-serif;
  --font-button-default-size: 18px;
  --font-button-default-weight: 400;
  --font-button-default-line-height: 18px;
  
  --font-button-small-family: "Manrope", sans-serif;
  --font-button-small-size: 16px;
  --font-button-small-weight: 400;
  --font-button-small-line-height: 16px;
  
  /* Border Radius */
  --radius-none: 0px;
  --radius-20: 20px;
  
  /* Spacing - Gaps */
  --gap-gap-0: 0px;
  --gap-gap-2: 2px;
  --gap-gap-4: 4px;
  --gap-gap-6: 6px;
  --gap-gap-8: 8px;
  --gap-gap-12: 12px;
  --gap-gap-16: 16px;
  --gap-gap-20: 20px;
  --gap-gap-24: 24px;
  --gap-gap-32: 32px;
  --gap-gap-40: 40px;
  --gap-gap-60: 60px;
  --gap-gap-80: 80px;
  
  /* Border & Stroke */
  --stroke-border: 1px;
  --stroke-focus-ring: 2px;
  
  /* Icon Sizes */
  --icon-small: 16px;
  --icon-medium: 24px;
  --icon-large: 32px;
  
  /* Padding - Horizontal */
  --padding-horizontal-0: 0px;
  --padding-horizontal-12: 12px;
  --padding-horizontal-24: 24px;
  --padding-horizontal-40: 40px;
  --padding-horizontal-100: 100px;
  
  /* Padding - Vertical */
  --padding-vertical-0: 0px;
  --padding-vertical-6: 6px;
  --padding-vertical-12: 12px;
  --padding-vertical-24: 24px;
  --padding-vertical-40: 40px;
  --padding-vertical-60: 60px;
  --padding-vertical-80: 80px;
  --padding-vertical-120: 120px;
}

/* Utility Classes for CSS Variables */
.d1 {
  font-family: var(--font-d1-family);
  font-size: var(--font-d1-size);
  font-weight: var(--font-d1-weight);
  line-height: var(--font-d1-line-height);
  letter-spacing: var(--font-d1-letter-spacing);
}

.d2 {
  font-family: var(--font-d2-family);
  font-size: var(--font-d2-size);
  font-weight: var(--font-d2-weight);
  line-height: var(--font-d2-line-height);
  letter-spacing: var(--font-d2-letter-spacing);
}

.d3 {
  font-family: var(--font-d3-family);
  font-size: var(--font-d3-size);
  font-weight: var(--font-d3-weight);
  line-height: var(--font-d3-line-height);
  letter-spacing: var(--font-d3-letter-spacing);
}

.h1 {
  font-family: var(--font-h1-family);
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  line-height: var(--font-h1-line-height);
  letter-spacing: var(--font-h1-letter-spacing);
}

.h2 {
  font-family: var(--font-h2-family);
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  line-height: var(--font-h2-line-height);
  letter-spacing: var(--font-h2-letter-spacing);
}

.h3 {
  font-family: var(--font-h3-family);
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  line-height: var(--font-h3-line-height);
  letter-spacing: var(--font-h3-letter-spacing);
}

.h4 {
  font-family: var(--font-h4-family);
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  line-height: var(--font-h4-line-height);
  letter-spacing: var(--font-h4-letter-spacing);
}

.h5 {
  font-family: var(--font-h5-family);
  font-size: var(--font-h5-size);
  font-weight: var(--font-h5-weight);
  line-height: var(--font-h5-line-height);
  letter-spacing: var(--font-h5-letter-spacing);
}

.h6 {
  font-family: var(--font-h6-family);
  font-size: var(--font-h6-size);
  font-weight: var(--font-h6-weight);
  line-height: var(--font-h6-line-height);
  letter-spacing: var(--font-h6-letter-spacing);
}

.paragraph-large {
  font-family: var(--font-paragraph-large-family);
  font-size: var(--font-paragraph-large-size);
  line-height: var(--font-paragraph-large-line-height);
}

.paragraph-large-regular {
  font-weight: var(--font-paragraph-large-weight-regular);
}

.paragraph-large-medium {
  font-weight: var(--font-paragraph-large-weight-medium);
}

.paragraph-large-light {
  font-weight: var(--font-paragraph-large-weight-light);
  text-decoration: underline;
}

.paragraph-default {
  font-family: var(--font-paragraph-default-family);
  font-size: var(--font-paragraph-default-size);
  line-height: var(--font-paragraph-default-line-height);
}

.paragraph-default-regular {
  font-weight: var(--font-paragraph-default-weight-regular);
}

.paragraph-default-medium {
  font-weight: var(--font-paragraph-default-weight-medium);
}

.paragraph-default-underline {
  font-weight: var(--font-paragraph-default-weight-regular);
  text-decoration: underline;
}

.paragraph-small {
  font-family: var(--font-paragraph-small-family);
  font-size: var(--font-paragraph-small-size);
  line-height: var(--font-paragraph-small-line-height);
}

.paragraph-small-regular {
  font-weight: var(--font-paragraph-small-weight-regular);
}

.paragraph-small-medium {
  font-weight: var(--font-paragraph-small-weight-medium);
}

.paragraph-small-underline {
  font-weight: var(--font-paragraph-small-weight-regular);
  text-decoration: underline;
}

.paragraph-xsmall {
  font-family: var(--font-paragraph-xsmall-family);
  font-size: var(--font-paragraph-xsmall-size);
  font-weight: var(--font-paragraph-xsmall-weight);
  line-height: var(--font-paragraph-xsmall-line-height);
}

.paragraph-xsmall-uppercase {
  text-transform: uppercase;
}

.button-quote {
  font-family: var(--font-button-quote-family);
  font-size: var(--font-button-quote-size);
  font-weight: var(--font-button-quote-weight);
  line-height: var(--font-button-quote-line-height);
  letter-spacing: var(--font-button-quote-letter-spacing);
}

.button-default {
  font-family: var(--font-button-default-family);
  font-size: var(--font-button-default-size);
  font-weight: var(--font-button-default-weight);
  line-height: var(--font-button-default-line-height);
}

.button-small {
  font-family: var(--font-button-small-family);
  font-size: var(--font-button-small-size);
  font-weight: var(--font-button-small-weight);
  line-height: var(--font-button-small-line-height);
}

/* Color Utility Classes */
.color-brand-primary {
  color: var(--color-brand-primary-blue);
}

.bg-brand-primary {
  background-color: var(--color-brand-primary-blue);
}

.color-accent-berry {
  color: var(--color-accent-berry);
}

.bg-accent-berry {
  background-color: var(--color-accent-berry);
}

.color-neutral-white {
  color: var(--color-neutral-white);
}

.bg-neutral-white {
  background-color: var(--color-neutral-white);
}

.color-neutral-black {
  color: var(--color-neutral-black);
}

.bg-neutral-black {
  background-color: var(--color-neutral-black);
}

/* Border Radius Utility Classes */
.radius-none {
  border-radius: var(--radius-none);
}

.radius-20 {
  border-radius: var(--radius-20);
}