/* =====================================================
   STERDIGITAAL FRAMEWORK
   Version 1.0
   Design Tokens
===================================================== */

:root {

  /* ==========================================
     COLORS
  ========================================== */

  --color-primary: #7B599F;
  --color-secondary: #22595D;

  --color-background: #FBF2F4;
  --color-surface: #FCF7F7;

  --color-text: #302222;
  --color-muted: #DEE3E2;
  --color-white: #FFFFFF;

  --color-success: #4CAF50;
  --color-warning: #F4B400;
  --color-danger: #D64545;


  /* ==========================================
     TYPOGRAPHY
  ========================================== */

  --font-heading: "TT Ramillas", Georgia, serif;
  --font-body: "Montserrat", Arial, sans-serif;


  /* ==========================================
     FONT SIZES
  ========================================== */

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 3rem;


  /* ==========================================
     SPACING
  ========================================== */

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;


  /* ==========================================
     BORDER RADIUS
  ========================================== */

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 999px;


  /* ==========================================
     SHADOWS
  ========================================== */

  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);

  --shadow-md: 0 8px 20px rgba(0,0,0,.10);

  --shadow-lg: 0 16px 40px rgba(0,0,0,.15);


  /* ==========================================
     CONTAINER
  ========================================== */

  --container-width: 1200px;

}