:root{
  /* Base Colors */
  --bg:#ffffff;
  --text:#000000;
  --muted:#6B7280;
  --border:#E5E7EB;
  --shadow:0 8px 24px rgba(0,0,0,.08);

  --card:#FFFFFF;
  --card-ghost:#FAFBFD;

  /* Brand Palette */
  --color-primary: #05299E;
  --color-secondary: #5E4AE3;
  --color-accent: #947BD3;
  --color-pink-1: #F0A7A0;
  --color-pink-2: #F26CA7;

  /* Mappings */
  --accent: var(--color-primary);
  --accent-2: var(--color-secondary);

  --topbar:#F1F4F8;
  --topbar-text: var(--color-primary);
  
  /* Component Variables */
  --primary-color: var(--color-primary);
  --primary-transparent: rgba(5, 41, 158, 0.2);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-disabled: #9CA3AF;
  --border-color: var(--border);
  --background-light: #F3F4F6;
  --danger-color: #EF4444;

  --ring: 8px;
  --halo: 6px;
  
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:20px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}

.container{max-width:1120px;margin:0 auto;padding:40px 20px 80px}

.topbar{background:var(--topbar);color:var(--topbar-text)}
.topbar .wrap{
  max-width:1120px;margin:0 auto;padding:10px 20px; height: 5%;
  display:flex;align-items:center;justify-content:space-between
}
.brand a,.nav a{color:var(--topbar-text)}
.nav a{margin-left:16px}
.nav a:hover{text-decoration:underline}

.footer{text-align:center;opacity:.7;padding:24px 0 40px}

.u-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.u-card:hover{transform:translateY(-1px)}
.u-btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--card-ghost);
  color:var(--text);
  transition:background .15s,border-color .15s,transform .03s;
}
.u-btn:active{transform:scale(.98)}
.u-btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.u-btn--primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.u-btn--ghost:hover{background:#F1F5F9;border-color:#D1D5DB}