.custom-box {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    background-color: var(--color-background);
    color: var(--color-text);
  }
  

  .info-box {
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--color-primary);
    background-color: var(--surface-bg);
    color: var(--color-text);
  }
  

  

  .box-shortcode {
    border: 1px solid #ccc;         /* Light gray border */
    padding: 10px;                  /* Inner spacing */
    border-radius: 5px;             /* Rounded corners */
    background-color: #e4e1e2;      /* Light gray background */
    color: #333;  
  }

  .dark .box-shortcode {
    border: 1px solid #ccc;         /* Light gray border */
    padding: 10px;                  /* Inner spacing */
    border-radius: 5px;             /* Rounded corners */
    background-color: #3d3b3c;      /* Light gray background */
    color: #f8f2f2;  
  }