diff --git a/bases/rsptx/admin_server_api/routers/auth.py b/bases/rsptx/admin_server_api/routers/auth.py
index 74ce17c76..57bfd4856 100644
--- a/bases/rsptx/admin_server_api/routers/auth.py
+++ b/bases/rsptx/admin_server_api/routers/auth.py
@@ -724,6 +724,7 @@ async def profile_page(request: Request):
             "user": user,
             "errors": [],
             "success": None,
+            "student_page": True,
             **(await _navbar_context(user)),
         },
     )
@@ -753,6 +754,7 @@ async def profile_post(
                 "user": user,
                 "errors": errors,
                 "success": None,
+                "student_page": True,
                 **(await _navbar_context(user)),
             },
         )
@@ -769,6 +771,7 @@ async def profile_post(
             "user": updated,
             "errors": [],
             "success": "Profile updated successfully.",
+            "student_page": True,
             **(await _navbar_context(updated)),
         },
     )
@@ -788,6 +791,7 @@ async def delete_account(request: Request, confirm: str = Form(default="")):
                 "user": user,
                 "errors": ["Username confirmation did not match. Account not deleted."],
                 "success": None,
+                "student_page": True,
                 **(await _navbar_context(user)),
             },
         )
diff --git a/components/rsptx/templates/_base.html b/components/rsptx/templates/_base.html
index 6e1119ae5..fe1984e21 100644
--- a/components/rsptx/templates/_base.html
+++ b/components/rsptx/templates/_base.html
@@ -37,11 +37,13 @@
         {% include "_navbar.html" %}
         {% endblock %}
 
-        <div class="container-fluid">
-            <!-- child template -->
-            {% block content %}
-            {% endblock %}
-        </div>
+        <main>
+            <div class="container-fluid">
+                <!-- child template -->
+                {% block content %}
+                {% endblock %}
+            </div>
+        </main>
 
         {% include 'footer.html' %}
 
diff --git a/components/rsptx/templates/admin/auth/_auth_base.html b/components/rsptx/templates/admin/auth/_auth_base.html
index d37b00a16..badea924e 100644
--- a/components/rsptx/templates/admin/auth/_auth_base.html
+++ b/components/rsptx/templates/admin/auth/_auth_base.html
@@ -18,18 +18,19 @@
     <a class="navbar-brand" href="https://runestone.academy">
         <img src="/staticAssets/RAIcon.png" height="30px" alt="Runestone Logo"/>
     </a>
+    {% block nav_items %}
     <div class="ml-auto nav-item">
         <a class="nav-link" href="/admin/auth/login">Log In</a>
     </div>
-    <div class="nav-item">
-        <a class="nav-link" href="https://blog.runestone.academy/pages/faq.html">Help</a>
-    </div>
+    {% endblock %}
 </nav>
 {% endif %}
 
-<div class="container-fluid">
-    {% block content %}{% endblock %}
-</div>
+    <main>
+        <div class="container-fluid">
+            {% block content %}{% endblock %}
+        </div>
+    </main>
 
 {% include 'footer.html' %}
 
diff --git a/components/rsptx/templates/admin/auth/courses.html b/components/rsptx/templates/admin/auth/courses.html
index b989e38fd..ed98fbe1c 100644
--- a/components/rsptx/templates/admin/auth/courses.html
+++ b/components/rsptx/templates/admin/auth/courses.html
@@ -14,10 +14,10 @@ <h1>Choose Your Course</h1>
     <form method="post" action="/admin/auth/courses" id="coursesForm">
         <input type="hidden" name="institution" value="{{ institution }}">
 
-        <div class="section-title">Enter Course Name Directly</div>
+        <div class="section-title" id="direct-course-label">Enter Course Name Directly</div>
         <p class="text-muted small">If your instructor gave you a specific course name, type it here.</p>
         <div class="form-group">
-            <input type="text" class="form-control" id="direct_course" placeholder="e.g. luther_thinkcspy_fall25"
+            <input type="text" class="form-control" id="direct_course" aria-labelledby="direct-course-label" placeholder="e.g. luther_thinkcspy_fall25"
                    oninput="selectDirect(this.value)">
         </div>
 
@@ -28,7 +28,7 @@ <h1>Choose Your Course</h1>
         <div class="course-option">
             <div class="form-check">
                 <input class="form-check-input" type="radio" name="course_name"
-                       id="ic_{{ course.course_name }}" value="{{ course.course_name }}">
+                       id="ic_{{ course.course_name }}" value="{{ course.course_name }}" aria-label="Text filter for course or author name">
                 <label class="form-check-label" for="ic_{{ course.course_name }}">
                     <strong>{{ course.course_name }}</strong>
                     {% if course.institution %}<span class="text-muted"> — {{ course.institution }}</span>{% endif %}
@@ -40,7 +40,7 @@ <h1>Choose Your Course</h1>
 
         <div class="section-title">Open Books (Self-Study)</div>
         <p class="text-muted small">These books are available to anyone. Pick the one you want to read.</p>
-        <input type="text" class="form-control" id="bookFilter" placeholder="Filter books by title or author…">
+        <input type="text" class="form-control" id="bookFilter" placeholder="Filter books by title or author…"  aria-label="Text filter for course or author name">
         <div id="bookList">
         {% for book in open_books %}
         <div class="course-option book-entry"
diff --git a/components/rsptx/templates/admin/auth/donate.html b/components/rsptx/templates/admin/auth/donate.html
index 0096df772..dfc678ef9 100644
--- a/components/rsptx/templates/admin/auth/donate.html
+++ b/components/rsptx/templates/admin/auth/donate.html
@@ -42,7 +42,7 @@ <h1>Support Runestone Academy</h1>
                 <label for="donate100">$100</label>
             </div>
             <div class="amount-option other-amount">
-                Other: <input type="text" class="form-control" name="donate" id="donateother" value=""/>
+                <label for="donateother">Other:</label> <input type="text" class="form-control" name="donate" id="donateother" value=""/>
                 Anything more than $1 is appreciated.
             </div>
             <div class="donate-actions">
diff --git a/components/rsptx/templates/admin/auth/login.html b/components/rsptx/templates/admin/auth/login.html
index faac9f8cc..b18609a13 100644
--- a/components/rsptx/templates/admin/auth/login.html
+++ b/components/rsptx/templates/admin/auth/login.html
@@ -2,6 +2,10 @@
 
 {% block title %}Log In — Runestone Academy{% endblock %}
 
+
+{% block nav_items %}
+{% endblock %}
+
 {% block content %}
 <div class="auth-card">
     <h1>Log In</h1>
diff --git a/components/rsptx/templates/admin/auth/profile.html b/components/rsptx/templates/admin/auth/profile.html
index 0e54238c9..9476654d4 100644
--- a/components/rsptx/templates/admin/auth/profile.html
+++ b/components/rsptx/templates/admin/auth/profile.html
@@ -38,10 +38,10 @@ <h1>Edit Profile</h1>
                    value="{{ user.email }}" required>
         </div>
 
-        <div class="section-label">Username</div>
+        <div class="section-label" id="username-label">Username</div>
         <div class="form-group">
-            <input type="text" class="form-control" value="{{ user.username }}" disabled>
-            <small class="form-text text-muted">Usernames cannot be changed.</small>
+            <input type="text" class="form-control" value="{{ user.username }}" disabled aria-describedby="username-help" aria-labelledby="username-label">
+            <small class="form-text text-muted" id="username-help">Usernames cannot be changed.</small>
         </div>
 
         <button type="submit" class="btn btn-rs-primary btn-rs-primary--inline">Save Changes</button>
@@ -53,8 +53,8 @@ <h1>Edit Profile</h1>
     </div>
 
     <div class="danger-zone">
-        <h5>Delete Account</h5>
-        <p class="text-muted small">This permanently removes your account and all associated data. This cannot be undone.</p>
+        <h2>Delete Account</h2>
+        <p class="small">This permanently removes your account and all associated data. This cannot be undone.</p>
         <button class="btn-danger-outline" data-toggle="collapse" data-target="#deleteForm">
             Delete My Account
         </button>
@@ -62,9 +62,9 @@ <h5>Delete Account</h5>
             <form method="post" action="/admin/auth/delete-account"
                   onsubmit="return confirm('This will permanently delete your account. Are you sure?')">
                 <div class="form-group">
-                    <label>Type your username <strong>{{ user.username }}</strong> to confirm:</label>
+                    <label for="confirm">Type your username <strong>{{ user.username }}</strong> to confirm:</label>
                     <input type="text" class="form-control" name="confirm" required
-                           placeholder="{{ user.username }}">
+                           placeholder="{{ user.username }}" id="confirm">
                 </div>
                 <button type="submit" class="btn-danger-outline">Permanently Delete Account</button>
             </form>
diff --git a/components/rsptx/templates/assignment/student/studentreport.html b/components/rsptx/templates/assignment/student/studentreport.html
index 98785e955..861664f68 100644
--- a/components/rsptx/templates/assignment/student/studentreport.html
+++ b/components/rsptx/templates/assignment/student/studentreport.html
@@ -40,11 +40,11 @@ <h2>Student Report - {{ user.first_name }} {{ user.last_name }}</h2>
           <table>
             <thead>
               <tr>
-                <td>Assignment</td>
-                <td>Due Date</td>
-                <td>Score</td>
-                <td>Percent</td>
-                <td>Avg Score</td>
+                <th>Assignment</th>
+                <th>Due Date</th>
+                <th>Score</th>
+                <th>Percent</th>
+                <th>Avg Score</th>
               </tr>
             </thead>
             <tbody>
@@ -74,6 +74,11 @@ <h2>Student Report - {{ user.first_name }} {{ user.last_name }}</h2>
         <div class="dash-section-header">Recent Activity (Time in UTC)</div>
         <div class="dash-section-content scroll">
           <table class="nodec">
