:root {
  --content-width-process: 46.875em; 
  /* === Scrollbars === */
  --scrollbar-width: 0.375em;         /* 6px */

  /* === Process Icons === */
  --icon-size-process-lg: 4em;        /* 64px */
  --icon-size-process-sm: 2.25em;     /* 36px */

  /* === Process Text === */
  --content-width-process-text: 37.5em;  /* 600px */

  /* === Section Card === */
  --card-width-section: 18.75em;      /* 300px */

  /* === Section Circle Image === */
  --image-circle-size: 7.5em;         /* 120px */


  /* === COLORS === */
  --color-bg: #f6f5f3;               
  --color-bg-200: #e7e6e3;           
  --color-bg-300: #d8d7d3;           
  
  --color-primary: #1f202f;          
  --color-primary-200: #333333;      
  --color-primary-300: #1f202f;    

  --color-accent: #E44E7A;           
  --color-accent-200: #9c2f2a;       
  --color-accent-300: #741e1a;       
  
  --color-title: #212424;
  --color-text: #1f202f;             
  --color-text-muted: #8c8c8c;       
  --color-white: #ffffff;

  /* === TYPOGRAPHY === */
  --font-primary: 'Chillax-Regular';
  --font-heading: 'Chillax-Medium';


  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;


  /* === SPACING SYSTEM (REM + px) === */
  --spacing-xxxs: 0.125em;  /* 2px */ 
  --spacing-xxs: 0.25em;  /* 4px */
  --spacing-xs: 0.5em;    /* 8px */
  --spacing-sm: 1em;      /* 16px */
  --spacing-md: 2em;      /* 32px */
  --spacing-lg: 4em;      /* 64px */
  --spacing-xl: 6em;      /* 96px */
  --spacing-xxl: 8em;     /* 128px */
  --spacing-xxxl: 10em;


  /* === FONT SIZES === */
  --text-xs: 0.75em;      /* 12px */
  --text-sm: 0.875em;     /* 14px */
  --text-base: 1em;       /* 16px */
  --text-md: 1.125em;     /* 18px */
  --text-lg: 1.5em;       /* 24px */
  --text-xl: 2.25em;      /* 36px */
  --text-2xl: 3em;        /* 48px */
  --text-3xl: 4.5em;      /* 72px */
  --text-4xl: 6em;

  --icon-size-xxxs: 0.125em;  /* 2px */ 
  --icon-size-sm: 1.125em;  /* 18px */
  --icon-size-md: 1.5em;    /* 24px */
  --icon-size-lg: 2.25em;   /* 36px */
  --icon-size-xl: 3em;      /* 48px */


  /* === BORDER RADIUS === */
  --radius-sm: 0.25em;    /* 4px */
  --radius-md: 0.5em;     /* 8px */
  --radius-lg: 1em;       /* 16px */

  --card-max-width: 16.25em; /* 260px */


  --image-size-sm: 6em;      /* 96px */
  --image-size-md: 8em;      /* 128px */
  --image-size-lg: 10em;     /* 160px */
  --image-size-xl: 12em;     /* 192px */

  /* === LAYOUT === */
  --menu-width: 5.25em;           /* 84px */
  --menu-width-open: 26.25em;     /* 420px */
  --menu-width-mobile: 100%;
  --menu-height-mobile: 2em;      /* 80px */
  --menu-panel-width: 66em; 

  /* === TRANSITIONS === */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-in-out);
  --transition-default: 0.4s var(--ease-in-out);

  /* === Z-INDEX === */
  --z-content: 1;
  --z-overlay: 90;
  --z-menu: 100;
}