refactor: update app code for domain-scoped schema migration

- Update dbt model references to use new schema naming (stg_toronto, int_toronto, mart_toronto)
- Refactor figure factories to use consistent column naming from new schema
- Update callbacks to work with refactored data structures
- Add centralized design tokens module for consistent styling
- Streamline CLAUDE.md documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

portfolio_app/figures/toronto/demographics.py

@@ -5,6 +5,16 @@ from typing import Any
 import pandas as pd
 import plotly.graph_objects as go
 
+from portfolio_app.design import (
+    CHART_PALETTE,
+    GRID_COLOR,
+    PALETTE_GENDER,
+    PAPER_BG,
+    PLOT_BG,
+    TEXT_PRIMARY,
+    TEXT_SECONDARY,
+)
+
 
 def create_age_pyramid(
     data: list[dict[str, Any]],
@@ -52,7 +62,7 @@ def create_age_pyramid(
             x=male_values_neg,
             orientation="h",
             name="Male",
-            marker_color="#2196F3",
+            marker_color=PALETTE_GENDER["male"],
             hovertemplate="%{y}<br>Male: %{customdata:,}<extra></extra>",
             customdata=male_values,
         )
@@ -65,7 +75,7 @@ def create_age_pyramid(
             x=female_values,
             orientation="h",
             name="Female",
-            marker_color="#E91E63",
+            marker_color=PALETTE_GENDER["female"],
             hovertemplate="%{y}<br>Female: %{x:,}<extra></extra>",
         )
     )
@@ -77,12 +87,12 @@ def create_age_pyramid(
         title=title,
         barmode="overlay",
         bargap=0.1,
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-        font_color="#c9c9c9",
+        paper_bgcolor=PAPER_BG,
+        plot_bgcolor=PLOT_BG,
+        font_color=TEXT_PRIMARY,
         xaxis={
             "title": "Population",
-            "gridcolor": "rgba(128,128,128,0.2)",
+            "gridcolor": GRID_COLOR,
             "range": [-max_val * 1.1, max_val * 1.1],
             "tickvals": [-max_val, -max_val / 2, 0, max_val / 2, max_val],
             "ticktext": [
@@ -93,7 +103,7 @@ def create_age_pyramid(
                 f"{max_val:,.0f}",
             ],
         },
-        yaxis={"title": None, "gridcolor": "rgba(128,128,128,0.2)"},
+        yaxis={"title": None, "gridcolor": GRID_COLOR},
         legend={"orientation": "h", "yanchor": "bottom", "y": 1.02},
         margin={"l": 10, "r": 10, "t": 60, "b": 10},
     )
@@ -127,17 +137,9 @@ def create_donut_chart(
 
     df = pd.DataFrame(data)
 
+    # Use accessible palette by default
     if colors is None:
-        colors = [
-            "#2196F3",
-            "#4CAF50",
-            "#FF9800",
-            "#E91E63",
-            "#9C27B0",
-            "#00BCD4",
-            "#FFC107",
-            "#795548",
-        ]
+        colors = CHART_PALETTE
 
     fig = go.Figure(
         go.Pie(
@@ -153,8 +155,8 @@ def create_donut_chart(
 
     fig.update_layout(
         title=title,
-        paper_bgcolor="rgba(0,0,0,0)",
-        font_color="#c9c9c9",
+        paper_bgcolor=PAPER_BG,
+        font_color=TEXT_PRIMARY,
         showlegend=False,
         margin={"l": 10, "r": 10, "t": 60, "b": 10},
     )
@@ -167,7 +169,7 @@ def create_income_distribution(
     bracket_column: str,
     count_column: str,
     title: str | None = None,
-    color: str = "#4CAF50",
+    color: str = CHART_PALETTE[3],  # Teal
 ) -> go.Figure:
     """Create histogram-style bar chart for income distribution.
 
@@ -199,17 +201,17 @@ def create_income_distribution(
 
     fig.update_layout(
         title=title,
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-        font_color="#c9c9c9",
+        paper_bgcolor=PAPER_BG,
+        plot_bgcolor=PLOT_BG,
+        font_color=TEXT_PRIMARY,
         xaxis={
             "title": "Income Bracket",
-            "gridcolor": "rgba(128,128,128,0.2)",
+            "gridcolor": GRID_COLOR,
             "tickangle": -45,
         },
         yaxis={
             "title": "Households",
-            "gridcolor": "rgba(128,128,128,0.2)",
+            "gridcolor": GRID_COLOR,
         },
         margin={"l": 10, "r": 10, "t": 60, "b": 80},
     )
@@ -227,13 +229,13 @@ def _create_empty_figure(title: str) -> go.Figure:
         x=0.5,
         y=0.5,
         showarrow=False,
-        font={"size": 14, "color": "#888888"},
+        font={"size": 14, "color": TEXT_SECONDARY},
     )
     fig.update_layout(
         title=title,
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-        font_color="#c9c9c9",
+        paper_bgcolor=PAPER_BG,
+        plot_bgcolor=PLOT_BG,
+        font_color=TEXT_PRIMARY,
         xaxis={"visible": False},
         yaxis={"visible": False},
     )