+            <tr>
+              <th>Timestamp</th>
+              <th>Event</th>
+              <th>Div ID</th>
+            </tr>
             {% for row in activity %}
             <tr>
               <td>{{ row.timestamp }}</td>
diff --git a/components/rsptx/templates/book/course/current_course.html b/components/rsptx/templates/book/course/current_course.html
index ea05fc3ae..a8322b173 100644
--- a/components/rsptx/templates/book/course/current_course.html
+++ b/components/rsptx/templates/book/course/current_course.html
@@ -16,17 +16,20 @@
 
 {% set navitems %}
 {% if course_list|length > 1 %}
-<li class="nav-item">
-  <span class="nav-link">
-    Change course:
-    <select id="course_chooser" onchange="change_course()">
-      {% for c in course_list: %}
-      <option {% if c.course_name == course.course_name %}selected{% endif %} value="{{c.course_name}}">
-        {{c.course_name}}
-      </option>
-      {% endfor %}
-    </select>
-  </span>
+<li class="nav-item dropdown">
+  <button class="nav-link dropdown-toggle course-chooser-toggle" type="button" id="course_chooser_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Change course
+  </button>
+  <div class="dropdown-menu" aria-labelledby="course_chooser_toggle">
+    {% for c in course_list: %}
+      {% if c.course_name == course.course_name %}
+      <span class="dropdown-item active" aria-current="page">{{c.course_name}} (current)</span>
+      {% else %}
+      <button type="button" class="dropdown-item course-chooser-option" data-course-name="{{c.course_name}}">{{c.course_name}}</button>
+      {% endif %}
+    {% endfor %}
+  </div>
+  <span id="course_chooser_status" class="sr-only" role="status" aria-live="polite"></span>
 </li>
 {% endif %}
 {% endset %}
@@ -108,14 +111,30 @@ <h2 class="heading">Get help, learn about updates, share resources!</h2>
 {% endif %}
 
 <script>
-async function change_course(course_name) {
-    let new_course = document.getElementById("course_chooser").value
-    let request = new Request(`/ns/course/changeCourse/${new_course}`, {
-        method: "GET",
-    });
-    await fetch(request);
-    window.location.href = "/ns/course/index"
+async function change_course(button) {
+    const newCourse = button.dataset.courseName;
+    const status = document.getElementById("course_chooser_status");
+
+    button.disabled = true;
+    status.textContent = "Changing course…";
+
+    try {
+        const response = await fetch("/ns/course/changeCourse/" + encodeURIComponent(newCourse), {
+            method: "GET",
+        });
+        if (!response.ok) {
+            throw new Error("Unable to change course");
+        }
+        window.location.assign("/ns/course/index");
+    } catch (error) {
+        status.textContent = "Unable to change course. Please try again.";
+        button.disabled = false;
+    }
 }
+
+document.querySelectorAll(".course-chooser-option").forEach((button) => {
+    button.addEventListener("click", () => change_course(button));
+});
 </script>
 </section>
 
diff --git a/components/rsptx/templates/legal/_legal_base.html b/components/rsptx/templates/legal/_legal_base.html
index c2a2814da..f8bc02f1c 100644
--- a/components/rsptx/templates/legal/_legal_base.html
+++ b/components/rsptx/templates/legal/_legal_base.html
@@ -29,7 +29,7 @@
         margin-bottom: 28px;
     }
     .legal-header h1 { margin: 0 0 6px; line-height: 1.2; }
