:root {
    /* ... existing variables same rakho ... */
    --secondary: #3b308e;
    --secondary-container:  #66fa6e;  
    /*#e0dfff*/
    --on-secondary: #ffffff;
    --secondary-fixed: #8cff94;
    --on-secondary-fixed: #110468;
    --success-mint: #1d9e75;
    --error-container: #ffdad6;
    --primary-fixed-dim: #c9c4ff;
}

:root {
    /* ===========================
       COLORS
    =========================== */
    --primary: #534ab7;
    --on-primary: #ffffff;
    --primary-container: #e2dfff;
    --on-primary-container: #110468;

    --surface: #ffffff;
    --surface-dim: #dcd7f3;
    --surface-bright: #fcf8ff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f6f1ff;
    --surface-container: #f1ebff;
    --surface-container-high: #ebe5ff;
    --surface-container-highest: #e6e0ff;

    --outline: #77757e;
    --outline-variant: #c8c5d0;

    --error: #ba1a1a;
    --success: #1d9e75;
    --warning: #ba7517;

    --on-surface: #1b1b1f;
    --on-surface-variant: #46464f;

    --nav-bg: #1e1b3a;
    --nav-inactive: #b4b2a9;

    --page-bg: #f7f8fc;

    /* ===========================
       RADIUS
    =========================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ===========================
       SPACING
    =========================== */
    --base: 4px;
    --stack-sm: 8px;
    --stack-md: 16px;
    --stack-lg: 24px;
    --container-margin: 24px;
    --gutter: 16px;
    --sidebar-width: 260px;

    /* ===========================
       FONT
    =========================== */
    --font-family: "Inter", sans-serif;

    /* ===========================
       SHADOWS
    =========================== */
    --shadow-card: 0 4px 20px rgba(0,0,0,.08);
}

/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:var(--font-family);
    background:var(--page-bg);
    color:var(--on-surface);
}

/* ===========================
   TYPOGRAPHY
=========================== */

.headline-xl{
    font-size:32px;
    line-height:40px;
    font-weight:700;
}

.headline-lg{
    font-size:24px;
    line-height:32px;
    font-weight:600;
}

.headline-md{
    font-size:20px;
    line-height:28px;
    font-weight:600;
}

.body-lg{
    font-size:16px;
    line-height:24px;
}

.body-md{
    font-size:14px;
    line-height:20px;
}

.body-sm{
    font-size:12px;
    line-height:16px;
}

.label-md{
    font-size:14px;
    line-height:20px;
    font-weight:500;
}

.label-sm{
    font-size:12px;
    line-height:16px;
    font-weight:600;
}

/* ===========================
   HELPERS
=========================== */

.card{
    background:var(--surface);
    border:1px solid var(--outline-variant);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
}

.btn-primary{
    background:var(--primary);
    color:var(--on-primary);
    border:none;
    padding:12px 20px;
    border-radius:var(--radius-md);
    cursor:pointer;
    transition:.3s;
}

.btn-primary:hover{
    opacity:.9;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sidebar-nav a{
    display:flex;
    align-items:center;
    gap:16px;
    padding:12px 16px;
    border-radius:12px;
    text-decoration:none;
    color:var(--nav-inactive);
    transition:.3s;
}

.sidebar-nav a:hover{
    background:#ffffff10;
    color:#fff;
}

.sidebar-nav a.active{
    background:var(--primary);
    color:#fff;
}