@layer tokens {

:root {

  

  --color-black:    #000000;
  --color-white:    #FFFFFF;

  --color-gray-950:  #808080; 
  --color-gray-100:  #F5F5F5; 
  --color-gray-150:  #F2F2F2; 
  --color-gray-200:  #E0E0E0; 
  --color-gray-300:  #D6D6D6; 
  --color-gray-600:  #858585; 
  --color-gray-700:  #5C5C5C; 

  --color-brand-green:  #00FE48; 
  --color-brand-yellow: #F6FF00; 

  

  --color-text-primary:   var(--color-black);
  --color-text-inverse:   var(--color-white);
  --color-text-muted:     var(--color-gray-600);
  --color-text-muted-alt: var(--color-gray-700);

  --color-bg-primary:   var(--color-white);
  --color-bg-secondary: var(--color-gray-100);
  --color-bg-inverse:   var(--color-gray-950);

  --color-border-primary: var(--color-gray-200);
  --color-border-accent:  var(--color-brand-green);

  --color-overlay-black-20: rgba(0, 0, 0, 0.2);
  --color-overlay-black-48: rgba(0, 0, 0, 0.48);
  --color-overlay-black-70: rgba(0, 0, 0, 0.7);

  --gradient-rainbow: linear-gradient(270deg, #F6FF00 0%, #FF41DE 20%, #00AAFF 40%, #FF41DE 60%, #FFCC00 80%, #00FE48 100%);
  --gradient-mono: linear-gradient(270deg, #000000 0%, #808080 25%, #FFFFFF 50%, #808080 75%, #000000 100%);

  

  --font-heading: 'Hepta Slab', serif;              
  --font-accent:  'Lexend Peta', sans-serif;        
  --font-body:    'Gen Interface JP Display', sans-serif; 
  --font-number:  'Roboto', sans-serif;             
  --font-latin:   'Helvetica Neue', Arial, sans-serif; 

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  36px;
  --text-4xl:  40px;
  --text-5xl:  64px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  

  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  16px;
  --spacing-4:  24px;
  --spacing-5:  32px;
  --spacing-6:  48px;
  --spacing-7:  64px;
  --spacing-8:  96px;
  --spacing-9:  128px;
  --spacing-10: 256px;

  

  --border-width-thin:  1px;
  --border-width-thick: 2px;
  --border-width-heavy: 4px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  

  --container-max-width: 1200px;
  --container-padding:   var(--spacing-4);

  --bp-tb: 768px;
  --bp-pc: 1280px;
}

}