-    .legal-updated { margin: 0; color: #6a6a6a; font-size: 0.9rem; }
+    .legal-updated { margin: 0; color: #6c6c6c; font-size: 0.9rem; }
     .legal-doc h2 { margin-top: 2rem; font-size: 1.4rem; }
     .legal-doc h3 { margin-top: 1.6rem; font-size: 1.15rem; }
     .legal-doc ul, .legal-doc ol { padding-left: 1.4rem; }
@@ -51,9 +51,6 @@
 
 {% block content %}
 <div class="legal-doc">
-    <nav class="legal-breadcrumb">
-        <a href="/admin/legal">&larr; Legal &amp; Compliance</a>
-    </nav>
     <header class="legal-header">
         <h1>{{ page_title }}</h1>
         {% if updated %}<p class="legal-updated">Last updated: {{ updated }}</p>{% endif %}
diff --git a/components/rsptx/templates/legal/hecvat.html b/components/rsptx/templates/legal/hecvat.html
index d9d77408c..c492a2b00 100644
--- a/components/rsptx/templates/legal/hecvat.html
+++ b/components/rsptx/templates/legal/hecvat.html
@@ -30,7 +30,7 @@
     .hecvat-ans { font-weight: 600; white-space: nowrap; }
     .hecvat-ans.yes { color: #1b7a2f; }
     .hecvat-ans.no { color: #a06a00; }
-    .hecvat-ans.na { color: #777; }
+    .hecvat-ans.na { color: #585858; }
     .hecvat-scroll { overflow-x: auto; }
     .hecvat-note {
         margin: 1.25rem 0;
diff --git a/components/rsptx/templates/staticAssets/assignment/assignment_block.css b/components/rsptx/templates/staticAssets/assignment/assignment_block.css
index ab7c15ecd..3a05b3dd0 100644
--- a/components/rsptx/templates/staticAssets/assignment/assignment_block.css
+++ b/components/rsptx/templates/staticAssets/assignment/assignment_block.css
@@ -41,8 +41,8 @@ This is used in the chooseAssignment page and the current_course page.
 
 
 :root {
-  --color-success: #11b70e;
-  --color-error: #ff0000;
+  --color-success: #077e05;
+  --color-error: #e30000;
   --rs-assignment-meta: #fafafa;
   --rs-assignment-meta-border: #aaa;
 }
diff --git a/components/rsptx/templates/staticAssets/course.css b/components/rsptx/templates/staticAssets/course.css
index e7cf08812..816fff844 100644
--- a/components/rsptx/templates/staticAssets/course.css
+++ b/components/rsptx/templates/staticAssets/course.css
@@ -19,4 +19,10 @@
     margin-left: auto;
     margin-right: auto;
   }
-}
\ No newline at end of file
+}
+.course-chooser-toggle {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+}
diff --git a/components/rsptx/templates/staticAssets/css/admin.css b/components/rsptx/templates/staticAssets/css/admin.css
index a46399c4f..e09b364bd 100644
--- a/components/rsptx/templates/staticAssets/css/admin.css
+++ b/components/rsptx/templates/staticAssets/css/admin.css
@@ -29,38 +29,38 @@
     text-align: center;
     margin-bottom: 30px;
     padding: 20px 0;
-    border-bottom: 2px solid #e0e0e0;
+    border-bottom: 2px solid var(--rs-color-border-subtle);
 }
 
 .page-header h1 {
-    color: #333;
+    color: var(--rs-color-text-strong);
     margin: 0;
     font-size: 2.5em;
     font-weight: 300;
 }
 
 .page-header p {
-    color: #666;
+    color: var(--rs-color-text-muted);
     margin: 10px 0 0 0;
 }
 
 /* ---------- Course info banner ---------- */
 .course-info {
-    background: #f0f7ff;
+    background: var(--rs-color-primary-background);
     padding: 15px;
     border-radius: 6px;
     margin-bottom: 20px;
-    border-left: 4px solid #4a90e2;
+    border-left: 4px solid var(--rs-color-primary);
 }
 
 .course-info h3 {
     margin: 0 0 5px 0;
-    color: #333;
+    color: var(--rs-color-text-strong);
 }
 
 .course-info p {
     margin: 0;
-    color: #666;
+    color: var(--rs-color-text-muted);
 }
 
 .course-info-row {
@@ -71,7 +71,7 @@
 }
 
 .course-link a {
-    color: #357abd;
+    color: var(--rs-color-primary-hover);
     font-weight: 600;
     text-decoration: none;
 }
@@ -84,7 +84,7 @@
 .back-link {
     display: inline-block;
     margin-bottom: 20px;
-    color: #4a90e2;
+    color: var(--rs-color-primary);
     text-decoration: none;
     font-size: 16px;
     font-weight: 600;
@@ -92,7 +92,7 @@
 }
 
 .back-link:hover {
-    color: #357abd;
+    color: var(--rs-color-primary-hover);
     text-decoration: underline;
 }
 
@@ -120,35 +120,35 @@
 }
 
 .btn:disabled {
-    background: #ccc;
+    background: var(--rs-color-border-strong);
     cursor: not-allowed;
     transform: none;
 }
 
 .btn-primary {
-    background: #4a90e2;
+    background: var(--rs-color-primary);
     color: white;
 }
 
 .btn-primary:hover:not(:disabled) {
-    background: #357abd;
+    background: var(--rs-color-primary-hover);
     color: white;
     opacity: 1;
 }
 
 .btn-danger {
-    background: #dc3545;
+    background: var(--rs-color-danger);
     color: white;
 }
 
 .btn-success {
-    background: #28a745;
+    background: var(--rs-color-success);
     color: white;
 }
 
 /* Large destructive-action button (reset exam, delete course) */
 .danger-btn {
-    background: linear-gradient(135deg, #dc3545, #c82333);
+    background: linear-gradient(135deg, var(--rs-color-danger), var(--rs-color-danger-hover));
     color: white;
     border: none;
     padding: 15px 30px;
@@ -162,13 +162,13 @@
 }
 
 .danger-btn:hover:not(:disabled) {
-    background: linear-gradient(135deg, #c82333, #bd2130);
+    background: linear-gradient(135deg, var(--rs-color-danger-hover), var(--rs-color-danger-dark));
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
 }
 
 .danger-btn:disabled {
-    background: #6c757d;
+    background: var(--rs-color-secondary);
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
@@ -182,27 +182,27 @@
 }
 
 .alert-success {
-    background: #d4edda;
-    border: 1px solid #c3e6cb;
-    color: #155724;
+    background: var(--rs-color-success-background);
+    border: 1px solid var(--rs-color-success-border);
+    color: var(--rs-color-success-text);
 }
 
 .alert-error,
 .alert-danger {
-    background: #f8d7da;
-    border: 1px solid #f5c6cb;
-    color: #721c24;
+    background: var(--rs-color-danger-background);
+    border: 1px solid var(--rs-color-danger-border);
+    color: var(--rs-color-danger-text);
 }
 
 .alert-warning {
-    background: #fff3cd;
-    border: 1px solid #ffeaa7;
-    color: #856404;
+    background: var(--rs-color-warning-background);
+    border: 1px solid var(--rs-color-note-yellow);
+    color: var(--rs-color-warning-text);
 }
 
 .alert-info {
     background: #e7f3ff;
-    border: 1px solid #4a90e2;
+    border: 1px solid var(--rs-color-primary);
     color: #1e4d72;
 }
 
@@ -239,7 +239,7 @@
 
 .panel {
     background: white;
-    border: 1px solid #ddd;
+    border: 1px solid var(--rs-color-border);
     border-radius: 8px;
     padding: 20px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -247,11 +247,11 @@
 
 .panel h3 {
     margin: 0 0 15px 0;
-    color: #333;
+    color: var(--rs-color-text-strong);
     font-size: 1.4em;
     text-align: center;
     padding-bottom: 10px;
-    border-bottom: 2px solid #4a90e2;
+    border-bottom: 2px solid var(--rs-color-primary);
 }
 
 /* Centered white card holding a page's primary action */
@@ -261,7 +261,7 @@
     border-radius: 8px;
     padding: 30px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border: 1px solid #ddd;
+    border: 1px solid var(--rs-color-border);
 }
 
 .actions {
@@ -273,7 +273,7 @@
 .form-select {
     width: 100%;
     padding: 10px;
-    border: 2px solid #ddd;
+    border: 2px solid var(--rs-color-border);
     border-radius: 6px;
     font-size: 16px;
     background-color: white;
@@ -282,7 +282,7 @@
 
 .form-select:focus {
     outline: none;
-    border-color: #4a90e2;
+    border-color: var(--rs-color-primary);
     box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
 }
 
@@ -298,14 +298,14 @@
     display: block;
     margin-bottom: 8px;
     font-weight: 600;
-    color: #555;
+    color: var(--rs-color-text-subtle);
 }
 
 .settingsbox {
     margin-bottom: 20px;
     padding: 15px;
-    background: #f8f9fa;
-    border: 1px solid #e0e0e0;
+    background: var(--rs-color-surface-subtle);
+    border: 1px solid var(--rs-color-border-subtle);
     border-radius: 6px;
     display: flex;
     flex-direction: column;
@@ -314,14 +314,14 @@
 
 .settingsbox label {
     font-weight: 600;
-    color: #333;
+    color: var(--rs-color-text-strong);
     margin-bottom: 5px;
 }
 
 .settingsbox input[type="text"],
 .settingsbox select {
     padding: 8px 12px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--rs-color-border);
     border-radius: 4px;
     font-size: 14px;
     width: 100%;
@@ -345,26 +345,26 @@
 }
 
 .setting-description {
-    color: #666;
+    color: var(--rs-color-text-muted);
     font-size: 12px;
     margin-top: 4px;
 }
 
 .hint-text {
     margin-top: 15px;
-    color: #666;
+    color: var(--rs-color-text-muted);
     font-size: 14px;
 }
 
 /* ---------- Informational boxes ---------- */
 .help-doc {
-    background: #f8f9fa;
-    border-left: 4px solid #4a90e2;
+    background: var(--rs-color-surface-subtle);
+    border-left: 4px solid var(--rs-color-primary);
     padding: 12px 18px;
     border-radius: 6px;
     margin-top: 12px;
     margin-bottom: 0;
-    color: #333;
+    color: var(--rs-color-text-strong);
 }
 
 .help-doc p {
@@ -372,8 +372,8 @@
 }
 
 .warning-box {
-    background: #fff3cd;
-    border: 1px solid #ffeaa7;
+    background: var(--rs-color-warning-background);
+    border: 1px solid var(--rs-color-note-yellow);
     border-radius: 6px;
     padding: 15px;
     margin: 20px 0;
@@ -382,20 +382,20 @@
 
 .warning-box h4 {
     margin: 0 0 10px 0;
-    color: #856404;
+    color: var(--rs-color-warning-text);
     font-size: 1.1em;
 }
 
 .warning-box p {
     margin: 0 0 10px 0;
-    color: #856404;
+    color: var(--rs-color-warning-text);
     line-height: 1.4;
 }
 
 .warning-box ul {
     margin: 10px 0;
     padding-left: 20px;
-    color: #856404;
+    color: var(--rs-color-warning-text);
 }
 
 .warning-box li {
@@ -404,15 +404,15 @@
 
 /* Red variant for irreversible actions */
 .warning-box--danger {
-    background: #f8d7da;
-    border-color: #f5c6cb;
-    border-left-color: #dc3545;
+    background: var(--rs-color-danger-background);
+    border-color: var(--rs-color-danger-border);
+    border-left-color: var(--rs-color-danger);
     padding: 20px;
 }
 
 .warning-box--danger h3 {
     margin: 0 0 15px 0;
-    color: #721c24;
+    color: var(--rs-color-danger-text);
     font-size: 1.4em;
     font-weight: bold;
 }
@@ -420,13 +420,13 @@
 .warning-box--danger h4,
 .warning-box--danger p,
 .warning-box--danger ul {
-    color: #721c24;
+    color: var(--rs-color-danger-text);
 }
 
 /* ---------- Result / status boxes ---------- */
 .result-box {
-    background: #d4edda;
-    border: 1px solid #c3e6cb;
+    background: var(--rs-color-success-background);
+    border: 1px solid var(--rs-color-success-border);
     border-radius: 6px;
     padding: 20px;
     margin-bottom: 20px;
@@ -434,17 +434,17 @@
 }
 
 .result-box.error {
-    background: #f8d7da;
-    border-color: #f5c6cb;
+    background: var(--rs-color-danger-background);
+    border-color: var(--rs-color-danger-border);
 }
 
 .result-box h3 {
     margin-top: 0;
-    color: #155724;
+    color: var(--rs-color-success-text);
 }
 
 .result-box.error h3 {
-    color: #721c24;
+    color: var(--rs-color-danger-text);
 }
 
 .result-message {
@@ -454,15 +454,15 @@
 
 /* Status-colored table rows (enrollment results) */
 tr.success {
-    background-color: #d4edda;
+    background-color: var(--rs-color-success-background);
 }
 
 tr.error {
-    background-color: #f8d7da;
+    background-color: var(--rs-color-danger-background);
 }
 
 tr.duplicate {
-    background-color: #fff3cd;
+    background-color: var(--rs-color-warning-background);
 }
 
 /* ============================================================
@@ -472,14 +472,14 @@ tr.duplicate {
 /* ---------- Instructor dashboard (menu.html) ---------- */
 .instructor-menu .accordion {
     margin-bottom: 20px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--rs-color-border);
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .instructor-menu .accordion-header {
-    background: linear-gradient(135deg, #4a90e2, #357abd);
+    background: linear-gradient(135deg, var(--rs-color-primary), var(--rs-color-primary-hover));
     color: white;
     padding: 20px;
     cursor: pointer;
@@ -496,7 +496,7 @@ tr.duplicate {
 
 .instructor-menu .accordion-header:hover,
 .instructor-menu .accordion-header.active {
-    background: linear-gradient(135deg, #357abd, #2a5f8f);
+    background: linear-gradient(135deg, var(--rs-color-primary-hover), var(--rs-color-primary-deep));
 }
 
 .instructor-menu .accordion-icon {
@@ -512,7 +512,7 @@ tr.duplicate {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
-    background: #f8f9fa;
+    background: var(--rs-color-surface-subtle);
 }
 
 .instructor-menu .accordion-content.active {
@@ -528,40 +528,40 @@ tr.duplicate {
 
 .instructor-menu .menu-item {
     background: white;
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--rs-color-border-subtle);
     border-radius: 6px;
     padding: 15px;
     text-decoration: none;
-    color: #333;
+    color: var(--rs-color-text-strong);
     transition: all 0.3s ease;
     display: block;
 }
 
 .instructor-menu .menu-item:hover {
-    background: #f0f7ff;
-    border-color: #4a90e2;
+    background: var(--rs-color-primary-background);
+    border-color: var(--rs-color-primary);
     text-decoration: none;
-    color: #333;
+    color: var(--rs-color-text-strong);
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(74, 144, 226, 0.2);
 }
 
 .instructor-menu .menu-item h4 {
     margin: 0 0 8px 0;
-    color: #4a90e2;
+    color: var(--rs-color-primary);
     font-size: 16px;
     font-weight: 600;
 }
 
 .instructor-menu .menu-item p {
     margin: 0;
-    color: #666;
+    color: var(--rs-color-text-muted);
     font-size: 14px;
     line-height: 1.4;
 }
 
 .instructor-menu .toggle-all-btn {
-    background: linear-gradient(135deg, #28a745, #20c997);
+    background: linear-gradient(135deg, var(--rs-color-success), #20c997);
     color: white;
     border: none;
     padding: 12px 24px;
@@ -574,7 +574,7 @@ tr.duplicate {
 }
 
 .instructor-menu .toggle-all-btn:hover {
-    background: linear-gradient(135deg, #218838, #1dc7a0);
+    background: linear-gradient(135deg, var(--rs-color-success-hover), #1dc7a0);
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
 }
@@ -582,10 +582,10 @@ tr.duplicate {
 /* ---------- Manage instructors/TAs (add_instructor.html) ---------- */
 .instructor-admin #instructor-list {
     min-height: 200px;
-    border: 1px solid #eee;
+    border: 1px solid var(--rs-color-surface-muted);
     border-radius: 6px;
     padding: 10px 15px 10px 30px;
-    background: #f8f9fa;
+    background: var(--rs-color-surface-subtle);
 }
 
 .instructor-admin #instructor-list li {
@@ -593,7 +593,7 @@ tr.duplicate {
 }
 
 .instructor-admin #instructor-list li.selected {
-    background: #e0e0e0;
+    background: var(--rs-color-border-subtle);
     font-weight: bold;
 }
 
@@ -612,10 +612,10 @@ tr.duplicate {
 }
 
 .student-management pre {
-    background: #f8f9fa;
+    background: var(--rs-color-surface-subtle);
     padding: 10px;
     border-radius: 4px;
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--rs-color-border-subtle);
 }
 
 /* ---------- Delete course (course_delete.html) ---------- */
@@ -628,7 +628,7 @@ tr.duplicate {
     border-radius: 8px;
     padding: 30px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border: 2px solid #dc3545;
+    border: 2px solid var(--rs-color-danger);
     text-align: center;
     margin-top: 30px;
 }
@@ -641,20 +641,20 @@ tr.duplicate {
     display: block;
     margin-bottom: 10px;
     font-weight: bold;
-    color: #333;
+    color: var(--rs-color-text-strong);
 }
 
 .course-delete .confirmation-input input {
     width: 300px;
     padding: 10px;
-    border: 2px solid #ddd;
+    border: 2px solid var(--rs-color-border);
     border-radius: 4px;
     font-size: 16px;
     text-align: center;
 }
 
 .course-delete .confirmation-input input:focus {
-    border-color: #dc3545;
+    border-color: var(--rs-color-danger);
     outline: none;
 }
 
@@ -665,7 +665,7 @@ tr.duplicate {
 
 /* ---------- Create course (create_course.html) ---------- */
 .designer-container {
-    background: #fff;
+    background: var(--rs-color-white);
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     padding: 30px;
@@ -677,14 +677,14 @@ tr.duplicate {
 }
 
 .designer-container .designer-header h1 {
-    color: #ab1059;
+    color: var(--rs-color-accent-magenta);
     font-size: 2.5em;
     font-weight: 300;
     margin: 0;
 }
 
 .designer-container .step-title {
-    color: #ab1059;
+    color: var(--rs-color-accent-magenta);
     font-size: 1.3em;
     margin-top: 30px;
     margin-bottom: 10px;
@@ -692,7 +692,7 @@ tr.duplicate {
 
 .designer-container .filter-title,
 .designer-container .book-section {
-    color: #4a90e2;
+    color: var(--rs-color-primary);
     font-size: 1.3em;
     margin-top: 10px;
     margin-bottom: 10px;
@@ -721,21 +721,21 @@ tr.duplicate {
 
 /* ---------- Copy assignments (copy_assignments.html) ---------- */
 .copy-assignments .card {
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--rs-color-border-subtle);
     border-radius: 8px;
     margin-bottom: 20px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .copy-assignments .card-header {
-    background: #f8f9fa;
-    border-bottom: 1px solid #e0e0e0;
+    background: var(--rs-color-surface-subtle);
+    border-bottom: 1px solid var(--rs-color-border-subtle);
     padding: 15px 20px;
 }
 
 .copy-assignments .card-title {
     margin: 0;
-    color: #333;
+    color: var(--rs-color-text-strong);
     font-size: 18px;
     font-weight: 600;
 }
@@ -752,7 +752,7 @@ tr.duplicate {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
-    color: #333;
+    color: var(--rs-color-text-strong);
 }
 
 /* Step 2's assignment picker is injected by JS, so the gap that keeps the Copy
@@ -905,10 +905,10 @@ tr.duplicate {
 
 .lti-config .panel h2 {
     margin: 0 0 15px 0;
-    color: #333;
+    color: var(--rs-color-text-strong);
     font-size: 1.4em;
     padding-bottom: 10px;
-    border-bottom: 2px solid #4a90e2;
+    border-bottom: 2px solid var(--rs-color-primary);
 }
 
 .lti-config .panel h3 {
diff --git a/components/rsptx/templates/staticAssets/css/assignment.css b/components/rsptx/templates/staticAssets/css/assignment.css
index 062772418..73048938f 100644
--- a/components/rsptx/templates/staticAssets/css/assignment.css
+++ b/components/rsptx/templates/staticAssets/css/assignment.css
@@ -2,7 +2,7 @@
 
 body {
     padding-top: 60px;
-    background-color: #eeeeee;
+    background-color: var(--rs-color-surface-muted);
 }
 
 pre {
@@ -50,7 +50,7 @@ div#component-preview {
 }
 
 div.container {
-    background-color: #ffffff;
+    background-color: var(--rs-color-white);
 }
 
 div.section {
@@ -91,7 +91,7 @@ div.section {
 }
 
 .footer>.container {
-    background-color: #eeeeee;
+    background-color: var(--rs-color-surface-muted);
 }
 
 .brand-logo {
@@ -136,37 +136,37 @@ div.section {
     clear: both;
     font-weight: bold;
     line-height: 20px;
-    color: #333;
+    color: var(--rs-color-text-strong);
     white-space: nowrap;
 }
 
 :root {
-    --dropdownBg: #ffffff;
-    --dropdownHoverBg: #f5f5f5;
+    --dropdownBg: var(--rs-color-white);
+    --dropdownHoverBg: var(--rs-color-surface-muted);
 }
 
 [data-theme="dark"] {
     --dropdownBg: #1a1a1a;
-    --dropdownHoverBg: #333333;
+    --dropdownHoverBg: var(--rs-color-text-strong);
 }
 
 .dropdown-menu {
-    background-color: var(--dropdownBg, #ffffff);
+    background-color: var(--dropdownBg, var(--rs-color-white));
 }
 
 .dropdown-menu > li > a,
 .dropdown-menu > li > span,
 .dropdown-menu > li > div,
 .dropdown-menu > li > label {
-    color: var(--grayToWhite, #333);
+    color: var(--grayToWhite, var(--rs-color-text-strong));
 }
 
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus,
 .dropdown-menu > li > label:hover,
 .dropdown-menu > li > label:focus {
-    color: var(--grayToWhite, #333);
-    background-color: var(--dropdownHoverBg, #f5f5f5);
+    color: var(--grayToWhite, var(--rs-color-text-strong));
+    background-color: var(--dropdownHoverBg, var(--rs-color-surface-muted));
 }
 
 .loggedinuser {
@@ -177,7 +177,7 @@ div.section {
 
 .CodeMirror {
     margin: 0 0 1em 0;
-    background-color: #fff;
+    background-color: var(--rs-color-white);
     clear: both;
 }
 
@@ -234,9 +234,9 @@ input[type="button"].btn.btn-sm {
 .btn-default[disabled],
 .btn-default.disabled:hover,
 .btn-default[disabled]:hover {
-    color: #fff;
-    background-color: #474949;
-    border-color: #474949;
+    color: var(--rs-color-white);
+    background-color: var(--rs-color-button-dark);
+    border-color: var(--rs-color-button-dark);
 }
 
 .btn-default:hover,
@@ -245,7 +245,7 @@ input[type="button"].btn.btn-sm {
 .btn-default.active {
     background-color: #3a3c3c;
     border-color: #2e2f2f;
-    color: #fff;
+    color: var(--rs-color-white);
 }
 
 .tooltip {
@@ -267,13 +267,13 @@ h2 {
 
 /* default bookstrap alert color is hard to read (low contrast). */
 .alert {
-    color: #333;
+    color: var(--rs-color-text-strong);
     padding: 10px;
 }
 
 /* override the color styles applied by Skulpt to the unittest results divs */
 .unittest-results.alert-danger {
-    background-color: #f2dede !important;
+    background-color: var(--rs-color-danger-muted) !important;
 }
 
 .unittest-results.alert-success {
@@ -292,7 +292,7 @@ h2 {
     margin-top: 20px !important;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
     background-color: #fcf8e3;
-    border: 1px solid #fbeed5;
+    border: 1px solid var(--rs-color-note-background);
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
@@ -301,15 +301,15 @@ h2 {
 /* .alert-danger */
 .admonition.caution {
     color: #b94a48;
-    background-color: #f2dede;
+    background-color: var(--rs-color-danger-muted);
     border-color: #eed3d7;
 }
 
 /* .alert-info */
 .admonition.tip,
 .admonition.note {
-    color: #333;
-    background-color: #d9edf7;
+    color: var(--rs-color-text-strong);
+    background-color: var(--rs-color-info-background);
     border-color: #bce8f1;
 }
 
@@ -324,16 +324,16 @@ div.flash {
     margin: 0 0 10px 10px;
     vertical-align: middle;
     cursor: pointer;
-    color: #fff;
-    background-color: #000;
-    border: 2px solid #fff;
+    color: var(--rs-color-white);
+    background-color: var(--rs-color-black);
+    border: 2px solid var(--rs-color-white);
     border-radius: 8px;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
-    background-image: -webkit-linear-gradient(top, #222, #000);
-    background-image: -o-linear-gradient(top, #222, #000);
-    background-image: -moz-linear-gradient(90deg, #222, #000);
-    background-image: linear-gradient(top, #222, #000);
+    background-image: -webkit-linear-gradient(top, var(--rs-color-text-dark), var(--rs-color-black));
+    background-image: -o-linear-gradient(top, var(--rs-color-text-dark), var(--rs-color-black));
+    background-image: -moz-linear-gradient(90deg, var(--rs-color-text-dark), var(--rs-color-black));
+    background-image: linear-gradient(top, var(--rs-color-text-dark), var(--rs-color-black));
     background-repeat: repeat-x;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -369,7 +369,7 @@ div.flash {
 
 #sign_in_text td {
     font-size: 17px;
-    color: #333;
+    color: var(--rs-color-text-strong);
     font-family: 'lucida grande', Verdana, sans-serif;
     padding-bottom: 13px;
 }
@@ -390,7 +390,7 @@ div.flash {
 #programming-exercises>ol>li:nth-child(even) {
     padding: 1.2em 1.4em;
     background: #faf7df;
-    border: 1px solid #fbeed5;
+    border: 1px solid var(--rs-color-note-background);
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
@@ -413,7 +413,7 @@ div.flash {
 
 .compare-me-progress .progress-bar,
 .unittest-results-progress .progress-bar {
-    color: #333;
+    color: var(--rs-color-text-strong);
 }
 
 .unittest-results-progress {
@@ -474,7 +474,7 @@ div.flash {
 
 .footnote.table td.label {
     padding: 2px 5px 2px 5px;
-    background-color: #d9edf7;
+    background-color: var(--rs-color-info-background);
 }
 
 .ac-canvas {
@@ -518,7 +518,7 @@ div.flash {
 }
 
 .navLink a {
-    color: #999;
+    color: var(--rs-color-text-faint);
 }
 
 #completionButton {
@@ -526,39 +526,39 @@ div.flash {
     margin-bottom: 15px;
     padding-left: 70px;
     padding-right: 70px;
-    color: #fff;
+    color: var(--rs-color-white);
     font-weight: bold;
 }
 
 .buttonAskCompletion {
     background-color: #ffaa2b;
-    border-color: #ff9f19;
+    border-color: var(--rs-color-accent-orange);
     font-weight: bold;
 }
 
 .buttonAskCompletion:hover {
-    background-color: #ff9f19;
-    border-color: #ff9f19;
+    background-color: var(--rs-color-accent-orange);
+    border-color: var(--rs-color-accent-orange);
 }
 
 .buttonConfirmCompletion {
     background-color: #50d392;
-    border-color: #3dc682;
+    border-color: var(--rs-color-success-bright);
 
 }
 
 .buttonConfirmCompletion:hover {
-    background-color: #3dc682;
-    border-color: #3dc682;
+    background-color: var(--rs-color-success-bright);
+    border-color: var(--rs-color-success-bright);
 }
 
 .navLinkBg {
     height: 40px;
-    background-color: #fff;
+    background-color: var(--rs-color-white);
     z-index: 1;
     position: fixed;
     bottom: 55px;
-    color: #999;
+    color: var(--rs-color-text-faint);
     font-weight: bold;
     -webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.5);
     -moz-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.5);
@@ -566,7 +566,7 @@ div.flash {
 }
 
 .navLinkBg:hover {
-    color: #999;
+    color: var(--rs-color-text-faint);
 }
 
 #navLinkBgRight {
@@ -583,7 +583,7 @@ div.flash {
 .activehtml {
     width: 100%;
     height: 400px;
-    background-color: #fff;
+    background-color: var(--rs-color-white);
 }
 
 .container .section>div.sidebar {
@@ -627,7 +627,7 @@ div.ExecutionVisualizer table.visualizer {
     width: auto;
     margin-left: auto;
     margin-right: auto;
-    background-color: #fff;
+    background-color: var(--rs-color-white);
 }
 
 div.settingsbox {
diff --git a/components/rsptx/templates/staticAssets/css/assignmentoverview.css b/components/rsptx/templates/staticAssets/css/assignmentoverview.css
index 1aa09d593..84217299d 100644
--- a/components/rsptx/templates/staticAssets/css/assignmentoverview.css
+++ b/components/rsptx/templates/staticAssets/css/assignmentoverview.css
@@ -10,8 +10,8 @@
 
 /* Stat columns (Interactions, # Correct, etc.) — subtle highlight */
 .ao-stat-cell {
-    background-color: #f8f9fa;
-    color: #555;
+    background-color: var(--rs-color-surface-subtle);
+    color: var(--rs-color-text-subtle);
     font-size: 13px;
     text-align: center;
 }
diff --git a/components/rsptx/templates/staticAssets/css/auth.css b/components/rsptx/templates/staticAssets/css/auth.css
index 7c40b44f6..b4db85dea 100644
--- a/components/rsptx/templates/staticAssets/css/auth.css
+++ b/components/rsptx/templates/staticAssets/css/auth.css
@@ -11,19 +11,23 @@
     max-width: 520px;
     margin: 40px auto;
     padding: 36px;
-    background: #fff;
+    background: var(--rs-color-white);
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .auth-card h1 {
-    color: #4a90e2;
+    color: var(--rs-color-primary);
     font-size: 2em;
     font-weight: 300;
     margin-bottom: 24px;
     text-align: center;
 }
 
+.danger-zone h2 {
+    font-size: 1.5em;
+}
+
 .auth-card .form-group label {
     font-weight: 500;
 }
@@ -44,7 +48,7 @@
 
 /* ---------- Buttons ---------- */
 .btn-rs-primary {
-    background: #4a90e2;
+    background: var(--rs-color-primary);
     color: white;
     border: none;
     padding: 10px 28px;
@@ -57,7 +61,7 @@
 }
 
 .btn-rs-primary:hover {
-    background: #357abd;
+    background: var(--rs-color-primary-hover);
     color: white;
 }
 
@@ -67,8 +71,8 @@
 
 .btn-rs-secondary {
     background: transparent;
-    color: #4a90e2;
-    border: 2px solid #4a90e2;
+    color: var(--rs-color-primary);
+    border: 2px solid var(--rs-color-primary);
     padding: 9px 22px;
     border-radius: 6px;
     font-size: 15px;
@@ -79,28 +83,28 @@
 }
 
 .btn-rs-secondary:hover {
-    background: #f0f7ff;
-    color: #4a90e2;
+    background: var(--rs-color-primary-background);
+    color: var(--rs-color-primary);
 }
 
 /* ---------- Section headings within cards ---------- */
 .section-label {
-    color: #4a90e2;
+    color: var(--rs-color-primary);
     font-size: 1em;
     font-weight: 600;
     margin-top: 24px;
     margin-bottom: 8px;
-    border-bottom: 1px solid #c8dff5;
+    border-bottom: 1px solid var(--rs-color-primary-border);
     padding-bottom: 4px;
 }
 
 .section-title {
-    color: #4a90e2;
+    color: var(--rs-color-primary);
     font-size: 1.1em;
     font-weight: 600;
     margin-top: 28px;
     margin-bottom: 10px;
-    border-bottom: 1px solid #c8dff5;
+    border-bottom: 1px solid var(--rs-color-primary-border);
     padding-bottom: 4px;
 }
 
@@ -112,7 +116,7 @@
 }
 
 .auth-links a {
-    color: #4a90e2;
+    color: var(--rs-color-primary);
 }
 
 /* ============================================================
@@ -123,20 +127,20 @@
 .danger-zone {
     margin-top: 40px;
     padding: 20px;
-    border: 1px solid #f5c6cb;
+    border: 1px solid var(--rs-color-danger-border);
     border-radius: 6px;
     background: #fff8f8;
 }
 
 .danger-zone h5 {
-    color: #721c24;
+    color: var(--rs-color-danger-text);
     margin-bottom: 12px;
 }
 
 .btn-danger-outline {
     background: white;
-    color: #dc3545;
-    border: 1px solid #dc3545;
+    color: var(--rs-color-danger);
+    border: 1px solid var(--rs-color-danger);
     padding: 8px 20px;
     border-radius: 6px;
     font-weight: 600;
@@ -144,7 +148,7 @@
 }
 
 .btn-danger-outline:hover {
-    background: #dc3545;
+    background: var(--rs-color-danger);
     color: white;
 }
 
@@ -169,7 +173,7 @@
     align-items: center;
     gap: 10px;
     padding: 8px 0;
-    border-bottom: 1px solid #f5f5f5;
+    border-bottom: 1px solid var(--rs-color-surface-muted);
 }
 
 .my-courses-page .course-row:last-child {
@@ -227,8 +231,8 @@
 }
 
 .badge-active {
-    background: #4a90e2;
-    color: #fff;
+    background: var(--rs-color-primary);
+    color: var(--rs-color-white);
     font-size: 0.75em;
     padding: 2px 8px;
     border-radius: 10px;
@@ -237,7 +241,7 @@
 
 .badge-instructor {
     background: #5b9fc8;
-    color: #fff;
+    color: var(--rs-color-white);
     font-size: 0.75em;
     padding: 2px 8px;
     border-radius: 10px;
@@ -245,8 +249,8 @@
 }
 
 .btn-switch {
-    background: #4a90e2;
-    color: #fff;
+    background: var(--rs-color-primary);
+    color: var(--rs-color-white);
     border: none;
     padding: 5px 14px;
     border-radius: 5px;
@@ -256,19 +260,19 @@
 }
 
 .btn-switch:hover {
-    background: #357abd;
-    color: #fff;
+    background: var(--rs-color-primary-hover);
+    color: var(--rs-color-white);
 }
 
 .btn-switch:disabled {
-    background: #ccc;
+    background: var(--rs-color-border-strong);
     cursor: default;
 }
 
 .btn-drop {
     background: transparent;
-    color: #4a90e2;
-    border: 1px solid #4a90e2;
+    color: var(--rs-color-primary);
+    border: 1px solid var(--rs-color-primary);
     padding: 5px 12px;
     border-radius: 5px;
     font-size: 0.9em;
@@ -277,7 +281,7 @@
 }
 
 .btn-drop:hover {
-    background: #f0f7ff;
+    background: var(--rs-color-primary-background);
 }
 
 .actions-row {
@@ -288,7 +292,7 @@
 }
 
 .empty-notice {
-    color: #999;
+    color: var(--rs-color-text-faint);
     font-style: italic;
     padding: 8px 0;
 }
@@ -308,14 +312,14 @@
 }
 
 .amount-panel {
-    border: 1px solid #c8dff5;
+    border: 1px solid var(--rs-color-primary-border);
     border-radius: 8px;
     margin-top: 20px;
 }
 
 .amount-panel-heading {
-    background: #4a90e2;
-    color: #fff;
+    background: var(--rs-color-primary);
+    color: var(--rs-color-white);
     font-weight: 600;
     padding: 10px 16px;
     border-radius: 8px 8px 0 0;
@@ -337,10 +341,10 @@
 .donate-note {
     margin-left: 16px;
     padding: 6px 12px;
-    border: 1px solid #4a90e2;
+    border: 1px solid var(--rs-color-primary);
     border-radius: 10px;
     font-size: 0.9em;
-    color: #357abd;
+    color: var(--rs-color-primary-hover);
 }
 
 .other-amount input {
@@ -358,7 +362,7 @@
 }
 
 .payment-note {
-    color: #666;
+    color: var(--rs-color-text-muted);
     font-style: italic;
     margin-top: 18px;
 }
diff --git a/components/rsptx/templates/staticAssets/css/lti.css b/components/rsptx/templates/staticAssets/css/lti.css
index 9a76aada4..d849a2479 100644
--- a/components/rsptx/templates/staticAssets/css/lti.css
+++ b/components/rsptx/templates/staticAssets/css/lti.css
@@ -36,5 +36,5 @@ h2 {
 }
 
 tr.error td {
-    background: #f8d7da !important;
+    background: var(--rs-color-danger-background) !important;
 }
diff --git a/components/rsptx/templates/staticAssets/css/peer.css b/components/rsptx/templates/staticAssets/css/peer.css
index 951242a6a..924230c86 100644
--- a/components/rsptx/templates/staticAssets/css/peer.css
+++ b/components/rsptx/templates/staticAssets/css/peer.css
@@ -13,7 +13,7 @@
 }
 
 #pi-session-status {
-    border: 1px solid #333333;
+    border: 1px solid var(--rs-color-text-strong);
     background-color: #F2E0C3;
     padding: 9px 16px;
     border-radius: 4px;
@@ -98,7 +98,7 @@
 }
 
 .pi-step.active {
-    outline: 2px solid #1A6A83;
+    outline: 2px solid var(--rs-color-info-dark);
     outline-offset: 2px;
     border-radius: 5px;
     margin-right: 10px;
@@ -122,9 +122,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #777777;
-    border: 1px solid #777777;
-    background-color: #FFFFFF;
+    color: var(--rs-color-text-light);
+    border: 1px solid var(--rs-color-text-light);
+    background-color: var(--rs-color-white);
     font-size: 12px;
     z-index: 100;
 }
@@ -132,7 +132,7 @@
 .pi-stepper-line {
     height: 1px;
     flex: 1;
-    background-color: #000000;
+    background-color: var(--rs-color-black);
     margin: 34px 0px 0 0px;
 }
 
@@ -153,7 +153,7 @@
 }
 
 .pi-step.active .pi-step-number-inner {
-    color: #1A6A83;
+    color: var(--rs-color-info-dark);
     border: 1px solid #46B8DA;
 }
 
@@ -196,8 +196,8 @@
 
 #discussion_panel {
     margin: 20px 0;
-    background: #FBFBFB;
-    border: 0.5px solid #C7CDD1;
+    background: var(--rs-color-surface-raised);
+    border: 0.5px solid var(--rs-color-border-cool);
     border-radius: 12px;
     box-shadow: 0px 20px 24px 0px rgba(17, 17, 17, 0.06);
     padding-left: 0px;
@@ -208,8 +208,8 @@
     font-size: 22px;
     font-weight: 500;
     padding: 12px 24px;
-    background: #FBFBFB;
-    border: 1px solid #C7CDD1;
+    background: var(--rs-color-surface-raised);
+    border: 1px solid var(--rs-color-border-cool);
     border-radius: 12px 12px 0px 0px;
     box-shadow: 0px 2px 2px 0px rgba(17, 17, 17, 0.06);
 }
@@ -219,14 +219,14 @@
 }
 
 #discussion-panel-peer-votes {
-    border-bottom: 1px solid #C7CDD1;
+    border-bottom: 1px solid var(--rs-color-border-cool);
     padding: 16px 24px;
 }
 
 #discussion-panel-peer-votes-content {
     border-radius: 12px;
-    border: 2px solid #C7CDD1;
-    background: #FFFFFF;
+    border: 2px solid var(--rs-color-border-cool);
+    background: var(--rs-color-white);
     padding: 16px 32px;
 }
 
@@ -271,7 +271,7 @@
     display: flex;
     flex-direction: column;
     font-style: normal;
-    color: #333;
+    color: var(--rs-color-text-strong);
     gap: 4px;
 }
 
@@ -292,13 +292,13 @@
 
 #discussion-panel-messages #messages .sender-initials {
     display: flex;
-    background: #777777;
+    background: var(--rs-color-text-light);
     height: 24px;
     width: 24px;
     border-radius: 50%;
     align-items: center;
     justify-content: center;
-    color: #FFFFFF;
+    color: var(--rs-color-white);
 }
 
 #discussion-panel-messages #messages .sender-name {
@@ -329,8 +329,8 @@
     justify-content: space-between;
     width: 100%;
     border-radius: 12px;
-    border: 2px solid #C7CDD1;
-    background: #FFFFFF;
+    border: 2px solid var(--rs-color-border-cool);
+    background: var(--rs-color-white);
     padding: 8px 16px;
     margin-top: 10px;
     gap: 16px;
diff --git a/components/rsptx/templates/staticAssets/css/rs-core.css b/components/rsptx/templates/staticAssets/css/rs-core.css
index b4b2c81e7..df4727989 100644
--- a/components/rsptx/templates/staticAssets/css/rs-core.css
+++ b/components/rsptx/templates/staticAssets/css/rs-core.css
@@ -12,6 +12,75 @@
    …) load after this file and may override it.
    ============================================================ */
 
+:root {
+    --rs-color-white: #fff;
+    --rs-color-black: #000;
+    --rs-color-primary: #0056b3;
+    --rs-color-primary-hover: #003d80;
+    --rs-color-secondary: #6c757d;
+    --rs-color-success: #218838;
+    --rs-color-success-hover: #1e7e34;
+    --rs-color-success-background: #f2f6f3;
+    --rs-color-success-border: #c3e6cb;
+    --rs-color-success-text: #155724;
+    --rs-color-danger: #dc3545;
+    --rs-color-danger-hover: #c82333;
+    --rs-color-danger-background: #fef3f4;
+    --rs-color-danger-border: #f5c6cb;
+    --rs-color-danger-text: #721c24;
+    --rs-color-warning: #ffc107;
+    --rs-color-warning-background: #fff3cd;
+    --rs-color-warning-text: #856404;
+    --rs-color-text: #212529;
+    --rs-color-text-strong: #333;
+    --rs-color-text-muted: #666;
+    --rs-color-text-subtle: #555;
+    --rs-color-text-faint: #767676;
+    --rs-color-surface-subtle: #f8f9fa;
+    --rs-color-surface-muted: #f5f5f5;
+    --rs-color-surface-cool: #f4f8fa;
+    --rs-color-surface-disabled: #e9ecef;
+    --rs-color-border: #ddd;
+    --rs-color-border-strong: #ccc;
+    --rs-color-border-subtle: #e0e0e0;
+    --rs-color-border-bootstrap: #dee2e6;
+    --rs-color-text-dark: #222;
+    --rs-color-text-light: #767676;
+    --rs-color-form-text: #495057;
+    --rs-color-primary-background: #f0f7ff;
+    --rs-color-primary-border: #c8dff5;
+    --rs-color-border-cool: #c7cdd1;
+    --rs-color-info: #003d80;
+    --rs-color-info-bright: #0056b3;
+    --rs-color-success-bright: #3dc682;
+    --rs-color-accent-orange: #ff9f19;
+    --rs-color-accent-orange-dark: #c50;
+    --rs-color-note-yellow: #ffeaa7;
+    --rs-color-note-peach: #ffe9d2;
+    --rs-color-accent-orange-light: #ffb871;
+    --rs-color-accent-orange-bright: #b03e00;
+    --rs-color-accent-orange-deep: #b03e00;
+    --rs-color-accent-magenta: #ab1059;
+    --rs-color-surface-raised: #fbfbfb;
+    --rs-color-note-background: #fbeed5;
+    --rs-color-danger-muted: #f2dede;
+    --rs-color-danger-dark: #bd2130;
+    --rs-color-info-background: #d9edf7;
+    --rs-color-info-alert-background: #d1ecf1;
+    --rs-color-info-alert-border: #bee5eb;
+    --rs-color-info-alert-text: #0c5460;
+    --rs-color-warning-border: #ffeeba;
+    --rs-color-info-dark: #1a6a83;
+    --rs-color-info-bootstrap: #117a8b;
+    --rs-color-success-pale: #c1ffc9;
+    --rs-color-success-neon: #00dd1c;
+    --rs-color-button-dark: #474949;
+    --rs-color-button-dark-muted: #454551;
+    --rs-color-primary-deep: #2a5f8f;
+    --rs-color-black-soft: #0a0a0a;
+    --rs-color-blue-bright: #007fff;
+}
+
 /* ---------- Reboot (minimal subset of Bootstrap's) ---------- */
 *,
 *::before,
@@ -32,9 +101,9 @@ body {
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
-    color: #212529;
+    color: var(--rs-color-text);
     text-align: left;
-    background-color: #fff;
+    background-color: var(--rs-color-white);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -84,13 +153,13 @@ hr {
 }
 
 a {
-    color: #007bff;
+    color: var(--rs-color-primary);
     text-decoration: none;
     background-color: transparent;
 }
 
 a:hover {
-    color: #0056b3;
+    color: var(--rs-color-primary-hover);
     text-decoration: underline;
 }
 
@@ -230,9 +299,9 @@ button, [type="button"], [type="reset"], [type="submit"] {
 .mr-lg-2 { margin-right: 0.5rem !important; }
 
 /* ---------- Text utilities ---------- */
-.text-muted { color: #6c757d !important; }
+.text-muted { color: var(--rs-color-secondary) !important; }
 .text-center { text-align: center !important; }
-.text-black { color: #000 !important; }
+.text-black { color: var(--rs-color-black) !important; }
 .small, small { font-size: 80%; font-weight: 400; }
 
 .sr-only,
@@ -255,14 +324,14 @@ button, [type="button"], [type="reset"], [type="submit"] {
 }
 
 .bg-light {
-    background-color: #f8f9fa !important;
+    background-color: var(--rs-color-surface-subtle) !important;
 }
 
 /* ---------- Buttons ---------- */
 .btn {
     display: inline-block;
     font-weight: 400;
-    color: #212529;
+    color: var(--rs-color-text);
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
@@ -292,26 +361,26 @@ button, [type="button"], [type="reset"], [type="submit"] {
     cursor: not-allowed;
 }
 
-.btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; }
-.btn-primary:hover:not(:disabled) { color: #fff; background-color: #0069d9; border-color: #0062cc; }
+.btn-primary { color: var(--rs-color-white); background-color: var(--rs-color-primary); border-color: var(--rs-color-primary); }
+.btn-primary:hover:not(:disabled) { color: var(--rs-color-white); background-color: #0069d9; border-color: #0062cc; }
 
-.btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
-.btn-secondary:hover:not(:disabled) { color: #fff; background-color: #5a6268; border-color: #545b62; }
+.btn-secondary { color: var(--rs-color-white); background-color: var(--rs-color-secondary); border-color: var(--rs-color-secondary); }
+.btn-secondary:hover:not(:disabled) { color: var(--rs-color-white); background-color: #5a6268; border-color: #545b62; }
 
-.btn-success { color: #fff; background-color: #28a745; border-color: #28a745; }
-.btn-success:hover:not(:disabled) { color: #fff; background-color: #218838; border-color: #1e7e34; }
+.btn-success { color: var(--rs-color-white); background-color: var(--rs-color-success); border-color: var(--rs-color-success); }
+.btn-success:hover:not(:disabled) { color: var(--rs-color-white); background-color: var(--rs-color-success-hover); border-color: #1e7e34; }
 
-.btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; }
-.btn-danger:hover:not(:disabled) { color: #fff; background-color: #c82333; border-color: #bd2130; }
+.btn-danger { color: var(--rs-color-white); background-color: var(--rs-color-danger); border-color: var(--rs-color-danger); }
+.btn-danger:hover:not(:disabled) { color: var(--rs-color-white); background-color: var(--rs-color-danger-hover); border-color: var(--rs-color-danger-dark); }
 
-.btn-warning { color: #212529; background-color: #ffc107; border-color: #ffc107; }
-.btn-warning:hover:not(:disabled) { color: #212529; background-color: #e0a800; border-color: #d39e00; }
+.btn-warning { color: var(--rs-color-text); background-color: var(--rs-color-warning); border-color: var(--rs-color-warning); }
+.btn-warning:hover:not(:disabled) { color: var(--rs-color-text); background-color: #e0a800; border-color: #d39e00; }
 
-.btn-info { color: #fff; background-color: #17a2b8; border-color: #17a2b8; }
-.btn-info:hover:not(:disabled) { color: #fff; background-color: #138496; border-color: #117a8b; }
+.btn-info { color: var(--rs-color-white); background-color: var(--rs-color-info-bootstrap); border-color: var(--rs-color-info-bootstrap); }
+.btn-info:hover:not(:disabled) { color: var(--rs-color-white); background-color: #138496; border-color: #117a8b; }
 
-.btn-outline-secondary { color: #6c757d; background-color: transparent; border-color: #6c757d; }
-.btn-outline-secondary:hover:not(:disabled) { color: #fff; background-color: #6c757d; border-color: #6c757d; }
+.btn-outline-secondary { color: var(--rs-color-secondary); background-color: transparent; border-color: var(--rs-color-secondary); }
+.btn-outline-secondary:hover:not(:disabled) { color: var(--rs-color-white); background-color: var(--rs-color-secondary); border-color: var(--rs-color-secondary); }
 
 .btn-sm {
     padding: 0.25rem 0.5rem;
@@ -336,8 +405,8 @@ button, [type="button"], [type="reset"], [type="submit"] {
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
-    color: #495057;
-    background-color: #fff;
+    color: var(--rs-color-form-text);
+    background-color: var(--rs-color-white);
     background-clip: padding-box;
     border: 1px solid #ced4da;
     border-radius: 0.25rem;
@@ -345,15 +414,15 @@ button, [type="button"], [type="reset"], [type="submit"] {
 }
 
 .form-control:focus {
-    color: #495057;
-    background-color: #fff;
+    color: var(--rs-color-form-text);
+    background-color: var(--rs-color-white);
     border-color: #80bdff;
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
 .form-control:disabled {
-    background-color: #e9ecef;
+    background-color: var(--rs-color-surface-disabled);
     opacity: 1;
 }
 
@@ -389,13 +458,8 @@ textarea.form-control,
 .form-check {
     position: relative;
     display: block;
-    padding-left: 1.25rem;
-}
-
-.form-check-input {
-    position: absolute;
-    margin-top: 0.3rem;
-    margin-left: -1.25rem;
+    display: flex;
+    gap: 20px;
 }
 
 .form-check-label {
@@ -406,19 +470,19 @@ textarea.form-control,
 .table {
     width: 100%;
     margin-bottom: 1rem;
-    color: #212529;
+    color: var(--rs-color-text);
 }
 
 .table th,
 .table td {
     padding: 0.75rem;
     vertical-align: top;
-    border-top: 1px solid #dee2e6;
+    border-top: 1px solid var(--rs-color-border-bootstrap);
 }
 
 .table thead th {
     vertical-align: bottom;
-    border-bottom: 2px solid #dee2e6;
+    border-bottom: 2px solid var(--rs-color-border-bootstrap);
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
@@ -428,7 +492,7 @@ textarea.form-control,
 .table-bordered,
 .table-bordered th,
 .table-bordered td {
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--rs-color-border-bootstrap);
 }
 
 /* ---------- Alerts ---------- */
@@ -440,10 +504,10 @@ textarea.form-control,
     border-radius: 0.25rem;
 }
 
-.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
-.alert-danger  { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
-.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }
-.alert-info    { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
+.alert-success { color: var(--rs-color-success-text); background-color: var(--rs-color-success-background); border-color: var(--rs-color-success-border); }
+.alert-danger  { color: var(--rs-color-danger-text); background-color: var(--rs-color-danger-background); border-color: var(--rs-color-danger-border); }
+.alert-warning { color: var(--rs-color-warning-text); background-color: var(--rs-color-warning-background); border-color: var(--rs-color-warning-border); }
+.alert-info    { color: var(--rs-color-info-alert-text); background-color: var(--rs-color-info-alert-background); border-color: var(--rs-color-info-alert-border); }
 
 .alert-dismissible {
     padding-right: 4rem;
@@ -461,8 +525,8 @@ textarea.form-control,
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 1;
-    color: #000;
-    text-shadow: 0 1px 0 #fff;
+    color: var(--rs-color-black);
+    text-shadow: 0 1px 0 var(--rs-color-white);
     opacity: 0.5;
     background-color: transparent;
     border: 0;
@@ -488,7 +552,7 @@ textarea.form-control,
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
-    background-color: #fff;
+    background-color: var(--rs-color-white);
     background-clip: border-box;
     border: 1px solid rgba(0, 0, 0, 0.125);
     border-radius: 0.25rem;
@@ -542,7 +606,7 @@ textarea.form-control,
     padding-left: 0;
     margin-bottom: 0;
     list-style: none;
-    border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid var(--rs-color-border-bootstrap);
 }
 
 .nav-tabs > li > a,
@@ -557,15 +621,15 @@ textarea.form-control,
 }
 
 .nav-tabs > li > a:hover {
-    border-color: #e9ecef #e9ecef #dee2e6;
+    border-color: var(--rs-color-surface-disabled) var(--rs-color-surface-disabled) var(--rs-color-border-bootstrap);
     text-decoration: none;
 }
 
 .nav-tabs > li.active > a,
 .nav-tabs .nav-link.active {
-    color: #495057;
-    background-color: #fff;
-    border-color: #dee2e6 #dee2e6 #fff;
+    color: var(--rs-color-form-text);
+    background-color: var(--rs-color-white);
+    border-color: var(--rs-color-border-bootstrap) var(--rs-color-border-bootstrap) var(--rs-color-white);
 }
 
 .tab-content > .tab-pane {
@@ -642,13 +706,13 @@ textarea.form-control,
 
 .navbar-light .navbar-nav .nav-link,
 .navbar-light .nav-link {
-    color: rgba(0, 0, 0, 0.5);
+    /* color: rgba(0, 0, 0, 0.5); */
 }
 
 .navbar-light .navbar-nav .nav-link:hover,
 .navbar-light .nav-link:hover {
-    color: rgba(0, 0, 0, 0.7);
-    text-decoration: none;
+    /* color: rgba(0, 0, 0, 0.7);
+    text-decoration: none; */
 }
 
 /* collapse behavior (also used by profile.html's delete form) */
@@ -716,10 +780,10 @@ textarea.form-control,
     padding: 0.5rem 0;
     margin: 0.125rem 0 0;
     font-size: 1rem;
-    color: #212529;
+    color: var(--rs-color-text);
     text-align: left;
     list-style: none;
-    background-color: #fff;
+    background-color: var(--rs-color-white);
     background-clip: padding-box;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 0.25rem;
@@ -750,7 +814,7 @@ textarea.form-control,
     padding: 0.25rem 1.5rem;
     clear: both;
     font-weight: 400;
-    color: #212529;
+    color: var(--rs-color-text);
     text-align: inherit;
     white-space: nowrap;
     background-color: transparent;
@@ -761,14 +825,14 @@ textarea.form-control,
 .dropdown-item:focus {
     color: #16181b;
     text-decoration: none;
-    background-color: #f8f9fa;
+    background-color: var(--rs-color-surface-subtle);
 }
 
 .dropdown-divider {
     height: 0;
     margin: 0.5rem 0;
     overflow: hidden;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--rs-color-surface-disabled);
 }
 
 /* ---------- Modal (for the activecode feedback shim in nav.js) ---------- */
@@ -803,7 +867,7 @@ textarea.form-control,
     display: flex;
     flex-direction: column;
     width: 100%;
-    background-color: #fff;
+    background-color: var(--rs-color-white);
     background-clip: padding-box;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 0.3rem;
@@ -815,7 +879,7 @@ textarea.form-control,
     align-items: flex-start;
     justify-content: space-between;
     padding: 1rem;
-    border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid var(--rs-color-border-bootstrap);
     border-radius: 0.3rem 0.3rem 0 0;
 }
 
@@ -837,7 +901,7 @@ textarea.form-control,
     z-index: 1040;
     width: 100vw;
     height: 100vh;
-    background-color: #000;
+    background-color: var(--rs-color-black);
     opacity: 0.5;
 }
 
diff --git a/components/rsptx/templates/staticAssets/css/student_detail.css b/components/rsptx/templates/staticAssets/css/student_detail.css
index 1fddd9816..d94e40afb 100644
--- a/components/rsptx/templates/staticAssets/css/student_detail.css
+++ b/components/rsptx/templates/staticAssets/css/student_detail.css
@@ -7,7 +7,7 @@
 .back-link {
     float: right;
     font-size: 13px;
-    color: #4a90e2;
+    color: var(--rs-color-primary);
     text-decoration: none;
 }
 
@@ -22,13 +22,13 @@
     justify-content: space-between;
     margin: 24px 0 10px;
     padding-bottom: 8px;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--rs-color-border);
 }
 
 .section-header h2 {
     font-size: 20px;
     font-weight: 600;
-    color: #333;
+    color: var(--rs-color-text-strong);
     margin: 0;
 }
 
@@ -36,7 +36,7 @@
 .hot-section {
     width: 100%;
     overflow: hidden;
-    border: 1px solid #ddd;
+    border: 1px solid var(--rs-color-border);
     border-radius: 6px;
     margin-bottom: 8px;
 }
diff --git a/components/rsptx/templates/staticAssets/css/studentreport.css b/components/rsptx/templates/staticAssets/css/studentreport.css
index 48229187c..61dc9c393 100644
--- a/components/rsptx/templates/staticAssets/css/studentreport.css
+++ b/components/rsptx/templates/staticAssets/css/studentreport.css
@@ -3,7 +3,7 @@
    server look-and-feel (Bootstrap based). */
 
 #studentreport h1 {
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid var(--rs-color-text-strong);
     margin: 0 0 0.5em 0;
     padding: 0.2em 0;
 }
@@ -15,22 +15,22 @@
 
 .dash-title-description {
     font-size: 0.6em;
-    color: #777777;
+    color: var(--rs-color-text-light);
 }
 
 .dash-section {
     margin: 0 0 1.5em 0;
-    border: 1px solid #ddd;
+    border: 1px solid var(--rs-color-border);
     border-radius: 4px;
-    background-color: #fff;
+    background-color: var(--rs-color-white);
 }
 
 .dash-section-header {
     font-size: 1rem;
     font-weight: bold;
     padding: 0.4em 0.6em;
-    border-bottom: 1px solid #333;
-    background-color: #f5f5f5;
+    border-bottom: 1px solid var(--rs-color-text-strong);
+    background-color: var(--rs-color-surface-muted);
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
 }
@@ -55,12 +55,12 @@
 }
 
 .dash-section-content thead td {
-    border: 1px solid #ccc;
+    border: 1px solid var(--rs-color-border-strong);
     padding: 0.2em 0.5em;
 }
 
 .dash-section-content tbody tr {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--rs-color-surface-muted);
 }
 
 .dash-section-content td {
@@ -81,11 +81,11 @@
 }
 
 #book-completion .started {
-    color: #998800;
+    color: #6e7a00;
 }
 
 #book-completion .notstarted {
-    color: #333333;
+    color: var(--rs-color-text-strong);
 }
 
 .chapter .clickable {
diff --git a/components/rsptx/templates/staticAssets/css/subchapoverview.css b/components/rsptx/templates/staticAssets/css/subchapoverview.css
index f2f045a67..0a4842d84 100644
--- a/components/rsptx/templates/staticAssets/css/subchapoverview.css
+++ b/components/rsptx/templates/staticAssets/css/subchapoverview.css
@@ -14,38 +14,38 @@
 .page-header {
     text-align: center;
     padding: 24px 0 16px;
-    border-bottom: 2px solid #4a90e2;
+    border-bottom: 2px solid var(--rs-color-primary);
     margin-bottom: 20px;
 }
 
 .page-header h1 {
     font-size: 28px;
     font-weight: 600;
-    color: #333;
+    color: var(--rs-color-text-strong);
     margin-bottom: 4px;
 }
 
 .course-subtitle {
     font-size: 16px;
-    color: #666;
+    color: var(--rs-color-text-muted);
     margin: 0;
 }
 
 /* Course info banner */
 .course-info {
-    background: #f0f7ff;
-    border-left: 4px solid #4a90e2;
+    background: var(--rs-color-primary-background);
+    border-left: 4px solid var(--rs-color-primary);
     padding: 12px 16px;
     border-radius: 4px;
     margin-bottom: 20px;
-    color: #333;
+    color: var(--rs-color-text-strong);
     font-size: 14px;
 }
 
 /* Controls card */
 .controls-card {
-    background: #fff;
-    border: 1px solid #ddd;
+    background: var(--rs-color-white);
+    border: 1px solid var(--rs-color-border);
     border-radius: 8px;
     padding: 20px;
     margin-bottom: 20px;
@@ -68,7 +68,7 @@
 .control-group label:first-child {
     font-weight: 600;
     font-size: 13px;
-    color: #555;
+    color: var(--rs-color-text-subtle);
     text-transform: uppercase;
     letter-spacing: 0.04em;
 }
@@ -95,7 +95,7 @@
     gap: 6px;
     font-size: 14px;
     font-weight: normal;
-    color: #333;
+    color: var(--rs-color-text-strong);
     cursor: pointer;
     margin: 0;
 }
@@ -106,7 +106,7 @@
 
 /* Generate button */
 .btn-generate {
-    background: linear-gradient(135deg, #4a90e2, #357abd);
+    background: linear-gradient(135deg, var(--rs-color-primary), var(--rs-color-primary-hover));
     border: none;
     padding: 10px 24px;
     font-size: 15px;
@@ -116,7 +116,7 @@
 }
 
 .btn-generate:hover {
-    background: linear-gradient(135deg, #357abd, #2a5f8f);
+    background: linear-gradient(135deg, var(--rs-color-primary-hover), var(--rs-color-primary-deep));
 }
 
 .btn-generate:disabled {
@@ -135,18 +135,18 @@
     justify-content: center;
     gap: 16px;
     padding: 24px;
-    background: #f8f9fa;
+    background: var(--rs-color-surface-subtle);
     border-radius: 8px;
 }
 
 #status-text {
     font-size: 15px;
-    color: #555;
+    color: var(--rs-color-text-subtle);
 }
 
 .spinner {
-    border: 4px solid #e0e0e0;
-    border-top: 4px solid #4a90e2;
+    border: 4px solid var(--rs-color-border-subtle);
+    border-top: 4px solid var(--rs-color-primary);
     border-radius: 50%;
     width: 36px;
     height: 36px;
@@ -169,14 +169,14 @@
 
 .row-count {
     font-size: 13px;
-    color: #666;
+    color: var(--rs-color-text-muted);
 }
 
 /* Handsontable container */
 #hot-container {
     width: 100%;
     overflow: hidden;
-    border: 1px solid #ddd;
+    border: 1px solid var(--rs-color-border);
     border-radius: 6px;
 }
 
diff --git a/components/rsptx/templates/staticAssets/main.css b/components/rsptx/templates/staticAssets/main.css
index 393977f4c..302c878f9 100644
--- a/components/rsptx/templates/staticAssets/main.css
+++ b/components/rsptx/templates/staticAssets/main.css
@@ -17,10 +17,15 @@ html {
   position: relative;
   min-height: 100%;
 }
+
 body {
-  padding-top: 2rem;
-  margin-bottom: 60px;
-  font-size: 12pt;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex: 1;
 }
 
 .footer {
@@ -37,8 +42,6 @@ body {
 }
 
 .navbar {
-  margin-left: 20px;
-  margin-right: 20px;
 }
 
 .container {