:root {
  /* Text */
  --primaryText:      #dedede;
  --brightText:       #ffffff;
  --mutedText:        #aaaaaa;
  --subheadText:      #adb5bd;

  /* Brand palette */
  --solPink:          #b8539f;
  --solPinkBack20:    #360d2c;
  --solGreen:         #00afaa;
  --solGreenBorder:   #00afaa33; /* 20% opacity */
  --solPurple:        #5f2c8a;
  --solBlueText:      #180a4e;


  /* Backgrounds */
  --bgEdge:           #26003d;
  --bgMiddle:         #000000;
  --bgTrusted:        #00312f;

  /* Surface tokens (ht- design system) */
  --ht-surface:       rgba(255, 255, 255, 0.04);
  --ht-surface-hover: rgba(255, 255, 255, 0.07);
  --ht-border:        rgba(0, 175, 170, 0.2);
  --ht-border-subtle: rgba(255, 255, 255, 0.08);

  --font-xs:    1.2rem;   /* 12px - captions, labels */
  --font-sm:    1.4rem;   /* 14px - small text, footnotes */
  --font-base:  1.6rem;   /* 16px - body text (base) */
  --font-md:    1.8rem;   /* 18px - slightly larger body */
  --font-lg:    2.0rem;   /* 20px - small headings, lead text */
  --font-xl:    2.4rem;   /* 24px - h3 / subheadings */
  --font-2xl:   3.2rem;   /* 32px - h2 */
  --font-3xl:   4.0rem;   /* 40px - h1 */
  --font-4xl:   4.8rem;   /* 48px - hero headings */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

}

        html {font-size: 62.5%; /* 1rem = 10px; respects user browser settings */}
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: #333;
            font-size: 1.6rem; /* 16px */
        }
        
        .container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background-color: #faf5fd;
            padding: 20px;
            border-right: 1px solid #ddd;
        }
        
        .sidebar nav ul {
            list-style: none;
        }
        
        .sidebar nav ul li {
            margin-bottom: 10px;
        }
        
        .sidebar nav ul li a {
            text-decoration: none;
            color: #333;
            display: block;
            padding: 8px 0;
        }
        
        .sidebar nav ul li a:hover {
            color: #0066cc;
        }
        
        .content {
            flex: 1;
            padding: 40px;
            overflow-y: auto;
        }
        
        h1 {
            margin-bottom: 20px;
            font-size: 24px;
        }
        
        h2 {
            margin-top: 30px;
            margin-bottom: 15px;
        }
        
        p {
            margin-bottom: 15px;
        }

        a {
            color: var(--solGreen);
            text-decoration: none;
        }

footer {
    margin-top: auto;
    width: 100%;
}

.footer-inner {
    max-width: 125rem;
    text-align: center;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.6rem;
    font-weight: 500;
}
.footer-bottom {
    font-size: 1.6rem;
    padding: 0 6rem;
}

@media (max-width: 768px) {
    .footer-bottom { padding: 0 2.4rem; }
}