/*
* =========================================
*  1. PRIMITIVE TOKENS (RAW VALUES)
* ========================================= */

:root {

 /* SPACING SCALE */
  --space-0: 0;
  --space-1: 1rem;
  --space-2: 2rem;
  --space-3: 3rem;
  --space-4: 4rem;
  --space-5: 5rem;
  --space-6: 6rem;
  --space-7: 7rem;
  --space-8: 8rem;
  --space-9: 9rem;
  --space-10: 10rem;

  /* FONT FAMILIES */
  --font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
  --font-tech: "Manrope", system-ui, -apple-system, sans-serif; 

  /* FONT SIZES */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-5xl: 5rem;
  --text-6xl: 6rem;

  /* RADIUS */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 25px;

  /* ROTATION */
  --rotate-sm: 3deg; 
  --rotate-md: 7deg; 
  --rotate-lg: 15deg; 

  /* GRADIENTS */ 
  --gradient-rotation: -45deg;
}


/* =========================================
 *    2. SEMANTIC TOKENS (MEANING)
 * ========================================= */

:root {

  /* COLOR MAPPINGS */
  --color-primary: var(--wp--custom--color--primary);
  --color-accent: var(--wp--custom--color--accent);
  --color-accent-light: var(--wp--custom--color--accent-light);
  --color-text: var(--wp--custom--color--text);
  --color-text-variant: var(--wp--custom--color--text-variant); 
  --color-surface: var(--wp--custom--color--surface);
  --color-surface-low: var(--wp--custom--color--surface-low); 
  --color-surface-lowest: var(--wp--custom--color--surface-lowest); 
  --color-surface-high: var(--wp--custom--color--surface-high); 
  --color-border: var(--wp--custom--color--border);
  --color-heading: var(--wp--custom--color--heading); 


  /* SPACING (semantic) */
  --space-section: var(--space-9);
  --space-section-lg: var(--space-9);
  --space-section-side: var(--space-2);
  --space-section-top: var(--space-6);
  --space-content: var(--space-5);

  /* TYPOGRAPHY */
  --font-body: var(--font-sans);
  --font-heading: var(--font-tech);
}