@font-face {
  font-family: 'CyberFont';
  src: url('../assets/fonts/cyber-alert.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /*
  * Dark Theme Colors
  * 1: Unselected: Normal
  * 2: Unselected: Hover
  * 3: Unselected: Active
  * 4: Unselected: Disabled
  * 5: Selected: Normal
  * 6: Selected: Hover
  * 7: Selected: Active
  * 8: Selected: Disabled
  */
  body.theme-dark {
    --pg-fg-1: #e0dafb;
    --pg-fg-2: #cec4f8;
    --pg-fg-3: #d5cdf9;
    --pg-fg-4: rgba(244, 242, 253, 0.2);
    --pg-fg-5: #ece8fc;
    --pg-fg-6: #d9d1fa;
    --pg-fg-7: #000000;
    --pg-fg-8: rgba(244, 242, 253, 0.25);

    --pg-bg-1: #0a0425;
    --pg-bg-2: #130844;
    --pg-bg-3: #0e0632;
    --pg-bg-4: #04020e;
    --pg-bg-5: #190a5c;
    --pg-bg-6: #230e81;
    --pg-bg-7: #210d77;
    --pg-bg-8: #C0C0C0;
  
    --pg-border-1: solid 1px #240f85;
    --pg-border-2: solid 1px #2e129b;
    --pg-border-3: solid 1px #291192;
    --pg-border-4: solid 1px #130a43;
    --pg-border-5: solid 1px #2b119c;
    --pg-border-6: solid 1px #3214a9;
    --pg-border-7: solid 1px #2d13a0;
    --pg-border-8: solid 1px #11093e;
  }


  /*
  * Spacings & Paddings
  */
  --pg-spacing-xxs: 0.125rem; /* 2px */
  --pg-spacing-xs: 0.25rem;   /* 4px */
  --pg-spacing-sm: 0.375rem;  /* 6px */
  --pg-spacing-md: 0.5rem;    /* 8px */
  --pg-spacing-lg: 0.75rem;   /* 12px */
  --pg-spacing-xl: 1rem;      /* 16px */

  --pg-padding-xxs: var(--pg-spacing-xxs);
  --pg-padding-xs: var(--pg-spacing-xs);
  --pg-padding-sm: var(--pg-spacing-sm);
  --pg-padding-md: var(--pg-spacing-md);
  --pg-padding-lg: var(--pg-spacing-lg);
  --pg-padding-xl: var(--pg-spacing-xl);

  /* 
  * Heights & Widths
  */
  --pg-height-default: 2.75rem;   /* 44px */
  --pg-height-xxs: 0.75rem;       /* 12px */
  --pg-height-xs: 1rem;           /* 16px */
  --pg-height-sm: 1.5rem;         /* 24px */
  --pg-height-md: 2rem;           /* 32px */
  --pg-height-lg: 2.5rem;         /* 40px */
  --pg-height-xl: 3rem;           /* 48px */
  --pg-height-xxl: 3.5rem;        /* 56px */

  --pg-width-xxs: 0.75rem;        /* 12px */
  --pg-width-xs: 1rem;            /* 16px */
  --pg-width-sm: 1.5rem;          /* 24px */
  --pg-width-md: 2rem;            /* 32px */
  --pg-width-lg: 2.5rem;          /* 40px */
  --pg-width-xl: 3.5rem;          /* 56px */

  /*
  * Border Radius 
  */
  --pg-border-radius-xxs: 0.125rem; /* 2px */
  --pg-border-radius-xs: 0.25rem;   /* 4px */
  --pg-border-radius-sm: 0.375rem;  /* 6px */
  --pg-border-radius-md: 0.5rem;    /* 8px */
  --pg-border-radius-lg: 0.75rem;   /* 12px */
  --pg-border-radius-xl: 1rem;      /* 16px */

  /*
  * Typography 
  */
  --pg-font-family-base: 'Inter', system-ui, sans-serif;
  --pg-font-family-mono: 'Source Code Pro', monospace;

  --pg-font-size-sm: 0.875rem; /* 14px */
  --pg-font-size-md: 1rem;     /* 16px */
  --pg-font-size-lg: 1.125rem; /* 18px */
  --pg-font-size-xl: 1.25rem;  /* 20px */

  --pg-font-weight-normal: 400;
  --pg-font-weight-bold: 700;

  --pg-line-height-sm: 1.25;
  --pg-line-height-md: 1.5;

  /*
  * Box Shadows
  */
  --pg-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --pg-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --pg-shadow-lg: 0 10px 15px rgba(0,0,0,0.15);

  /*
  * Z-Index scale
  */
  --pg-z-index-dropdown: 1000;
  --pg-z-index-modal: 1100;
  --pg-z-index-tooltip: 1200;

  /*
  * Animations
  */
  --pg-transition-fast: 150ms ease-in-out;
  --pg-transition-default: 300ms ease-in-out;

}